Почему реквизиты в React доступны только для чтения?

Важная концепция компонента 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, если вы хотите мутировать "переданный реквизит p1" (p1 - это объект с его собственной ссылкой) (например, в ChildComponent вы пишете: p1.a=3), очевидно, "p1 - свойство состояния ParentComponent" также видоизменен. Но в этом случае ParentComponent не мог повторно отобразиться, потому что вы не активировали действие setState() в ParentComponent. Таким образом, это создаст множество неконтролируемых ошибок для нестабильного приложения React.

Я надеюсь, что сейчас вы понимаете, почему React говорит:

Строгое правило: все компоненты React должны вести себя как чистые функции по отношению к своим свойствам (не изменять напрямую свои свойства).

Бонус: для правильного изменения (мутации) реквизита необходимо использовать «обратный вызов fnc prop» в ChildComponent. Прямо сейчас он хорошо соблюдает концепцию 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} />     
   }
}

документы

Реагировать документы сказали

Все компоненты React должны вести себя как чистые функции по отношению к своим свойствам. Конечно, пользовательский интерфейс приложения динамичен и меняется со временем. В следующем разделе мы введем новое понятие «состояние». Состояние позволяет компонентам React изменять свои выходные данные с течением времени в ответ на действия пользователя, сетевые ответы и что-либо еще, не нарушая это правило.