javascript - React - 渲染组件如何工作

我对 react 组件的工作原理有点困惑。假设我有 3 个组件类 A、B 和 C。A 包含 B 和 C，我想在 HTML 页面中渲染 A

class A extends Component {
  render() {
    return (
      <B />
      <C />
    );
  }
}

如果我更改组件 C 内的状态，组件 B 也会重新渲染还是只有组件 C 会重新渲染？谢谢:D

最佳答案

不仅仅是C更新还是B更新，我认为这是一个关于协调算法如何工作的问题。当您执行状态更新时，React 会将其与 Virtual DOM 中的副本进行比较，并找出进行更改的最简单方法。

正如您所看到的，当您对 B 执行更新时，只有 B 更新。

C，仅 C 更新。

但是当你对A(称为App)执行更新时，A、B和C都会更新。

这是我用来执行性能分析的代码库 https://codesandbox.io/s/8n9rx1py5j

您可以从 React docs 了解如何在 Chrome 中执行分析

关于javascript - React - 渲染组件如何工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46631291/