作者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/cn.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