React渲染如何改变道具

Question

假设我们有一个像这样的组件：

const MyComponent = ({height, children}) => (
  <div style={{ height }}>{children}</div>
)

现在，当更改height道具时，React是否重新渲染整个组件，还是仅更改已渲染的div的高度？

Answer 1

React遵循虚拟DOM的原理，当您更改影响虚拟DOM的任何属性时，react会将新创建的虚拟DOM与先前渲染的虚拟DOM进行比较，并确定需要进行哪些更改。

由于在这种情况下，仅更改height属性，因此React将在原始DOM中更新该属性，而不重新渲染并更改任何其他DOM元素

Answer 2

React具有通常用于冷对帐的“差异”算法，因此组件更新是可预测的，同时对于高性能应用程序来说足够快。

使用React时，您可以在单个时间点将render()函数视为创建React元素树。在下一个状态或道具更新时，该render()函数将返回不同的React元素树。然后，React需要弄清楚如何有效地更新UI以匹配最新的树。

在比较两棵树时，React首先比较两个根元素。行为因根元素的类型而异。

当比较两个相同类型的React DOM元素时，React会查看这两个元素的属性，保留相同的基础DOM节点，并且仅更新更改的属性。

有一个article in the official documentation详细说明了它的工作方式