Javascript 可变道具问题

阅读了这里的其他问题后，道具对象似乎曾经被冻结，但我似乎能够对其进行变异：

class PropChange extends React.Component {
  render(){
    this.props.name = 'John';
    return <p>hi {this.props.name}</p>
  }
}

ReactDOM.render(<PropChange name="Frank" />, document.getElementById('mount'));

class-PropChange扩展了React.Component{
render（）{
this.props.name='John'；
returnhi{this.props.name}

}
}
ReactDOM.render（，document.getElementById（'mount'））；

功能组件也是如此

有谁能解释这种行为以及如何使其不可改变

---

编辑：所以，我做了进一步的调查。看看vs，在我注销的行中：

Object.getOwnPropertyDescriptor（props，“name”）

-它可以在codepen上写，但不能在codesandbox上写！有人知道为什么吗？？？

props对象是一个常规Javascript对象，因此它是可变的。可以使用冻结对象

我还想指出，任何更改仅适用于组件范围：

class PropChange extends React.Component {
  render(){
    console.log(this.props.name); // => Frank
    this.props.name = 'John';
    console.log(this.props.name); // => John
    return <p>hi {this.props.name}</p>
  }
}

const props = { name: 'Frank' };

ReactDOM.render(<PropChange {...props} />, document.getElementById('mount'));

console.log(props.name); // => Frank

class-PropChange扩展了React.Component{
render（）{
console.log（this.props.name）；//=>Frank
this.props.name='John'；
console.log（this.props.name）；//=>John
returnhi{this.props.name}

}
}
const props={name:'Frank'}；
ReactDOM.render（，document.getElementById（'mount'））；
console.log（props.name）；//=>直率的

如果你检查道具，它们是普通物体。它是不可变的这一事实有助于构建没有双向绑定的心智模型——将数据从子级向上传播到父级的唯一方法是使用更新程序回调

顺便说一句，您的示例中的

PropChange2

并没有否定不变性（

PropChange

确实如此）<代码>名称isa字符串，这是一种基本类型，当您在参数中分解结构时，它是

var name = props.name;

通过重新指定该值，您不是在对其进行变异，而是在覆盖该值

如果您担心不变性/安全性，我建议您在适当的严格设置下使用TypeScript和ESLint。这种规则最好只在开发/编译期间强制执行。

您可以使用它来强制对象属性的不变性。但是，如果您的

道具

包含数据结构作为值，它们仍然是可变的

constprops={name:“John”，身高：{英尺：5，英寸：10}
对象。冻结（道具）
props.name=“不会让这种情况发生”
props.name/“John”
props.height.feets=“将允许这种情况发生”
props.height.feet/“会让这种情况发生”

---

如果您想要完全不可变，请确保冻结嵌套的数据结构。

可变状态和不可变属性只是react中的模式。 在React中，它不是为了改变道具或使状态不变

尽管如此，它只是一个javaScript，它是如何设计的。 对象在JavaScript中是可变的

所以，我建议你不要冻结道具，也不要使其可变。React官方不推荐使用此选项

---

如果执行此意外更改，您可能会中断应用程序中的react工作状态。

对不起，是的，您是对的。我根据一种反射性反应去构造。我已经更新了代码笔来反映。