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事件