RN之 ref和setNativeProps使用

1 ref属性不只是string 

ref属性不仅接受string类型的参数,而且它还接受一个function作为

callback。这一特性让开发者对ref的使用更加灵活。
render() {
    return (c) => this._input = c} />;
  },
  componentDidMount() {
    this._input.focus();
  },
render(){
    return (e) => this._view = e } />//将组件view作为参数赋值给了this._view
}
componentDidMount(){
    this._view.style = { backgroundColor:'red',width:100,height:200 }
}
需要提醒大家的是,只有在组件的render方法被调用时,ref才会被调用,组件才会返回ref。如果你在调用this.refs.xx时render方法还没被调用,那么你得到的是undefined。 

心得:ref属性在开发中使用频率很高,使用它你可以获取到任何你想要获取的组件的对象,有个这个对象你就可以灵活地做很多事情,比如:读写对象的变量,甚至调用对象的函数。

2 让组件做到局部刷新setNativeProps 

有时候我们需要直接改动组件并触发局部的刷新,但不使用state或是props。 
setNativeProps 方法可以理解为web的直接修改dom。使用该方法修改 View 、 Text 等 RN自带的组件 ,则不会触发组件的 componentWillReceiveProps 、 shouldComponentUpdate 、componentWillUpdate 等组件生命周期中的方法。

示例

当点击按钮时,会刷新3个控件的值,但是只是单独去改变,而不是通过改变state状态机的机制来刷新界面,在重复需要多次刷新时使用,普通的时候直接通过state改变即可。 

这样用的缺点就是局部改变,回导致状态机混乱。

3 关于setNativeProps了解更多

示例2

react-native setNativeProps进阶

4 关于ref了解更多

React组件refs详解

React之ref回调函数实现的两种方式


你可能感兴趣的:(ReactNative)