[問題] React中滑鼠移入、移出，state的控制

[ctah (藍寶)]

範例如下：
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?

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 219.70.222.22 (臺灣)
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1572278815.A.5AC.html
→ Hevak: 因為 setState 不是同步的，而且會 batch 在一起
→ Hevak: ^文件: https://bit.ly/2NmOrBx
→ Hevak: https://stackblitz.com/edit/react-ndrcpa?file=index.js
→ Hevak: 照文件修好之後像上面這樣，應該是你要的結果，參考看看
→ Hevak: 如果你的 setState 會依賴於上一個 state，那就應該改用
→ Hevak: this.setState((state,props) => newState) 這種形式去寫
→ Hevak: 才可以正常運算，不然會遇到很多先後順序和 batch 的問題
→ Hevak: 依賴於上一個 state: 比方說你先取用了 this.state 然後再
→ Hevak: 運算再把運算結果丟去 this.setState({})
→ Hevak: 這種寫法就會有問題
→ Hevak: 取用上一個 state, props 的東西都應該寫在 this.setState(
→ Hevak: (state, props) => 的這個 function 裡面)
謝謝大大~再請問一個問題
當我從左區塊移入右區塊的時候
到底是左區塊的onMouseLeave先觸發還是右區塊的onMouseEnter先觸發
因為仔細想了一下順序
(左區塊移入→移到右區塊→移出右區塊)

f f  (初始)                 f f (初始)
t f  (左 mouseEnter)        t f (左 mouseEnter)
f f  (左 mouseLeave)   ★   t t (右 mouseEnter)
f t  (右 mouseEnter)        f t (左 mouseLeave)
f f  (右 mouseLeave)        f f (右 mouseLeave)

因為★處好像會影響state不同的狀態(雖然最後結果一樣)
然後發現最早問題裡的render狀態
mouseEnter跟mouseLeave會有一處沒render的那個部分
恰好是這個瞬間
那不就好在沒render，所以最後結果是相同
還是說那個瞬間因為是非同步執行，所以是同時發生的
※ 編輯: ctah (122.116.84.179 臺灣), 10/29/2019 09:36:00
※ 編輯: ctah (122.116.84.179 臺灣), 10/29/2019 09:41:57
→ y3k: 用hook會比較穩 https://stackblitz.com/edit/react-v6f1aa
→ Hevak: 那個順序其實不太重要，面對確定會有非同步的情形(例如set
→ Hevak: State)的設計的重點是使用不管順序怎樣都沒差的寫法