範例如下：
https://stackblitz.com/edit/react-gv3phw?file=index.js
兩個DIV區塊，當滑鼠移入的時候顯示該區塊的文字，
滑鼠移出的時候隱藏該區塊的文字
可是實際做的時候發現
當單一區塊移入移出都沒有問題
可是從左區塊移入右區塊
卻發現文字怎麼都顯示
正常應該頁面上只會有一個顯示
於是下了個console.log看結果發現
原本預期的步驟是
enter render leave render enter render leave render
但是跑出來是
enter render leave enter render leave render
沒錯~中間少了個render造成結果不正確
但一直想不到是為什麼?
我在onMouseEnter跟onMouseLeave都有下setState
為何從區塊移到另一個區塊時
卻沒有發生render?

因為 setState 不是同步的，而且會 batch 在一起^文件: https://bit.ly/2NmOrBxhttps://stackblitz.com/edit/react-ndrcpa?file=index.js照文件修好之後像上面這樣，應該是你要的結果，參考看看如果你的 setState 會依賴於上一個 state，那就應該改用this.setState((state,props) => newState) 這種形式去寫才可以正常運算，不然會遇到很多先後順序和 batch 的問題依賴於上一個 state: 比方說你先取用了 this.state 然後再運算再把運算結果丟去 this.setState({})這種寫法就會有問題取用上一個 state, props 的東西都應該寫在 this.setState((state, props) => 的這個 function 裡面)

用hook會比較穩 https://stackblitz.com/edit/react-v6f1aa

那個順序其實不太重要，面對確定會有非同步的情形(例如setState)的設計的重點是使用不管順序怎樣都沒差的寫法