setNativeProps

在做一些高频动画效果时由于需要经历JS层的多次重新渲染，会出现滞后卡顿的现象，setNativeProps提供了ElementNode下”简单粗暴”的方法直接修改终端原生组件的样式来优化性能，该方法目前只能修改 style 样式，其余属性暂不支持。P.S. 可能产生的数据同步等逻辑上的副作用需要业务自行解决

React

[范例：SetNativeProps.jsx]

除了element component（如div）外，React 没有直接暴露 ElementNode 给业务使用，可以通过 React.forwardRef 转发，或者使用 Hippy 提供的 UIManagerModule.getElementFromFiberRef 方法（该方法会从当前节点逐个遍历子节点直到找到 ElementNode 元素并返回，有一定性能损耗） 获取第一个 ElementNode，使用 demo 如下：

  1.  class BusinessComponent extends React.Component {
  2.     constructor(props) {
  3.       super(props);
  4.       this.customComRef = null;
  5.     }
  6.     componentDidMount() {
  7.        const customElementDom = UIManagerModule.getElementFromFiberRef(this.customComRef);
  8.        customElementDom.setNativeProps({
  9.          style: { height: 100 }
  10.        })
  11.     }
  12.    render() {
  13.       return <CustomComponent ref={ref => this.customComRef = ref} />
  14.    }
  15.  }

Vue

[范例：demo-set-native-props.vue]

Vue 如果是 HTML 元素，直接通过$refs可以获取到 DOM；如果是自定义组件，可以通过$refs.x.$el 获取，setNativeProps使用方法和 React 一致