react setStateの非同期動作
// 상태 업데이트(객체 전달)
// 함수 실행될때 +1 씩 증가
handleIncrease = () => {
this.setState({
counter: this.state.counter + 1
});
this.setState({
counter: this.state.counter + 1
});
};
// 상태 업데이트(함수 전달)
// 함수 실행될때 +2 씩 증가
handleIncrease = () => {
this.setState(state => ({
counter: state.counter + 1
}));
this.setState(state => ({
counter: state.counter + 1
}));
};
setState関数を使用する場合は、上記のコードに示します.パラメータを使用して、更新する値を入力できます.
関数を渡すこともできます.
2つの方法の違いを理解する.
反応式ドキュメントなら.
setState()は、構成部品のステータスに対する変更をキューに配置します.
構成部品とその子
ヒント:更新されたstateを使用して再レンダリングする必要があります.
setState()はすぐにステータスを変更しません.
要求変更状態と考えられる.
性能上、反応器は直ちに状態変更を起こさない.
非同期更新
これは、構成部品でステータスの変化を一括更新できることを意味します.
あるいは後で延期したり、
stateが直ちに変更されることは保証されません.
したがって、stateが変化し、何かを処理する必要がある場合は、
setState(updater,callback)の2番目のパラメータコールバック関数を使用するか、
ComponentDidUpdateを使用する必要があります.
再び戻ってきて、
setState()は非同期で実行されます.
1つの関数内で複数回呼び出された場合、バッチを実行できます.
これは
Object.assign
と同じ結果を示した.Object.assign(
previousState,
{quantity: state.quantity + 1},
{quantity: state.quantity + 1},
...
)
// quantity 값은 계속 덮어쓰기 되어
// 가장 마지막 state.quantity + 1 이 적용됨
// 이때는 state.quantity 값이 다 동일하기 때문에
// 변경가 한번일어난 것으로 됨
したがって、ステータス値に基づいてステータス値を更新する必要がある場合はupdater関数を使用する必要があります.
this.setState((state) => {
return {quantity: state.quantity + 1};
});
//this.setState((state, props) => {
// return { counter: state.counter + props.step };
//});
updater関数でステータスが更新された場合構成部品が持つ状態の参照.
保証は最新の価格です.
また、updaterの結果はstate(merge)に浅くマージされます.
(なぜthis.setStateに変更するステータス値を入力するだけですか?)
Reference
この問題について(react setStateの非同期動作), 我々は、より多くの情報をここで見つけました https://velog.io/@rimo09/react-setState의-비동기-동작テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol