三、利用高阶组件优化代码也许你已经发现，对于每一个含有样式的组件，都需要在componentWillMount生命周期中执行完全相同的逻辑，对于这些逻辑我们是否能够把它封装起来，不用反复出现呢？
其实是可以实现的 。利用高阶组件就可以完成:
//根目录下创建withStyle.js文件import React, { Component } from 'react';//函数返回组件//需要传入的第一个参数是需要装饰的组件//第二个参数是styles对象export default (DecoratedComponent, styles) => {return class NewComponent extends Component {componentWillMount() {//判断是否为服务端渲染过程if (this.props.staticContext) {this.props.staticContext.css.push(styles._getCss())}}render() {return <DecoratedComponent {...this.props} />}}}复制代码然后让这个导出的函数包裹我们的Home组件 。
import WithStyle from '../../withStyle';//......const exportHome = connect(mapStateToProps, mapDispatchToProps)(withStyle(Home, styles));export default exportHome;复制代码这样是不是简洁很多了呢？将来对于越来越多的组件，采用这种方式也是完全可以的 。
part8: 做好SEO的一些技巧，引入react-helmet这一节我们来简单的聊一点SEO相关的内容 。
一、SEO技巧分享所谓SEO(Search Engine Optimization)，指的是利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名 。现在的搜索引擎爬虫一般是全文分析的模式，分析内容涵盖了一个网站主要3个部分的内容:文本、多媒体(主要是图片)和外部链接，通过这些来判断网站的类型和主题 。因此，在做SEO优化的时候，可以围绕这三个角度来展开 。
对于文本来说，尽量不要抄袭已经存在的文章，以写技术博客为例，东拼西凑抄来的文章排名一般不会高，如果需要引用别人的文章要记得声明出处，不过最好是原创，这样排名效果会比较好 。多媒体包含了视频、图片等文件形式，现在比较权威的搜索引擎爬虫比如google做到对图片的分析是基本没有问题的，因此高质量的图片也是加分项 。另外是外部链接，也就是网站中a标签的指向，最好也是和当前网站相关的一些链接，更容易让爬虫分析 。
当然，做好网站的门面，也就是标题和描述也是至关重要的 。如：
文章插图
网站标题中不仅仅包含了关键词，而且有比较详细和靠谱的描述，这让用户一看到就觉得非常亲切和可靠，有一种想要点击的冲动，这就表明网站的转化率比较高 。
二、引入react-helmet而React项目中，开发的是单页面的应用，页面始终只有一份title和description，如何根据不同的组件显示来对应不同的网站标题和描述呢？
其实是可以做到的 。
npm install react-helmet --save复制代码组件代码:(还是以Home组件为例)import { Helmet } from 'react-helmet';//...render() {return (<Fragment><!--Helmet标签中的内容会被放到客户端的head部分--><Helmet><title>这是三元的技术博客，分享前端知识</title><meta name="description" content="这是三元的技术博客，分享前端知识"/></Helmet><div className="test">{this.getList()}</div></Fragment>);//...复制代码这只是做了客户端的部分，在服务端仍需要做相应的处理 。其实也非常简单：
//server/utils.jsimport { renderToString } from 'react-dom/server';import {StaticRouter } from 'react-router-dom'; import React from 'react';import { Provider } from "react-redux";import { renderRoutes } from 'react-router-config';import { Helmet } from 'react-helmet';export const render = (store, routes, req, context) => {const content = renderToString(<Provider store={store}><StaticRouter location={req.path} context={context}><div>{renderRoutes(routes)}</div></StaticRouter></Provider>);//拿到helmet对象，然后在html字符串中引入const helmet = Helmet.renderStatic();const cssStr = context.css.length ? context.css.join('n') : '';return`<html><head><style>${cssStr}</style>${helmet.title.toString()}${helmet.meta.toString()}</head><body><div id="root">${content}</div><script>window.context = {state: ${JSON.stringify(store.getState())}}</script><script src=https://www.isolves.com/it/cxkf/bk/2020-05-12/"/index.js">