rn 动画Android卡顿,rn应用中的卡顿

Native与JavaScript交互原理图

Native与JavaScript交互原理图

卡顿的场景

rn应用界面的渲染是js驱动native完成的。js代码运行在javascript线程中， react-native组件的生命周期、api调用、触摸事件的处理等就是在这个线程上执行的；在复杂应用的root组件中，调用this.setState，触发子组件重新渲染，而这个过程很耗资源，容易引发卡顿。

js->native

路由切换操作：添加一个新的路由，Javascript线程需要读取这个场景所需要的所有组件，然后通过适当的命令发送给本地端，创建视图。这个过程会花费多个帧，引起卡顿。

这是因为transition是由Javascript控制的。由此组件会在componentDidMount中做额外的计算，这可能会导航在transition卡顿的第二个原因.

native->js

响应触摸事件：界面发生的事件是native转发到js的。如果此时js正在执行耗时任务，那么就来不及响应这个事件。例如可能出现点击TouchableOpacity包裹的View时，透明度发生了变化，但js端的响应事件却相对滞后。

卡顿的规避措施

场景一

Slow navigator transitions Navigator动画由Javascript线程控制，转换过程的每一帧，Javascript thread需要将新的x位置发送给主线程。如果javascript 线程被冻结。它就不