性能优化

Optimizing Performance

避免调停

• DOM 操作相对于 JavaScript 对象操作更慢

• 当一个组件的 props 或 state 变更，React 会将最新返回的元素与之前渲染的元素进行对比，以此决定是否有必要更新真实的 DOM

• 即使 React 只更新改变了的 DOM 节点，重新渲染仍然仍然花费了一些时间

  • 在大部分情况下它并不是问题，不过如果它已经慢到让人注意，你可以通过覆盖生命周期函数 shouldComponentUpdate 来进行提速

  • 该方法会在重新渲染前被触发，默认返回 true

  • shouldComponentUpdate(nextProps, nextState) { return true }

  • 如果你不知道什么情况下你的组件不需要更新，你可以在 shouldComponentUpdate 中返回 false 来跳过整个渲染的过程

  • 大部分情况下，你可以继承 React.PureComponent 以代替手写 shouldComponentUpdate()，它用当前与之前 props 和 state 的浅比较覆写了 shouldComponentUpdate() 的实现

shouldComponentUpdate 的作用