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>
関連
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み] JavaScriptでNULL、未定義、空白の変数をチェックする標準的な関数はありますか?
-
[解決済み】ReactJS - "setState "が呼ばれるたびにrenderが呼び出されるのですか?
-
[解決済み] なぜ "use strict "はパフォーマンスを10倍向上させるのか?
-
[解決済み] bootstrap のポップオーバーがすべての要素の上に表示されない
-
[解決済み] TypeScriptのdeclare classとinterfaceの違いとは?
-
[解決済み] アサインの左側にJavascriptのオブジェクトブラケット表記({ ナビゲーション } =)があります。
-
[解決済み] オブジェクトの配列からReactコンポーネントをレンダリングする
-
[解決済み] JavaScriptでjson-objectのキーを取得する [重複].
-
[解決済み] JavaScriptとLuaの微妙な違い [終了しました]
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] JSのDateからDay名
-
[解決済み] JavaScriptで次の要素/前の要素を取得しますか?
-
[解決済み] AngularJS - ngRepeatフィルタリングされた結果の参照を取得する方法
-
[解決済み] Chromeの拡張機能開発にWebStormを使用するにはどうすればよいですか?
-
[解決済み] JavaScript のオブジェクトの配列を比較し、最小値/最大値を取得する
-
[解決済み] ECMAScriptとは?
-
[解決済み] Promise : then vs then + catch [重複].
-
[解決済み] javascriptでオプションのパラメータを扱う
-
[解決済み] JavaScriptのArray.sort()メソッドでシャッフルするのは正しいのか?
-
[解決済み] これは純関数ですか?