ホームページ >ウェブフロントエンド >jsチュートリアル >ReactでのsetStateの使い方の詳しい説明
今回は React での setState の使い方について詳しく説明します。 React で setState を使用する際の 注意事項 について、実際のケースを見てみましょう。
class Example extends Component { contructor () { super() this.state = { value: 0, index: 0 } } componentDidMount () { this.setState({value: this.state.value + 1}) console.log(this.state.value) // 第一次输出 this.setState({value: this.state.value + 1}) console.log(this.state.value) // 第二次输出 setTimeout(() => { this.setState({value: this.state.value + 1}) console.log(this.state.value) // 第三次输出 this.setState({value: this.state.value + 1}) console.log(this.state.value) // 第四次输出 }, 0); this.refs.button.addEventListener('click', this.click) } click = () => { this.setState({value: this.state.index + 1}) this.setState({value: this.state.index + 1}) } render () { return ( <p><span>value: {this.state.value}index: {this.props.index}</span> <button>点击</button> </p> ) } }
常識によれば、これら 4 つの出力は 1、2、3、4 です。ただし、実際の出力は 0、0、2、3 です
setState は React コンポーネントの state の値をすぐには変更しません (つまり、setState は非同期更新です)
setState パス キューメカニズムは状態更新を実装します。
setState が実行されると、更新する必要がある状態はすぐに更新されるのではなく、マージされて状態キューに入れられます。バッチ;
これにより、次に setState が呼び出され、状態キューがマージされると、以前に直接変更された値は無視されます。
this.setState({name: 'Pororo'}) this.setState({age: 20})
this.setState({name: 'Pororo',age: 20})
this.setState({value: this.state.val + 1}); console.log(this.state.value); // 第一次输出 this.setState({value: this.state.val + 1}); console.log(this.state.value); // 第二次输出
this.state.value=this.state.value+1;
setTimeout(() => { this.setState({value: this.state.value + 1}) console.log(this.state.value) // 第三次输出 this.setState({value: this.state.value + 1}) console.log(this.state.value) // 第四次输出 }, 0);
は ReactEvent 処理によってトリガーされます。 (例: onClick によってトリガーされるイベント処理)、setState を呼び出すと this.state が非同期的に更新されます
さらに、setState 呼び出しは this.setState を同期的に実行します。 「さらに」とは、React によって addEventListener を通じて直接追加されたイベント処理関数と、setTimeout/setInterval によって生成される非同期呼び出しをバイパスすることを指します。
但是,当React在调用事件处理函数之前就会调用batchedUpdates,这个函数会把isBatchingUpdates修改为true,造成的后果就是由React控制的事件处理过程setState不会同步更新this.state。
如果this.setState的参数不是一个对象而是一个函数时,这个函数会接收到两个参数,第一个是当前的state值,第二个是当前的props,这个函数应该返回一个对象,这个对象代表想要对this.state的更改;
换句话说,之前你想给this.setState传递什么对象参数,在这种函数里就返回什么对象。不过,计算这个对象的方法有些改变,不再依赖于this.state,而是依赖于输入参数state。
function increment(state, props) { return {count: state.count + 1}; } function incrementMultiple() { this.setState(increment); this.setState(increment); this.setState(increment); }
假如当前this.state.count的值是0,第一次调用this.setState(increment),传给increment的state参数是0,第二调用时,state参数是1,第三次调用是,参数是2,最终incrementMultiple让this.state.count变成了3。
对于多次调用函数式setState的情况,React会保证调用每次increment时,state都已经合并了之前的状态修改结果。
要注意的是,在increment函数被调用时,this.state并没有被改变,依然,要等到render函数被重新执行时(或者shouldComponentUpdate函数返回false之后)才被改变。
function incrementMultiple() { this.setState(increment); this.setState(increment); this.setState({count: this.state.count + 1}); this.setState(increment); }
在几个函数式setState调用中插入一个传统式setState调用,最后得到的结果是让this.state.count增加了2,而不是增加4。
这是因为React会依次合并所有setState产生的效果,虽然前两个函数式setState调用产生的效果是count加2,但是中间出现一个传统式setState调用,一下子强行把积攒的效果清空,用count加1取代。
所以,传统式setState与函数式setState一定不要混用。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
EasyCanvas绘图库在Pixeler项目开发中使用实战总结
以上がReactでのsetStateの使い方の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。