React移动端开发各种大小坑的记录

1.一个简单的需求，入下图，当屏幕向下滚动到tab栏（下图中第二个，正常文档流存在于页面中）时，隐藏的fixed的同样的tab栏会显现（下图中第一个），我的思路和很多人一样判断tab栏的offsetTop_tab和滑动的scrollTop，当scrollTop >= offsetTop_tab时就把隐藏的tab栏显示出来。但是写代码时由于scroll事件触发的频率较多，故我在事件处理程序外就用一个变量接收了第二个offsetTop_tab，以免每次取时都触发重绘重排。我在测试环境下测试没有问题，但是一丢到正式环境就发现出问题了，offsetTop_tab这个值不对（偏小），导致隐藏的会提前显示出来。

产生原因：经过分析在react的componentDidMount生命周期函数中，页面的结构并未完全的解析渲染（你可以理解为数据没返回来的空壳这个DOM结构以及样式并未成型），所以我一进这个生命周期就抓取offsetTop_tab的值并不准确。

ps：之前用vue开发也遇到过类似的问题，在父组件中通过this.$children[index]来抓取父组件中的各个子组件，通常情况下我们可能认为父组件中页面结构从上到下的子组件的index依次是0,1,2......，但是实际情况并不一定能够就是这样的，index的顺序是根据这个子组件渲染的先后顺序决定的，比如father组件里面有三个子组件结构上从上到下依次是ChildOne、ChildTwo、ChildThree，若实际渲染的先后顺序ChildThree--->ChildOne--->ChildTwo,那么他们的index分别为ChildOne：1，ChildTwo:2，ChildThree:0

bug图

解决方式：将取tab栏offsetTop的代码移动到设定data让数据渲染到页面上后（setDate的回调里面），此时的DOM结构已稳定。

2. 在某些机型上尺寸会和你计算的尺寸相差1~2个像素，所以当你发现某个机型上你计算的尺寸要触发的事件没有触发，那么尝试着试试添加或减少2个像素debug试试看。

3.在iOS webview上，当你引入的某个脚本页面没找到的话，那么这个页面可能会直接不会显示，同样的safari浏览器也是一样。若你取的某个变量没有值（通常我们会认为是undefined，但是在苹果的浏览器上会报错）也会报错。

4.在使用vue的时候，Mounted生命周期中只是渲染了页面结构，数据并未填充进去（除非你设置了默认数据），此时你取某个div的高或者scrolltop等并非是你想像的数据，可能是0。例如我在localstorage中存储了用户返回操作需要返回到之前浏览这个页面的高度，可能一开始你在moubted里面直接设置scrollTop并不合适（不起作用),此时你可以尝试着加个定时器来延迟执行。