react性能优化

react性能优化

1. code splitting

   • 入口起点：使用 entry 配置手动地分离代码。

   • 防止重复：使用 SplitChunks 去重和分离 chunk。

   • 动态导入：通过模块的内联函数调用来分离代码。

     import { add } from './math';
     console.log(add(16, 26));
     // 改写成动态 import ，首次加载时不去加载 math ,减少首次加载资源的体积。 ↓↓↓
     import("./math").then(math => {
       console.log(math.add(16, 26));
     });
     
     // 引用react的高阶组件react-loadable进行动态import。
     const LoadableComponent = Loadable({
       loader: () => import('./my-component'),
       loading: Loading,
     });// 先展示一个 loading-component，然后动态加载 my-component 的代码，组件代码加载完毕之后替换掉 loading-component
     

2. shouldComponentUpdate避免重复渲染

   • 比较组件的props和state是否真的发生变化，如果发生变化则返回true，否则返回false。
   • React提供了一个辅助对象来实现这个逻辑 - 继承自React.PureComponent。

3. 使用不可突变的数据结构

   • 数据突变（mutated）是指变量的引用没有改变（指针地址未改变），但是引用指向的数据发生了变化（指针指向的数据发生变更）；PureComponent 仅仅对 this.props.words的新旧值进行“浅比较”。
   • 数组使用concat,对象使用Object.assign()
   • ES6支持数组或对象的spread语法
   • 使用不可突变数据immutable.js

4. 组件尽可能拆分、解耦

   • 组件尽可能的细分，比如一个input+list组件，可以将list分成一个PureComponent，只在list数据变化时更新。否则在input值变化页面重新渲染的时候，list也需要进行不必要的DOM diff。

5. 列表类组件优化

   • 对于一个基于排序的组件渲染：为组件添加一个key属性以唯一的标识组件，直接使用insertBefore操作移动组件位置，而这个操作是移动DOM节点最高效的办法

6. bind函数优化

   • constructor绑定：this.handleClick = this.handleClick.bind(this);只在组件初始化的时候执行一次
   • 使用时绑定：<p onClick={this.handleClick.bind(this)}>每次render都会执行
   • 使用箭头函数：<Test click={() => { this.handleClick() }}/>每一次render时候都会生成新的箭头函数。

7. 不要滥用props

   • 尽量只传需要的数据，避免多余的更新，尽量避免使用{...props}

8. reactDOMServer进行服务端渲染组件

   • 为了实现SSR，你可能会用nodejs框架（Express、Hapi、Koa）来启动一个web服务器，接着调用 renderToString 方法去渲染你的根组件成为字符串，最后你再输出到 response。
   • 客户端使用render方法来生成HTMLReactDOM.render(<MyPage />, document.getElementById('app'));

9. react 性能检测工具

   • react-addons-perf：

     • Perf.start() 开始记录
     • Perf.stop() 结束记录
     • Perf.printInclusive() 查看所有设计到的组件render
     • Perf.printWasted() 查看不需要的浪费组件render

   • react16版本的方法，在url后加上?react_pref，就可以在chrome浏览器的performance，我们可以查看User Timeing来查看组件的加载时间。