在React Native 中，改变组件的布局样式等可以通过props或者state来实现，但由于性能瓶颈，我们不得不放弃通过触发render的方式来改变样式，而是通过setNativeProps来直接更改原生组件的样式属性来达到相同的效果。

这里的setNativeProps方法等价于直接操作DOM节点的方法。使用这种方法修改View、Text等react Native自带的组件，并且不会触发组件的componentWillReceiveProps 、 shouldComponentUpdate、 componentWillUpdate 等组件生命周期中的方法。但它不应该经常被使用，一般建议在不得不频繁刷新而又遇到了性能瓶颈时使用。建议在使用此方法之前优先考虑setState和shouldComponentUpdate方法来解决问题。

setNativeProps 与 TouchableOpacity

TouchableOpacity这个组件就在内部使用了setNativeProps方法来更新其子组件的透明度：

setOpacityTo: function(value) {
  // Redacted: animation related code
  this.refs[CHILD_REF].setNativeProps({
    opacity: value
  });
},

由此我们可以写出下面这样的代码：子组件可以响应点击事件，更改自己的透明度。而子组件自身并不需要处理这件事情，也不需要在实现中做任何修改。

<TouchableOpacity onPress={this._handlePress}>
  <View style={styles.button}>
    <Text>Press me!</Text>
  </View>
</TouchableOpacity>

如果不使用setNativeProps这个方法来实现这一需求，那么一种可能的办法是把透明值保存到state中，然后在onPress事件触发时更新这个值:

getInitialState() {
  return { myButtonOpacity: 1, }
},

render() {
  return (
    <TouchableOpacity onPress={() => this.setState({myButtonOpacity: 0.5})}
                      onPressOut={() => this.setState({myButtonOpacity: 1})}>
      <View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
        <Text>Press me!</Text>
      </View>
    </TouchableOpacity>
  )
}

比起之前的例子，这一做法会消耗大量的计算 —— 每一次透明值变更的时候React都要重新渲染组件结构，即便视图的其他属性和子组件并没有变化。一般来说这一开销也不足为虑，但当执行连续的动画以及响应用户手势的时候，只有正确地优化组件才能提高动画的流畅度。

将setNativeProps传递给子组件

具体要做的就是在我们的自定义组件中再封装一个setNativeProps方法，其内容为对合适的子组件调用真正的setNativeProps方法，并传递要设置的参数。

var MyButton = React.createClass({
  setNativeProps(nativeProps) {
    this._root.setNativeProps(nativeProps);
  },

  render() {
    return (
      <View ref={component => this._root = component} {...this.props}>
        <Text>{this.props.label}</Text>
      </View>
    )
  },
});

这里我们使用了ref回调语法，我们向下传递props时使用了{...this.props}语法，（这一用法的说明请参考对象的扩展运算符），这是因为复合组件除了要求在子组件上执行setNativeProps意外，还要求子组件对触摸事件进行处理，因此会传递多个props.