React Re-render 优化，您不能忽视的技巧

React 作为一个视图框架，一般情况下速度已经很快了，并且在 React16 新推出的 Fiber 架构中，通过时间切片及高优先级任务中断来尽快相应用户的操作。但是有些我们忽略点，造成了不必要的组件 re-render，从而造成性能的浪费。

当组件更新时，pureCompon 或 shouldComponentUpdate 在很多场景下被大量使用，从而判断组件是否需要重新渲染。

关于这两个函数的差别，简略来说，pureComponent 是对 shallowCompare 的封装，只能浅层次判断 props 和 state 是否改变，对嵌套的对象则无能为力。

shouldComponentUpdate 则可以自定义自己的判断逻辑。但这需要自己去考虑嵌套的情况以及各种奇葩场景的判断。

根据以上两种方式判断组件是否需要重新渲染时，我们需要注意：

1. 比较引用而不是值：props 和 state 可能是对象。
   使用 === 来比较它们。不要使用 ==。
2. 深度比较对象和数组：objects 和 arrays 也可能嵌套。
   确保使用深度比较算法（如 Lodash 的 _.isEqual）来比较它们。
3. 注意函数和日期：functions 和 dates 是引用类型。
   如果你想比较它们，请使用 === 来比较它们的引用。
4. 考虑使用 Immutable.js：immutable.js 是一个库，它可以帮助您管理不可变的数据结构。
   这可以使比较 props 和 state 变的更容易。

一些有用的技巧：

1. 使用 PureComponent 或 shouldComponentUpdate ：这是一个避免组件不必要重新渲染的好方法。
2. 使用 React.memo ：React.memo 是一个 React Hook，它可以帮助您将组件包装成一个纯组件。
3. 使用 Lodash 或 Immer ：Lodash 和 Immer 是两个库，它们可以帮助您管理和更新 JavaScript 对象和数组。
4. 使用 Immutable.js ：Immutable.js 是一个库，它可以帮助您管理不可变的数据结构。

结论

React 组件的重新渲染是一个重要的性能问题。
通过使用 PureComponent 或 shouldComponentUpdate，您可以避免组件不必要地重新渲染。
此外，您还可以使用 React.memo、Lodash、Immer 或 Immutable.js 来进一步优化组件的重新渲染性能。