React 学习之组件为什么重新渲染

前言

先把看的文章记一下：

• 为什么 React Re-renders --- Why React Re-Renders
• The Interactive Guide to Rendering in React
• React re-renders guide: everything, all at once
• Patterns.dev

知识点

组件是否需要重新渲染的几个条件：

• props 变化
• state 变化, 渲染阶段的 setState 会被批量合并优化，所以连续的多次 setState 只会生效一次。
• context 变化

触发重新渲染的原因：

• 父组件重新渲染了
• context 改变了
• hooks 变化了
• props 变化了，
• props 没变化， 并且没有 React.mono 的组件， 也会由于父组件渲染，被重新渲染

props 变化引起的

• 当组件重新渲染时，它会尝试重新渲染所有后代，无论它们是否通过 props 传递特定的状态变量。
  • 如果组件的父组件渲染， 导致了组件渲染，可以对组件做 React.memo 包裹，避免不必要的渲染。

Context 引起的

一些反模式， antipattern

render 中创建组件

在组件中创建一个组件，这样每次渲染都会创建一个新的组件，导致重新渲染。

应该怎么做？

• 把简单的组件， 放入子组件中，父组件中状态太多容易重新渲染。
• 使用 children, 把组件所谓 props 传递进去
• 使用 React.mono 优化
• 对 context provider 的值，做 memo 优化

keys 使用随机值