react项目，如何实现页面滚动到某区 域时给该区域加悬浮样式？

Question

在componentDidMount里监听页面滚动，当页面scrolltop大于该区域scrolltop时，setState给区域悬浮style，否则setState去除悬浮style，每滚一次都setState一次，有什么好的解决方法吗？因为涉及state比较多，也不好针对这个写shouldComponentUpdate。一般这种情况会有什么好的方案？

Answer 1

感觉你的疑问是每次做setState会触发React重新做DOM DIFF运算，你觉得可能影响UI响应效率？

如果是这样，几个优化点：

1. 不要监听onScroll，两个替代方案：requestAnimationFrame/setTimeout
2. 每次setState之前做一次脏检查，临界点更替的情况 既 !== 的情况再setState

Answer 2

1.我觉得用setstate不会有啥问题，你频繁setstate之后触发state的更新，然后react去判断要不要更新dom，通过dom diff来判断要更新哪里，你如果只是改了style这个state，那对其他的state没有影响，要更新的也只是涉及style的这块dom，比你原生js去操作dom，只是多了判断是否要更新，还有dom diff两个步骤
2.唯一可能存在的一个问题是setState是异步的，因为有一个队列，所以对滚动的响应可能会有延迟

Answer 3

不就是一个addClass。removeClass操作。没必要弄State吧。

Answer 4

使用setState应该不会有什么问题，react v16之后会自动合并短时间内的多次更新。