范例如下：
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)的设计的重点是使用不管顺序怎样都没差的写法