なぜ反応小道具は不変ですか？

Question

私はReactのQuick Startのドキュメントを読んできました。

あなたが関数やクラスなどのコンポーネントを宣言するかどうか、それはその入力を変更しようとしないので、これは、「純粋」機能である、独自の小道具

を修正してはいけません、 https://codesandbox.io/s/9z38xv4x7r

：それは、独自の入力が変更されるため、「不純な」機能で

function sum(a, b) { 
    return a + b; 
} 

これを：、常に同じ入力に対して同じ結果を返します。

function SayHi(props) { 
    props.name = "Jim"; // TypeError Cannot assign to read only property 'name' of object '#<Object>' 
    return <h1>Hi {props.name}!</h1>; 
} 

なぜReact Propsは読み取り専用ですか？

Answer 1

コンポーネントは独自の状態を管理する必要がありますが、それ自体の小道具は管理しないでください。 propsは本質的に「コンポーネント所有者によって管理される状態」です。だから小道具は不変です。

リアクションドックは、状態を不変であるかのように扱うことを推奨しています。 this.stateを直接操作することで、Reactの状態管理を迂回している可能性があります。setState()を呼び出すとの突然変異の代わりになる可能性があります。

Answer 2

反応成分のpropsは、その親成分から値と関数を格納することを目的としています。それは単なるパターンであり、小道具は不変です。変数を変更可能にする場合は、変数をコンポーネントの状態に格納します。州は変更可能です。

Answer 3

リアクタンス成分は、propsとstateの関数として考えることができます。 Reactコンポーネントライフサイクルのほとんどの機能が(prop, state) => { //code }という形式の署名を持っているため、ドキュメントを進めていくうちに、これが当てはまります。

は、ドキュメントコンポーネントに与えpropsなどの任意の入力を定義し、（それがstateful成分であれば、あまりにstateに基づいて、時には）成分はpropsに基づいて何かをレンダリングする反応します。だからpropsは、例えば、リファレンスのためにコンポーネントに与えられたものと似ています。あなたはコンポーネントであり、親コンポーネントは、あなたが振る舞わなければならない方法（a.k.a. render）に関するいくつかの規則を含むリファレンスブックを提供します。 2つの場合が発生する可能性があります。

1. あなたはダブ（stateless）です。本を読んだだけで、そのように動作します。
2. あなたはスマートです（stateful）：本を読んだ後で、メモ帳に表示、更新、削除することができるものをメモします。書籍の内容をメモ帳にコピーして、メモ帳を編集することもできます。

いずれにせよ、は、あなたに与えられた参考書を更新しないことがあります。親コンポーネントだけがそれを更新することができます（たとえば、別の書籍を提供する、またはその内容を変更するなど）。

これは正しい表現かどうかわかりませんが、Reactコンポーネントは同じように動作します。あなたはすぐにそのハングアップを取得します。 Thinking in Reactも必ずお読みください。ハッピーコーディング！