React - 拥有不可变道具的好处是什么？

Question

在学习了React后，我仍然认为很多概念很难得到。

其中：道具的不变性。

如果我做对了，那么组件或多或少等同于面向对象编程中的对象。

在面向对象的编程中，您可以通过method-parameter将数据传递到对象中。在React中，您获得了将数据传递到组件的道具。

如果将参数传递给Java方法，则可以在方法体中更改这些数据。没问题。

在React中不可能，因为道具是不可变的。

我所见过的所有文献和内容都提到这些不变性是一个重要的概念。但到目前为止，没有人真正告诉我为什么。

有人可以告诉我：拥有不可变道具的好处是什么？

分别是：不具备不变性的最大缺点是什么？如果道具是可变的，会发生什么？

优先作为一个好例子。那么我可能会得到更大的机会。

Answer 1

我会保持简短，因为我不是函数式编程方面的专家。我确信有经验丰富的人最终会投入。

首先考虑你的组件，而不是对象，而是作为函数（如数学术语）。 您的组件是其属性的函数。更具体地说，它是渲染功能。它需要道具并返回HTML（实际上它返回虚拟dom树，但那是无关紧要的）

数学中的函数纯。你给他们一个输入，他们给你一个输出。 他们没有副作用和他们不使用任何其他输入。这给你带来了很多好处：

1. 纯函数可预测。每个输入都将具有完全相同的输出。可预测，意味着他们可以优化并利用 memoization 之类的东西来缓存他们的结果，或者如果他们的道具没有改变，则不必渲染UI的部分内容你知道他们不会改变。
2. 由于您不需要担心全局状态，仅根据您输入的输入有助于在出现问题时进行调试。 您只需担心传递给您的属性。
3. 您不必担心执行纯函数的顺序，因为它们可以保证没有副作用。
4. 它可以提供非常酷的开发人员体验，例如时间旅行调试和热插拔组件。

这些只是一些好处，像我这样的普通开发者可以看到。我确信具有真正功能编程经验的人可以获得更多。希望它有所帮助

Answer 2

（阅读以下Why can't I update props in react.js?后）

如果您只能改变自己的状态，并且通过道具间接地传达您的状态，那么这是一个很好的责任分离。这导致更高的内聚力。

如果组件A允许通过直接更改props来更改组件B的状态，则可以使代码更易理解。

我希望这能解决原因。

Answer 3

不变性的最大好处是无论您的组件渲染是可预测的。生成的视图只是一些道具的地图。想象一下，如果在一个层次结构中，每个组件都能够更改传递的道具。很难跟踪那些进行修改的人。

这就是函数式编程中纯函数和不可变类型是常态的原因。很容易推理出来 - 纯函数是输入和输出的纯映射，就是它。