Open careteenL opened 4 years ago
1、react性能查看工具 查看react加载组件时所耗费的时间的工具，在react 16版本之前我们可以使用React Perf来查看。也可以在chorme中先安装React Perf扩展，然后在入口文件或者redux的store.js中加入相应的代码即可。 2、渲染角度优化 （1）使用immutable.js （2）不要在render中修改状态 （3）不在元素中使用内联样式，使用css隐藏节点而不是强制加载和卸载 （4）使用SSR，可以在服务端生成html后返回到客户端，使客服端能快速看到完整渲染的页面 （5）使用React.Fragment减少不必要DOM 3、组件层面优化 （1）组件懒加载。组件或UI库也可以使用动态导入的方式，只在用户使用到的时候加载。页面组件可以使用react-loadable。 （2）使用pureComponent代替component，以达到一些没必要的渲染，或者在使用shouldComponent进行一个优化。 （3）组件尽可能的拆分解耦，给列表类组件提供唯一不变的key，尽量不要使用下标作为key。 （4）在constructor中使用bind来绑定this，而不在使用时绑定或减少使用箭头函数，因为constructor只在组件初始化时执行一次，而使用时绑定是每次render都会执行，箭头函数也是如此。 （5）按需引入props，避免多余更新。 4、数据获取层面优化 （1）不要在componentWillMount中请求数据 （2）redux与reselect结合使用，reselect动作的原理是只要相关的状态没有改变，那么就直接使用上一次的缓存结果。 （3）结合业务场景使用localstorage、sessionstorage等缓存机制。 5、代码打包编译层面优化 （1）结合打包工具webpack、gulp等使用，一般常用webpack，利用webpack打包分离去重实现动态导入，减少重复性代码块。 （2）webpack结合plugin+loader使用。
1、react性能查看工具 查看react加载组件时所耗费的时间的工具，在react 16版本之前我们可以使用React Perf来查看。也可以在chorme中先安装React Perf扩展，然后在入口文件或者redux的store.js中加入相应的代码即可。 2、渲染角度优化 （1）使用immutable.js （2）不要在render中修改状态 （3）不在元素中使用内联样式，使用css隐藏节点而不是强制加载和卸载 （4）使用SSR，可以在服务端生成html后返回到客户端，使客服端能快速看到完整渲染的页面 （5）使用React.Fragment减少不必要DOM 3、组件层面优化 （1）组件懒加载。组件或UI库也可以使用动态导入的方式，只在用户使用到的时候加载。页面组件可以使用react-loadable。 （2）使用pureComponent代替component，以达到一些没必要的渲染，或者在使用shouldComponent进行一个优化。 （3）组件尽可能的拆分解耦，给列表类组件提供唯一不变的key，尽量不要使用下标作为key。 （4）在constructor中使用bind来绑定this，而不在使用时绑定或减少使用箭头函数，因为constructor只在组件初始化时执行一次，而使用时绑定是每次render都会执行，箭头函数也是如此。 （5）按需引入props，避免多余更新。 4、数据获取层面优化 （1）不要在componentWillMount中请求数据 （2）redux与reselect结合使用，reselect动作的原理是只要相关的状态没有改变，那么就直接使用上一次的缓存结果。 （3）结合业务场景使用localstorage、sessionstorage等缓存机制。 5、代码打包编译层面优化 （1）结合打包工具webpack、gulp等使用，一般常用webpack，利用webpack打包分离去重实现动态导入，减少重复性代码块。 （2）webpack结合plugin+loader使用。