跳到主要内容

哪些方法会触发 React 重新渲染？重新渲染 render 会做些什么？

参考答案：

在 React 中，有几种主要的方式可以触发组件的重新渲染：

  1. 更改状态（State Changes）：当组件的状态（state）发生变化时，React 会触发重新渲染。这通常是通过调用 this.setState()（在类组件中）或 setState()（在函数组件和Hooks中）来完成的。
  2. 更改属性（Props Changes）：当父组件的状态或属性改变，并且这些改变影响了传递给子组件的属性（props）时，子组件也会触发重新渲染。
  3. 强制更新（Force Update）：React 提供了一个 forceUpdate() 方法，可以强制组件重新渲染，即使组件的状态和属性没有发生变化。但是，这种方法并不常用，因为它绕过了 React 的正常更新机制，可能会导致性能问题。

在 React 中，重新渲染的过程主要包括两个阶段：

  1. Render 阶段（渲染阶段）：在这个阶段，React 会重新计算组件的输出，也就是重新执行 render() 方法。这个阶段会收集所有需要应用到 DOM 上的变更。
  2. Commit 阶段（提交阶段）：在这个阶段，React 会将 Render 阶段计算出的变更应用到 DOM 上。如果是类组件，React 会同步运行 componentDidMount 或 componentDidUpdate 生命周期方法；如果是函数组件，React 会同步运行 useLayoutEffect 钩子。当浏览器绘制 DOM 之后，再运行所有的 useEffect 钩子。

需要注意的是，React 的重新渲染并不一定会导致 DOM 的更新。React 使用了一种叫做 "虚拟 DOM" 的技术，通过比较新旧两棵虚拟 DOM 树的差异，然后只更新那些真正发生变化的部分，从而提高了应用的性能。