React组件何时从新渲染？如何作性能优化？

本文只讨论函数式组件，由于React再也不建议使用class component。

React组件何时从新渲染

在线demo：

• 当Parent re-render时，Child也会re-render，除非如下2种状况之一发生：

  • <Child/>这个jsx element对象与上次渲染时相同（同一个对象引用）。

  • Child组件被React.memo装饰，而且传给Child组件的props与上次渲染相同。

    • 这种状况能够理解为React.memo帮咱们返回了上次渲染时使用的<Child/>jsx element对象。
• 当Child的状态更新而且re-render的时候，Parent不会re-render，Child的兄弟组件固然也不会re-render，只有Child以及它的后裔组件会re-render。
• 若是经过setState设置的新state与当前state相同，则不会触发re-render。(bail out)

如何作性能优化

性能优化小窍门：

• 使用React.memo装饰组件，使得它在props相同的时候不从新渲染（它下面的子树也不会从新渲染）。

• 使用React.usememo来缓存计算结果、或者jsx element。它有2个方面的做用：

  • 一方面，可以避免重复计算。当依赖与上次相同的时候，计算函数不会被调用，而是直接取上次缓存的计算结果。
  • 另外一方面，能够用来避免子组件的re-render。前面已经说了，若是<Child/>这个jsx element对象与上次渲染是同一个对象，那么Child就不会被从新渲染（它的render函数不会被调用）。所以，Parent可使用React.usememo来拿到上次渲染时使用的<Child/>jsx element对象，避免它从新渲染。