Reactにおける不変値の説明

不変の値とは何ですか?

関数型プログラミングとは、プログラム内の関数と式が数学の関数のようになることを意味します。入力値が与えられると、出力は確実になります。例えば

a = 1 とします。
b = a + 1 とします。
=> a = 1 b = 2;

変数 b が現れ、変数 a の値が使用されるものの、a の値は変更されません。

よく知っているReactのコードを見てみましょう。this.state = { count: 1 } を初期化すると

コンポーネントマウント() {
    const newState = { ...状態、カウント: 2 }; // { カウント: 2 }
    新しい状態を設定します。
}

this.state を使用しましたが、this.state の参照アドレスを変更したり、count の値を直接変更したりはしていません。this.props についても同様です。

不変の値を使用するのはなぜですか?

React の公式ウェブサイトでは、次の 3 つの利点が説明されています。

複雑な機能を簡素化

不変性により、複雑な機能の実装が容易になります。

データの変更の追跡

データを直接変更すると、変更を追跡することが難しくなります。データの変更を追跡するには、変更可能なオブジェクトを変更前のバージョンと比較する必要があるため、オブジェクトツリー全体を 1 回走査する必要があります。

不変データへの変更を追跡するのは比較的簡単です。オブジェクトが新しいオブジェクトになったことがわかった場合、オブジェクトは変更されたと言えます。

Reactで再レンダリングするタイミングを決定する

不変性の主な利点は、React で純粋なコンポーネントを作成するのに役立つことです。不変データが変更されたかどうか、そしてコンポーネントをいつ再レンダリングするかを簡単に判断できます。

Reactのパフォーマンス最適化は不変の値と切り離せない

まず、shouldComponentUpdate フック関数はデフォルトで true を返す、つまり親コンポーネントが更新される限り、子コンポーネントも更新される必要があることは誰もが知っています。
shouldComponentUdpate は、nextProps と nextState の 2 つのパラメータを受け取ることができます。this.props.xxx が nextProps.xxx に等しく、this.state.xxx が nextState.xxx に等しいと判断された場合、戻り値を false に設定して、今回はサブコンポーネントを更新する必要がないことを示すことができます。

クラス CounterButton は React.Component を拡張します {
  コンストラクタ(props) {
    スーパー(小道具);
    this.state = {count: 1};
  }

  コンポーネントを更新する必要があります(次のプロパティ、次の状態) {
    if (this.props.color !== nextProps.color) {
      true を返します。
    }
    if (this.state.count !== nextState.count) {
      true を返します。
    }
    false を返します。
  }

  与える（） {
    戻る （
      <ボタン
        color={this.props.color}
        onClick={() => this.setState(state => ({count: state.count + 1}))}>
        カウント: {this.state.count}
      </ボタン>
    );
  }
}

React v15.3 では、props と state に対して浅い比較を実行してレンダリング関数の実行回数を減らし、不要なコンポーネントのレンダリングを回避し、パフォーマンスの最適化を実現できる新しい PureComponent クラスが追加されました。
PureComponentの原理は何ですか?

JS の変数型は、基本型 (数値、文字列、ブール値、未定義、null、シンボル) と参照型 (関数、オブジェクト、関数) に分かれていることはわかっています。基本型の値はスタックメモリに格納され、参照型の値はヒープメモリに格納されます。スタックメモリには、ヒープメモリへの参照のみが格納されます。浅い比較は、スタックメモリ内のデータのみを比較します。

クラスAppはPureComponentを拡張します{
  状態 = {
    アイテム: [1, 2, 3]
  }
  ハンドルクリック = () => {
    const { items } = this.state;
    アイテムをポップします。
    this.setState({ items });
  }
  与える（） {
    戻る （
        <div>
            <ul>
                {this.state.items.map(i => <li キー={i}>{i}</li>)}
            </ul>
            <button onClick={this.handleClick}>削除</button>
        </div>
    ）
  }
}

上記の例では PureComponent を使用しており、アイテムの参照アドレスを変更せずに items 配列の値のみを変更しています。そのため、アイテムは変更されていないとみなされ、レンダリング関数はトリガーされず、コンポーネントのレンダリングはトリガーされません。

コンポーネントの更新を実装する場合は、次のように新しい配列を作成し、新しい配列のアドレスを items に割り当てることができます。

ハンドルクリック = () => {
    const { items } = this.state;
    アイテムをポップします。
    var newItem = [...アイテム];
    this.setState({ 項目: newItem });
}

PureComponent は浅い比較を行うのに役立つので、状態にできるだけ注意を払う必要があります。データ構造内のネストされた参照を参照する必要がある場合は、Immutable.js を使用できます。
不変とは何か

（１）不変とは、一度作成されると変更できないデータである。（2）不変オブジェクトを変更、追加、削除すると、新しい不変オブジェクトが返されます。（３）不変実装の原則は永続データ構造であり、つまり、永続データが新しいデータを作成する場合、古いデータが利用可能であり、同時に変更されていないことを保証する必要がある。（4）同時に、deepCopyがすべてのノードをコピーすることによって生じるパフォーマンスの低下を回避するために、Immutableは構造共有を使用します。つまり、オブジェクトツリーノードが変更された場合、影響を受けるノードと親ノードのみが変更され、他のノードは共有されます。