为什么React道具不可变？

Question

我一直在阅读React的快速入门文档;

无论是将组件声明为函数还是类,它都不能修改自己的道具

这是一个"纯"函数,因为它不会尝试更改其输入,并且始终为相同的输入返回相同的结果:

function sum(a, b) {
  return a + b;
}

这是一个"不纯"的功能,因为它改变了自己的输入:https: //codesandbox.io/s/9z38xv4x7r

function SayHi(props) {
  props.name = "Jim"; // TypeError Cannot assign to read only property 'name' of object '#<Object>'
  return <h1>Hi {props.name}!</h1>;
}

为什么React道具是只读的？

Answer 1

组件应该管理自己的状态,但它不应该管理自己的道具.props本质上是"由组件所有者管理的状态".这就是道具不可改变的原因.

React docs还建议将状态视为不可变.这是因为通过this.state直接操作,你正在绕过React的状态管理,这可能是有潜在危险的,因为setState()之后的调用可能会取代你所做的突变.

Answer 2

您可能认为React组件是其props和的函数state。在阅读文档时，您会发现情况确实如此，因为React组件生命周期中的大多数函数都具有form的签名(prop, state) => { //code }。

React docs定义props为提供给组件的任意输入，并且组件将基于渲染某些东西props（state如果是有状态组件，则有时也基于渲染）。所以，props就是这样被赋予了发言权组件，参考的东西。试想一下：您是一个组件，父组件为您提供了一本参考书，其中包含一些有关行为方式的规则（也称为render）。可能出现两种情况：

1. 您很愚蠢（无状态）：您只是读了书，举止如此。
2. 您很聪明（有状态）：您读了这本书，然后在记事本中记下了一些可以查看，更新或删除的内容。您甚至可以将内容从书本中抄录到记事本中，然后编辑记事本。

无论哪种方式，您都不能更新提供给您的参考书。只有父组件可以对其进行更新（例如，给您另一本书或更改其内容）。

我不知道这是否是正确的表示形式，但是React组件以类似的方式工作。您很快就会掌握它。确保您也阅读了React中的《思考》。编码愉快！