最近在學習react.js的過程中遇到了一點問題,先上代碼圖:
這個例子裡面的input我給他添加了一個onChange事件事實改變state值來,并将state綁定在input的value上動态更新. 同時我在事件裡面分别實時console除了state值和input的value值,問題就出現了…如下圖
這個是輸出state值的結果,問題在于每次輸出的不是實時的值,而是上一次的值,相當于慢了一拍.
這個是直接根據事件的event事件擷取到input取的實時value,這張圖就沒有這個問題.
是以我有一點不明白,為什麼setState執行完畢之後,react的這一輪事務應該已經結束了呀,元件的state已經被更新了呀,為什麼還會console出上一輪的值呢?望大佬解答…..
ps: 題外話: 為什麼要給input的value綁定上state,我覺得不綁定也是可以的啊,使用者可以正常輸入,隻需要一個onChange事件更新state就好了…
回答
setState 并不會立即重新整理狀态樹，它還要合并新舊狀态并掃描虛拟DOM樹找出受影響的節點(比如你題外話裡說的 value=this.state.value)然後去更新節點上的UI部分，這是一件很耗時(相對而言)的事，是以會等一個時機去做批量更新，在這之前 state 并不會被改變。
至于為什麼給 value 綁定 state 上的值，是因為 react 有 雙向綁定 這個打通 Model 和 View 的大殺器啊，你不用再自己去監聽某個變量是否變化然後做界面上的修改。
setState是異步操作的，你不能馬上拿到state的指，可以用回調去拿
this.setState({value: event.target.value}, () => console.log(this.state.value))
setState() 是一個異步操作，後面的 console.log() 執行的時候, state 還沒更新完，是以輸出的是之前的值。
setState作為一個異步操作，是支援回調的~
this.setState({value: event.target.value}, () => console.log(this.state.value))
這樣并沒有問題，你最後送出的state肯定是和你輸入的是一樣的