1. ホーム
  2. javascript

ReactjsのsetState()のsynchronousな代替はあるか?

2023-08-29 02:37:56

質問

の説明によると ドキュメント :

setState()はthis.stateを直ちに変異させるのではなく、保留中の状態遷移を作成します。このメソッドを呼び出した後にthis.stateにアクセスすると、潜在的に既存の値を返してしまう可能性があります。

setStateの呼び出しの同期動作は保証されておらず、パフォーマンス向上のために呼び出しがバッチ処理されることがあります。

ということで、以降 setState() は非同期であり、同期のパフォーマンスについては保証されていません。の代替となるものはありますか? setState() の代替となるものはありますか?

例えば

//initial value of cnt:0
this.setState({cnt:this.state.cnt+1})
alert(this.state.cnt);    //alert value:0

というのは alert の値は以前のものなので、代替となるのは alert value:1 を使って setState() .

Stackoverflowにこの質問に似た質問がいくつかありますが、正しい答えを見つけることができるところはありません。

どのように解決するのですか?

ドキュメントにあるように、同期の代替手段はありません。

しかし、状態を変更した後にアクションを実行したいと仮定すると、次の方法でこれを実現できます。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
     x: 1
    };
    
    console.log('initial state', this.state);
  }
  
  updateState = () => {
   console.log('changing state');
    this.setState({
      x: 2
    },() => { console.log('new state', this.state); })
  }
  
  render() {
    return (
      <div>
      <button onClick={this.updateState}>Change state</button>
    </div>
    );
   
  }
}

ReactDOM.render(
  <MyComponent />,
  document.getElementById("react")
);
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>