React 组件优化

react

如何确定有问题的组件

可以通过工具找出那些可能影响应用性能的组件

• chrome dev tool Performance 标签
• why-did-you-update （随后分享）
  用于检测那些检查组件更新，找出那些没有必要更新的组件

为什么会影响性能

虽然 react 以 virtual dom ，通过 diff 计算确定变化的 DOM，精确地更新 DOM 树从大大提高了渲染速度。以 reconciliations 是影响性能的关键
减少需要 check 的节点。

什么会触发执行 reconciliations

传递没有必要的 props

<Component {...rest} />

在React的组件声明周期中会根据props是否发生了变化去确定是否对组件进行更新。

在组件属性中避免使用对象

下面这种方式每一次父级组件更新时候都会认为 {margin:0} ，每一次{margin:0} 生成一个新的对象，从而造成渲染子组件。

<Component style={{margin:0}}>

避免使用匿名函数

因为父组件在重新render的时候会去重新组件上的每个值，因为我们使用的是匿名函数，每次都会重新定义一个。当然传递到子组件时就不是原来的函数了。
所以尽量避免使用匿名函数，从而造成不必要的性能问题。

<Component onChange={(e)=> this.handleChange(e)}/>

我们如何减轻 reconciliations

• 优化前

<Component onChange={(e)=> this.handleChange(e)}/>

• 优化后

<Component onChange={this.handleChange}/>

• 优化前

<Component style={{margin:0}}>

• 优化后

const myStyles = {margin:0};
<Component style={myStyles}/>

减少没有必要更新，可以通过重写 shouldComponentUpdate 来控制没有必要的更新

<Component {...rest}/>

<Component necessary={props}>

shouldComponentUpdate

我们通过重写 shouldComponentUpdate 方法来控制子组件的渲染，当该方法返回 false 会阻止组件的渲染。

shouldComponentUpdate(nextProps,nextState){
    return this.props !== nextProps
    && this.state !== nextState
}

PureComponent

也可以通过使用 PureComponent 代替 Component 达到相同目的，在 PureComponent 中会对 shouldComponentUpdate 进行处理，也就是进行浅对比，PureComponent 好处就是简化开发者的工作，缺点就是对于复杂数据结构可能会产生错误。

avascript