为什么ReactJS组件必须像纯函数一样？

Question

文件说 所有React组件必须在其道具方面表现得像纯函数一样。 https://facebook.github.io/react/docs/components-and-props.html，但没有解释其背后的真正原因，为什么会这样？

Answer 1

React组件应该是纯粹的，这意味着它的render方法的结果应该完全取决于props和state，以及相同的属性和状态{{1应该给出相同的结果。

如果渲染不是纯粹的，则意味着它可以为同一输入返回不同的结果，因此React无法根据组件的更改来判断DOM的哪些部分需要更新。这很重要，因为React的性能取决于此。为什么？这有点复杂。

基于状态定义UI是非常了不起的，并且每当状态的任何部分发生变化时，UI都会重新呈现自己。但是你可以想象，每当你改变一些东西时，完全重新渲染整个DOM会非常缓慢。 React通过检查DOM所需的最小更改量来解决这个问题，以反映新状态。它知道这些更改是基于每个组件接收的属性和状态，并且可以判断它是否需要在组件的任何属性或状态发生更改时更新组件。

将此树作为组件层次结构的示例

我们已将render更改为8，因此我们也更改了h，因为f是h的孩子，我们也更改了f，因为{ {1}}是c等等的孩子。

这里的关键是思考React如何检查组件树。从根本开始，看到它发生了变化。然后，它会检查所有孩子，并且只会更改f，因此无需检查所有c和c分支。然后，它会检查a分支，并且只会更改b，因此无需检查c和f。该操作在每个组件上完成，以计算最小变化量以及需要更新的内容。

如果在任何时候你可以改变组件的呈现方式，这意味着React将需要检查所有分支及其所有子代，以了解发生了什么变化，因为它不能依赖于状态和道具来知道分支何时改变以及如何改变。这将非常缓慢，并使整个React框架可以生效。

Answer 2

我会说因为跟踪组件状态的变化。如果它不纯净，每次执行都会引起副作用。这样，很难知道发生了什么变化，以及如何应对这些变化。

以其他方式，纯函数具有相同输出的相同输出。使管理属性和跟踪某些内容发生变化变得更加容易，从而可以更轻松，更可预测地对变更作出反应。

Answer 3

如果它们不是与道具有关的纯粹功能，那么它将违反反应所提供和依赖的整个层次/代表团结构。

假设您有两个组件，组件A和组件B，组件A是组件B的父组件。组件A具有基于某种数据的自己的状态。当您将其状态的一部分作为prop传递给组件B时，您将在组件B将委派给组件A的两个组件之间建立合同以获取所述prop的值。

这在某种意义上说是两个组成部分之间的合同，并且合同未被违反的唯一方式是组件B不直接改变或改变传递的道具。这就是纯粹的功能意味着它不会直接改变道具。当然你可以克隆道具然后改变它，但是你想要的不是合同的破坏，因为那时他们没有引用相同的值。但是，如果您直接改变道具，您也将改变父组件值。这可能会导致意外的副作用，并导致反应阴影dom差分算法出现问题。

以下是官方反应文件中解释的

https://facebook.github.io/react/blog/2015/02/24/streamlining-react-elements.html#problem-mutating-props-you-dont-own

Answer 4

你会发现＆＃34;为什么＆＃34;理解Reconciliation algorithm React用于渲染。

Here您拥有理解所需内容所需的所有信息。

部分内容在Marco Scabbiolo的回答中得到了很好的解释，但如果您想了解React的工作方式，我强烈建议您阅读我建议的帖子。

在这里发布答案对于一个帖子和不必要的内容来说太多了，因为它已经由React Team解释过了。这就是为什么我更喜欢直接向你提供资源。