作者ctah (藍寶)
看板Web_Design
標題[問題] React中滑鼠移入、移出，state的控制
時間Tue Oct 29 00:06:53 2019
範例如下：
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://webptt.com/m.aspx?n=bbs/Web_Design/M.1572278815.A.5AC.html
1F：→ Hevak: 因為 setState 不是同步的，而且會 batch 在一起 10/29 00:43
4F：→ Hevak: 照文件修好之後像上面這樣，應該是你要的結果，參考看看 10/29 00:48
5F：→ Hevak: 如果你的 setState 會依賴於上一個 state，那就應該改用 10/29 00:48
6F：→ Hevak: this.setState((state,props) => newState) 這種形式去寫 10/29 00:49
7F：→ Hevak: 才可以正常運算，不然會遇到很多先後順序和 batch 的問題 10/29 00:49
8F：→ Hevak: 依賴於上一個 state: 比方說你先取用了 this.state 然後再 10/29 00:49
9F：→ Hevak: 運算再把運算結果丟去 this.setState({}) 10/29 00:50
10F：→ Hevak: 這種寫法就會有問題 10/29 00:50
11F：→ Hevak: 取用上一個 state, props 的東西都應該寫在 this.setState( 10/29 00:51
12F：→ Hevak: (state, props) => 的這個 function 裡面) 10/29 00:51
謝謝大大~再請問一個問題
當我從左區塊移入右區塊的時候
到底是左區塊的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
14F：→ Hevak: 那個順序其實不太重要，面對確定會有非同步的情形(例如set 10/30 05:36
15F：→ Hevak: State)的設計的重點是使用不管順序怎樣都沒差的寫法 10/30 05:36