reactjs 为什么React prop 是不可变的？

0md85ypi 于 2023-01-08 发布在 React

关注(0)|答案(3)|浏览(188)

我一直在阅读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 prop 是只读的？

reactjs

来源：https://stackoverflow.com/questions/47471131/why-are-react-props-immutable

3条答案

按热度按时间

ojsjcaue1#

组件应该管理自己的状态，但不应该管理自己的属性。props本质上是“由组件所有者管理的状态”。这就是属性 * 不可变 * 的原因。
React docs还建议将状态视为不可变的，这是因为直接操作this.state会绕过React的状态管理，这可能是潜在的危险，因为之后调用setState()可能会替换您所做的 mutation。

赞(0）回复(0）举报 2023-01-08

dl5txlt92#

您可以将React组件看作是props和state的函数，随着文档的深入，您会发现情况确实如此，因为React组件生命周期中的大多数函数都具有(prop, state) => { //code }形式的签名。
React文档将props定义为任何提供给组件的任意输入，组件将基于props呈现某些内容（如果是stateful组件，有时也基于state），因此props就像是提供给组件的某些内容，例如引用。你是一个组件，你的父组件给你一本参考书，包含一些你必须如何表现的规则（也叫渲染）。
1.你是哑巴（stateless）：你只是读了这本书，并表现得如此。
1.你很聪明（stateful）：你读了这本书，然后在记事本上记下一些东西，你可以查看、更新或删除。你甚至可以把书中的内容复制到记事本上，然后编辑记事本。
无论哪种方式，您**都不能更新提供给您的参考书。只有父组件可以更新它（例如，提供给您另一本书，或更改其内容）。
我不知道这是否是一个正确的表示，但是React组件的工作方式是相似的。你很快就会掌握它的窍门。确保你也读过Thinking in React。编码愉快！