Question

我一直在阅读React的Quick Start文档;

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

这是一个“纯”函数，因为它不会尝试更改其输入，并且总是为相同的输入返回相同的结果：

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组件生命周期中的大多数函数都具有(prop, state) => { //code }形式的签名。

React docs将props定义为给予组件的任意输入，组件将基于props呈现某些内容（有时基于state如果是stateful组件，也是如此。所以props就像是给予组件的东西，比如说，参考。用这种方式想象一下：你是一个组件，你的父组件为你提供了一本参考书，其中包含了一些你必须遵守的规则（a.k.a. render）。可能会出现两种情况：

你是愚蠢的（stateless）：你刚看完这本书，并表现得如此。
你聪明（stateful）：你读了这本书，然后记下记事本里的一些东西，你可以查看，更新或删除。您甚至可以将书中的内容复制到记事本中，然后编辑记事本。

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

我不知道这是否是正确的表示，但React组件以类似的方式工作。你很快就会掌握它。请务必阅读Thinking in React。快乐的编码！

Answer 3

反应组件的props旨在存储其父组件的值和函数。这只是模式，道具是不可改变的。如果您想拥有一个可变的变量，那么将其存储在组件的状态中。国家是可变的。

为什么React道具不可变？

3 个答案: