react的性能优化

性能优化

• react的性能优化也基本集中在shouldComponentUpdate这个钩子函数上做文章

在 shouldComponentUpdate 函数中我们可以通过返回布尔值来决定当前组件是否需要更新。
这层代码逻辑可以是简单地浅比较一下当前 state/props 和之前的 state/props 是否相同，也可以是判断某个值更新了才触发组件更新。一般来说不推荐完整地对比当前 state/props和之前的 state/props是否相同，因为组件更新触发可能会很频繁，这样的完整对比性能开销会有点大，可能会造成得不偿失的情况。

当然如果真的想完整对比当前 state/props和之前的 state/props是否相同，并且不影响性能也是行得通的，可以通过 immutable 这种库来生成不可变对象。immutable对于操作大规模的数据来说会提升不错的性能，并且一旦改变数据就会生成一个新的对象，对比之前的 state/props是否一致也就方便多了

另外如果只是单纯的浅比较一下，可以直接使用 PureComponent，底层就是实现了浅比较 state/props。

class Test extends React.PureComponent {
  render() {
    return (
      <div>
        PureComponent
      </div>
    )
  }
}

这时候你可能会考虑到函数组件就不能使用这种方式了，如果你使用 16.6.0 之后的版本的话，可以使用 React.memo 来实现相同的功能。

const Test = React.memo(() => (
    <div>
        PureComponent
    </div>
))

通过这种方式我们就可以既实现了 shouldComponentUpdate 的浅比较，又能够使用函数组件。