react服务端渲染,十一引入样式&&一些优化
- 添加样式修饰 style-loader在服务段渲染找不到window对象 服务端webpack打包使用isomorphic-style-loader
rules: [{ test: /\.scss?$/, use: ['isomorphic-style-loader','css-loader','sass-loader'] }]
- 多个组件css代码覆盖:使用一个数组将所有组件的样式push进去,最后使用数组的join方法转化
//服务端 const context = {style:[]} const styleStr = context.style.length?context.style.join('\n'):''; //组件 if(props.staticContext) { props.staticContext.style.push(style._getCss()); }
- loadData方法潜在问题 将loadData挂载到connect暴露的高阶组件上面
const HeaderNew = connect(mapStateToProps,mpaStateToDispatch)(withStyle(Header, style)); HeaderNew.getData = (dispatch) => { return dispatch(changeState) } export default HeaderNew;
- 使用高阶组件对我们的组件进行添加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));
- Seo 搜索引擎优化 :不止是对title和description的匹配,而是对html文档的全文的匹配
- 文本尽量做到原创;链接:内部链接-》连接出去的网站尽量相关,外部链接->多多跳转到我们的网页
- react-helmet实现title和description的定制https://www.npmjs.com/package/react-helmet
- 代码压缩 区分开发和线上环境
项目地址:git@github.com:longlongdan/Reactssr.git