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

参考答案：

React 的重新渲染主要由组件的状态变化、父（或子）组件的重新渲染、上下文（Context）的变化以及 Hooks 的变化触发。当这些条件满足时，React 会更新 UI 以使其与新的状态或数据同步。

状态变化：当一个组件的状态（state）发生变化时，React 会触发该组件的重新渲染。这通常发生在用户交互，如点击按钮、输入文本等事件中。在类组件中，你可以使用 this.setState() 来改变状态并触发重新渲染；在函数组件中，你可以使用 useState Hook 来达到同样的效果。
父（或子）组件的重新渲染：如果一个组件的父组件（或子组件）重新渲染，那么该组件也可能会重新渲染。这是因为 React 的渲染过程是自顶向下的，父组件的更新会导致其子组件的重新渲染。即使子组件的 props 没有发生变化，它们仍然会重新渲染。
上下文（Context）的变化：当一个组件使用的上下文（Context）发生变化时，该组件会重新渲染。Context 提供了一种在组件树中传递数据的方式，当 Context Provider 中的值发生变化时，所有使用这个 Context 的组件都会重新渲染。
Hooks 的变化：在函数组件中，Hooks 的变化也会导致组件的重新渲染。例如，当你使用 useEffect Hook 来处理副作用，并在依赖项数组中添加或删除元素时，这会导致 useEffect 的执行时机改变，从而触发组件的重新渲染。

重新渲染（render）的过程：

当 React 需要重新渲染一个组件时，它会执行以下步骤：

计算新的 props 和 state：React 首先会计算组件的新 props 和 state。这通常涉及到处理用户输入、调用 API、更新状态等操作。
调用 render 方法：然后，React 会调用组件的 render 方法（对于类组件是 render() 方法，对于函数组件是函数体）。这个方法会返回一个 React 元素，描述了组件在 UI 中应该如何显示。
比较新旧元素：React 会比较新旧两个 React 元素，这个过程称为 "协调"（Reconciliation）。它会找出哪些部分发生了变化，并生成一个更新队列。
执行更新：最后，React 会执行更新队列中的操作，更新 DOM 和组件的状态。这个过程是高效的，因为它只会更新实际发生变化的部分，而不是整个页面。

通过这个过程，React 能够实现高效的 UI 更新，提高应用程序的性能和用户体验。