React における setState メカニズムの簡単な紹介

この記事では、React の setState メカニズムについて簡単に説明します。必要な方は参考にしていただければ幸いです。

API 分析: setState(updater, [callback])

updater: データ更新 FUNCTION/OBJECT
callback: 更新成功後のコールバック FUNCTION

// updater - Function
this.setState((prevState, props) => {
  return {counter: prevState.counter + props.step};
});

// update - Object
this.setState({quantity: 2})

setState:

1. 非同期: React は通常、更新が必要なコンポーネントのバッチを収集し、レンダリング パフォーマンスを確保するためにそれらをすべて一度に更新します。 2. 浅いマージによる問題と解決策 Objecr.assign()

setState を使用して状態を変更した後、すぐにこれを通じて最新の状態を取得します。 state Status

解決策:componentDidUpdate または setState のコールバック関数で

// setState回调函数
changeTitle: function (event) {
  this.setState({ title: event.target.value }, () => this.APICallFunction());
},
APICallFunction: function () {
  // Call API with the updated value
}

を取得する必要があります。オブジェクト メソッドを使用して更新される場合は、それが追加されるだけです。

解決策: updater 関数を使用します

onClick = () => {
    this.setState({ index: this.state.index + 1 });
    this.setState({ index: this.state.index + 1 });
}

// 最后解析为,后面的数据会覆盖前面的更改，所以最终只加了一次.
Object.assign(
  previousState,
  {index: state.index+ 1},
  {index: state.index+ 1},
)

//正确写法
onClick = () => {
    this.setState((prevState, props) => {
      return {quantity: prevState.quantity + 1};
    });
    this.setState((prevState, props) => {
      return {quantity: prevState.quantity + 1};
    });
}

提案:

1. shouldComponentUpdate メソッドを自分でカスタマイズしない限り、setstate() を render() 関数に記述しないでください。無限ループが発生します。

2 値を state に直接割り当てることはできません。また、レンダリングは発生しません (例: this.state.num = 2
3)。配列やオブジェクトなどの参照オブジェクトを操作する場合は、次を使用します。新しいオブジェクトを返すメソッド
配列: プッシュ、ポップ、シフト、アンシフトは使用しないでください。スプライスは連結、スライス、フィルター、拡張構文を使用できます
オブジェクト: Object.assgin/拡張構文

setState 更新メカニズム#図に示すように: 保留キューと更新キュー

##

以上がReact における setState メカニズムの簡単な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。