179 - 《React Re-Render》

汇总下关于 re-render 相关的知识点。

1、有四个原因会导致组件 re-render：状态变化、父组件 re-render、Context 变化和 Hooks 变化。这里有个误解是「Props 变化会导致 re-render？」其实不会，props 往上可以追溯到 state 变更，是 state 变更导致父组件 re-render 从而引发子组件 re-render，而不是由 props 变更引起。props 只在 React.memo 包裹的组件里才会做检查。

2、如何避免父组件 re-render 导致的 re-render？React.memo！使用 React.memo 后的组件只有 props 变更才会触发 re-render。你可能会想：为什么这不是默认行为？因为作为开发者，我们往往高估了重新渲染的成本。对于 props 很多且没有很多子组件的组件来说，相比 re-render，检查 props 是否变更带来的消耗可能更大。因此，如果对每个组件都进行 React.memo，可能会产生反效果。

3、Dan 在《Before You memo()》一文里有提，在使用 React.memo() 之前，还可以考虑两个方法，让 re-render 保持在一个很小的范围之内。1）把状态往下移，把可变的部分拆到平行组件里，比如 <Changed /><Expansive />，确保更新只在 <Changed /> 组件里；2）把内容往上提，把可变的部分拆到父级组件里，比如 <Changed><Expansive /></Changed>，在 <Changed /> 变更时只要 props.children 不变化，就不会触发子组件的 re-render。

4、Dan 说的第二点的本质是啥？是因为用了 props.children，而 props 不会触发 re-render。那用其他 props 属性可以吗？可以！比如 <Changed left={<Expansive1 />} right={<Expansive2 />} />，<Changed /> re-render 并不会导致 <Expansive /> re-render。这种方法叫「componets as props」。

5、什么时候应该用 useMemo/useCallback？1）React.memo 过的组件的 props 应该用，因为他们只有 props 变更时才会 re-render，所以反之非 React.memo 过的组件的 props 无需使用，因为都会 r