为什么React中的道具是只读的？

Question

React文档中说：React非常灵活，但它有一条严格的规则：所有React组件在其道具方面都必须像纯函数一样工作

为什么呢？

我猜如果你直接改变props的值，组件不会重新渲染，这就是为什么我们必须使用setState。但我仍然不明白这背后的原因。为什么组件在道具方面必须像纯功能一样？




Answer 1

文档

医生说

所有React组件在其道具方面必须像纯函数一样工作。当然，应用程序UI是动态的，并且随着时间的推移而变化。在下一节中，我们将介绍“国家”的新概念。状态允许React组件在不违反此规则的情况下，随时间改变其输出，以响应用户操作、网络响应和其他任何操作。

Answer 2

React组件的重要概念是：组件应该只管理自己的状态，而不应该管理自己的道具。

事实上，一个组件的道具具体来说是“另一个组件（父组件）的状态”。所以道具必须由其组件所有者管理。这就是为什么所有的React组件在它们的道具方面都必须像纯函数一样运行（而不是直接变异它们的道具）。

我给大家看一个简单的例子：

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      p1: {a:1, b:2},
    }

   render() {
      return <ChildComponent p1={this.state.p1} />     
   }
}

在ChildComponent中，如果你想改变传递的prop p1（p1是一个带有他自己的ref的对象）（例如。在ChildComponent中，你写：p1. a=3），所以很明显，“p1-父母组件状态的属性”也是变异的。但是在这种情况下父母组件不能重新渲染，因为您没有触发父母组件中的动作setState（）。因此，它会为不稳定的React应用程序生成许多不受控制的错误。

我希望现在你能理解为什么React会说：

严格的规则是：所有React组件都必须像纯函数一样使用它们的道具（不要直接改变它们的道具）。

奖励：为了正确更改（变异）道具，你必须在ChildComponent中使用回调fnc道具。现在，它非常尊重React Component的概念。

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      p1: {a:1, b:2},
  }

  this.changeP1 = () => {
     this.setState({p1: {a:3, b:4}});
  }

   render() {
      return <ChildComponent p1={this.state.p1} changeP1={this.changeP1} />     
   }
}