web-dev-qa-db-ja.com

なぜReactの小道具が読み取り専用なのですか？

Reactドキュメントは言う：React is pretty flexible but it has a single strict rule: all React components must act like pure functions with respect to their props.

何故ですか？

小道具の値を直接変更した場合、コンポーネントは再レンダリングされないと思います。そのため、setStateを使用する必要があります。しかし、その理由はまだわかりません。コンポーネントが小道具に関して純粋な関数のようでなければならないのはなぜですか？

reactjspure-function
8
L. Pier Roberto

Reactコンポーネントの重要な概念：コンポーネントは、それ自体の状態のみを管理する必要がありますが、それ自体の小道具を管理するべきではありません。

実際、コンポーネントのpropsは具体的には「別のコンポーネント（親コンポーネント）の状態」です。したがって、小道具はコンポーネントの所有者が管理する必要があります。 そのため、すべての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コンポーネントは、プロップに関して純粋な関数のように動作する必要があります（プロップを直接変更しないでください）。

ボーナス：小道具を正しく変更（変更）するには、ChildComponentで「callback fnc prop」を使用する必要があります。現時点では、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} />     
   }
}
_
2
SanjiMika

ドキュメント

反応ドキュメントは言った

すべてReactコンポーネントは、小道具に関して純粋な機能のように動作する必要があります。もちろん、アプリケーションUIは動的で変化します次のセクションでは、「状態」の新しい概念を紹介します。状態により、Reactコンポーネントは、ユーザーのアクション、ネットワークの応答、その他に応じて、時間の経過とともに出力を変更できます、このルールに違反することなく。

0
MJ Studio