Question

优化提升渲染性能，不仅能让页面更快的展现、可交互，同时能提升用户操作滚动的流畅度，对提升用户体验至关重要。

避免不必要的更新对比

Rax 同 React 一样，render 时会有 vdom 对比，如果对比发现 DOM 没有变化时，不会去真正更新页面。而本身 vdom 对比也是不小的消耗，你应该避免这种不必要的更新对比，使用 shouldComponentUpdate 方法明确标识你的组件什么时候需要更新，什么时候不需要更新。或者你的组件也可以继承 PureComponent，进行简单的属性浅比较。当然对于大部分业务场景，你的组件在渲染完后并不需要更新，你最好显式的阻止更新。

不要渲染空字符串

在你需要返回或者渲染空组件时，不要使用空字符串。

<View>{name <View>{name}</View> : ''}</View>

在 Rax 中，渲染空字符串，对应 Weex 上会额外渲染一个 View，造成渲染上的浪费。你需要返回 null 来代替。

<View>{name <View>{name}</View> : null}</View>

减少 render 方法的复杂度

在 Rax/React 中，当组件状态更新时，会不断的调用 render 方法，意味着你放在 render 方法的中代码逻辑、函数调用等也是每次都会被执行，如果是跟组件状态无关的函数，建议不要放到 render 方法中。

控制嵌套层级

你需要将页面的 vdom 层级控制在 14 层以下，过大的嵌套层级会导致页面渲染时间加长，严重的会导致低端手机 crash。

在 Weex 的渲染机制下，每一个 Rax View 容器都会对应一个 Native 的 view。每多一层嵌套，Native 都要 create view，会增加主线程渲染时间和内存占用。