React の setSate の非同期問題の分析

この記事は、react の setSate の非同期問題を分析したものです。一定の参考値があります。困っている友人は参考にしてください。お役に立てれば幸いです。

ドキュメントを読むと、ほとんどが React の setState が非同期であると述べていますが、本当に非同期なのでしょうか?そうであれば、「同期できるか?」と推測することもできます。それでは、どのような場合に非同期にする必要があり、どのような場合に同期する必要があるのでしょうか?

まず、react の setSate の公式説明を見てみましょう。

setState() を、更新コンポーネントを即座に実行するコマンドではなく、リクエストとして考えてみましょう。パフォーマンスを向上させるために、React はそれを延期し、後でこれらのコンポーネントをすべて一度に更新する場合があります。 React は、変更された結果が setState の直後に利用可能になることを保証しません。

非常に古典的な例:

// 初始state.count 当前为 0
componentDidMount(){
    this.setState({count: state.count + 1});
    console.log(this.state.count)
}

react に精通している場合は、最終的な出力結果が 1 ではなく 0 であることを知っている必要があります。

別の例を見てみましょう

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = { number: 0 };
  }
  render() {
    return <button ref="button" onClick={this.onClick.bind(this)}>点我</button>;
  }
  componentDidMount() {
    //手动绑定mousedown事件
    this.refs.button.addEventListener(
      "mousedown",
      this.onClick.bind(this)
    );
   
    //setTimeOut
    setTimeout(this.onClick.bind(this), 1000);
  }
  onClick(event) {
    if (event) {
      console.log(event.type);
    } else {
      console.log("timeout");
    }
    console.log("prev state:", this.state.number);
    this.setState({
      number: this.state.number + 1
    });
    console.log("next state:", this.state.number);
  }
}
export {Demo};

3 つのメソッドを使用してこのコンポーネントの状態を更新します

 1.在p节点中绑定onClick事件
 2.在componentDidMount中手动绑定mousedown事件
 3.在componentDidMount中使用setTimeout调用onClick

コンポーネントをクリックした後の結果は推測できますか?出力結果は:

timeout
prev state: 0
next state: 1
mousedown
prev state: 1
next state: 2
click
prev state: 2
next state: 2

結果は少し予想外のようです。3 つのメソッドのうち、p にバインドされた onClick イベントだけが setState が非同期であることを証明できる結果を出力します。他の 2 つのメソッドは、setState が非同期であることを示しています。同期すること。

概要:
1. コンポーネントのライフサイクルまたは反応イベントのバインディングでは、setState は非同期的に更新されます。
2. 遅延コールバックまたはネイティブ イベント バインド コールバックでの setState の呼び出しは、必ずしも非同期であるとは限りません。

この結果は、setState が非同期で実行されるというステートメントが間違っていることを意味するものではなく、より正確なステートメントは、setState が同期実行を保証できないということです。

この記事はここで終了しました。その他のエキサイティングなコンテンツについては、PHP 中国語 Web サイトの JavaScript ビデオ チュートリアル 列に注目してください。

以上がReact の setSate の非同期問題の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。