react服务端渲染（十一）引入样式&&一些优化

1. 添加样式修饰 style-loader在服务段渲染找不到window对象 服务端webpack打包使用isomorphic-style-loader

   rules: [{
               test: /.scss?$/,
               use: ['isomorphic-style-loader','css-loader','sass-loader']
           }]

2. 多个组件css代码覆盖：使用一个数组将所有组件的样式push进去，最后使用数组的join方法转化

   //服务端
   const context = {style:[]}
   const styleStr = context.style.length?context.style.join('
   '):'';
   //组件
   if(props.staticContext) {
        props.staticContext.style.push(style._getCss());
   }

3. loadData方法潜在问题 将loadData挂载到connect暴露的高阶组件上面

   const HeaderNew = connect(mapStateToProps,mpaStateToDispatch)(withStyle(Header, style));
   HeaderNew.getData = (dispatch) => {
       return dispatch(changeState)
   }
   export default HeaderNew;

4. 使用高阶组件对我们的组件进行添加style的修饰

   //withStyle.js
   import React from 'react';
   
   //使用高阶组件进行组件的样式添加
   const withStyle = (OriginCom, style) => {
       return  (props) =>{
           if(props.staticContext) {
               props.staticContext.style.push(style._getCss());
           }
           return(<OriginCom {...props}/>)
       }
   }
   export default withStyle;

   在组件中使用这个方法对我们的组件进行修饰

   import style from './style.scss';
   import withStyle from '../../withStyle';
   
   const HeaderNew = connect(mapStateToProps,mpaStateToDispatch)(withStyle(Header, style));

5. Seo 搜索引擎优化 ：不止是对title和description的匹配，而是对html文档的全文的匹配
6. 文本尽量做到原创；链接：内部链接-》连接出去的网站尽量相关，外部链接->多多跳转到我们的网页
7. react-helmet实现title和description的定制https://www.npmjs.com/package/react-helmet
8. 代码压缩 区分开发和线上环境

项目地址：git@github.com:longlongdan/Reactssr.git