【发布时间】：2017-02-01 17:06:47
【问题描述】：
文档说 所有 React 组件就其 props 而言必须像纯函数一样工作。 https://facebook.github.io/react/docs/components-and-props.html，但没有解释背后的真正原因，这是为什么呢？
【问题讨论】：
标签： reactjs pure-function
【发布时间】：2017-02-01 17:06:47
【问题描述】：
一个 React 组件应该是纯的，这意味着它的render 方法的结果应该完全依赖于props 和state，并且对于相同的属性和状态render 应该给出相同的结果。
如果 render 不是纯的，则意味着它可以针对相同的输入返回不同的结果，因此 React 无法根据组件的更改来判断 DOM 的哪些部分需要更新。这很关键，因为 React 的性能取决于此。为什么？这有点复杂。
基于状态定义 UI 并在每次状态的任何部分发生变化时让 UI 重新呈现自身是令人惊奇的。但是您可以想象，每次更改某些内容时对整个 DOM 进行完全重新渲染会非常缓慢。 React 通过检查 DOM 反映新状态所需的最小更改量来解决这个问题。它根据每个组件接收到的属性和状态知道这些更改是什么，并且可以判断它是否需要在组件的任何属性或状态发生更改时更新组件。
以这棵树作为组件层次结构的例子
这里我们将h 更改为8，所以我们也更改了f，因为h 是f 的子级，我们还更改了c，因为f 是c 的子级等等.
这里的关键是考虑 React 如何检查组件树。它会从根开始，然后看到它发生了变化。然后它会检查所有的孩子，发现只有c发生了变化，所以不需要检查所有的a和b分支。然后它会检查c 分支，发现只有f 发生了变化，所以不需要检查e 和g。该操作在每个组件上执行，以计算最小更改量以及需要更新的内容。
如果在任何时候你可以改变组件的呈现方式，这意味着 React 需要检查所有分支及其所有子项以了解发生了什么变化，因为它不能依赖状态和道具来知道何时一个分支改变了，如何改变。这会非常缓慢，并且会使整个 React 框架不可行。
【讨论】：
-
嗨，马可，感谢您的回答。我看到如果 props 不改变，这会导致更好的差异算法执行，但另一方面，React 处理状态，它会发生变化。那么使用 props 可以获得更好的性能，但使用 state 却没有？
-
在 diffing 算法中同时考虑了 state 和 props，因此在这方面应该是相同的性能。我认为 state 与 props 的讨论更多地与约定和架构模式有关，而不是与性能有关。
我会说是因为跟踪组件状态变化。如果不是纯的，每次执行都会产生副作用。这样一来，就很难知道发生了什么变化，以及如何应对这些变化。
纯函数，换句话说，具有相同的输出和相同的输入。让管理属性和跟踪发生变化时变得更加容易，从而以更容易和可预测的方式对变化做出反应。
【讨论】：
如果它们不是与 props 相关的纯函数，那么它将违反 react 提供和依赖的整个层次结构/委托结构。
假设您有两个组件，组件 A 和组件 B，组件 A 是组件 B 的父组件。组件 A 基于某种数据有自己的状态。当您将其状态的一部分作为 prop 传递给组件 B 时，您正在建立两个组件之间的合约，组件 B 将委托给组件 A 以获得所述 prop 的值。
这在某种意义上是两个组件之间的契约，并且不违反契约的唯一方法是组件 B 不直接更改或更改传递下来的 prop。这就是纯函数的含义，它不会直接改变道具。当然，您可以克隆道具然后更改它，但是您希望这不会违反合同，因为此时它们没有引用相同的值。但是如果你直接改变 props，你也会改变父组件的值。这可能会导致意外的副作用，并导致 react shadow dom 差异算法出现问题。
这是官方反应文档中的解释
【讨论】：
你会发现“为什么”理解Reconciliation algorithm React 用于渲染。
Here您拥有了解所需的所有信息。
Marco Scabbiolo 的回答很好地解释了其中的一部分，但如果您想了解 React 的工作方式，我强烈建议您阅读我建议的帖子。
在这里发布答案对于帖子来说太多了而且没有必要，因为 React 团队已经解释过了。这就是为什么我更喜欢直接给你来源。
【讨论】：