RN原生方法setNativeProps

Posted 2020-10-21 HelloHello233

https://facebook.github.io/react-native/docs/direct-manipulation.html

　　setNativeProps可以直接修改底层native组件的属性，不与React相关（state不会跟着同步），其他原生方法还有measure、measureLayout等

　　有时候有必要去直接操作组件而不是通过state或者props来触发整颗组件树的刷新。如浏览器直接修改dom，类比到RN中，可以使用setNativeProps这个方法来直接修改dom

　　当频繁地重新渲染导致性能瓶颈时才使用这个方法，这个方法不应该用太多，仅当需要创建持续的动画时使用。这个方法把状态保存到原生layer中而不是react组件中，这回导致代码更难理解，可以的话尽量使用setState和shouldComponentUpdate来解决。

　　当被按下的时候，TouchableOpacity内部会通过setNativeProps来更新子组件的透明度，子组件不需要关心自己如何改变透明度

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

　　假设setNativeProps不可用，则实现的方式就是就是父组件要频繁调用setState来重新渲染子树，即使子组件没有发生变化。通常来说这不需要担忧，但是当我们要执行持续动画以及响应手势时，精确地优化组件可以提高动画的效果

应用场景1：混合组件

　　setNativeProps（原生方法）只能用在RN的核心组件（被native支持）上，不能用在混合组件上。

class MyButton extends React.Component {
  render() {
    return (
      <View>
        <Text>{this.props.label}</Text>
      </View>
    )
  }
}

export default class App extends React.Component {
  render() {
    return (
      <TouchableOpacity>
        <MyButton label="Press me!" />
      </TouchableOpacity>
    )
  }
}

　　以上代码 运行会报错：“Touchable child must either be native or forward setNativeProps to a native component”。这是因为TouchableOpacity内部会获取自己的子组件，然后调用他们的setNativeProps来改变透明度，而MyButton不是核心组件不支持这个方法。解决办法就是使这个混合组件MyButton支持这个方法，就自己定义一个setNativeProps：

class MyButton extends React.Component {
  setNativeProps = (nativeProps) => {
    this._root.setNativeProps(nativeProps);
  }
  render() {
    return (
      <View ref={component => this._root = component} {...this.props}>
        <Text>{this.props.label}</Text>
      </View>
    )
  }
}

　　可以发现上面有{...this.props}，这是因为需要子组件去处理触摸事件，这handler就要来自于Touchable，相当于调用了父组件的方法。

应用场景2：清空输入

　　对于受控的TextInput，当bufferDelay设置比较小而且用户输入比较快时，可能会丢失字符。所以一些开发者干脆直接使用setNativeProps来TextInput的值。以下清空值

export default class App extends React.Component {
  clearText = () => {
    this._textInput.setNativeProps({text: ‘‘});
  }
  render() {
    return (
      <View style={{flex: 1}}>
        <TextInput
          ref={component => this._textInput = component}
          style={{height: 50, flex: 1, marginHorizontal: 20, borderWidth: 1, borderColor: ‘#ccc‘}}
        />
        <TouchableOpacity onPress={this.clearText}>
          <Text>Clear text</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

　　注意，这原生方法仅仅改变了原生组件上的值，RN中的state并没有发生变化，也不会触发这个TextInput上的onChange事件