React - 渲染组件的工作原理

Question

我对反应组件的工作原理有点困惑。假设我有3个组件类A，B和C. A包含B和C，我想在我的HTML页面中呈现A

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

如果我改变了组件C中的状态，那么组件B是否也会重新渲染或者只重新渲染组件C？谢谢：D

Answer 1

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

如您所见，当您对B执行更新时，只有B更新。

C，只有C更新。

但是当您对A（称为App）进行更新时，A，B和C更新。

以下是我用于执行性能分析https://codesandbox.io/s/8n9rx1py5j

的代码库

您可以从React docs

了解如何在Chrome中执行性能分析

Answer 2

仅限组件C且仅当您更改的状态影响渲染函数的输出时。

Answer 3

如何更好地了解沙盒会发生什么？我已经设置了一个沙盒来帮助它 - https://codesandbox.io/s/388wxk9321

  

打开控制台，然后点击按钮增加ModuleB＆amp;中的计数器。 ModuleC，然后从ModuleA

重置状态

对于懒惰的