RN组件样式的更新变化

通过setState控制组件的更新和变化

ReactNative内部分别使用了props、state来区分组件的属性和状态。
props用来定义组件外部传进来的属性,属于那种经过外部定义之后,组件内部就无法改变。
而state维持组件内部的状态更新和变化,组件渲染出来后响应用户的一些操作,更新组件的一些状态。
如果组件内部状态不需要更新,即没有调用过this.setState,全部通过props来渲染也是没问题的,不过这种情况很少见。本文所介绍的内容就是通过props和state的定义,来谈谈ReactNative的受控组件和非受控组件。

非受控组件

即组件的状态改变不受控制。
举例:<TextInput />
在这个最简单的输入框组件里,并没有干涉TextInput中的value展示。即用户通过键盘输入的内容都会展示在上面,但是不能从其他地方改变其内容。

受控组件

既然通过设置input的value属性,无法改变输入框值,那么我们把它和state结合在一起,再绑定onChange事件,实时更新value值就行了。

constructor(props) {  
  super(props);  
  this.state = {  
    value: "",  
  }  
}  
  
handleChange(e) {  
  this.setState({  
    value: e.nativeEvent.text  
  })  
}  
  
render() {  
  return (  
    <TextInput  
      style={styles.style_user_input}  
      value={this.state.value}  
      onChange={e => this.handleChange(e)}  
    />  
  );  
}  

这就是最简单的受控组件模型。我们可以通过在onChange的回调里控制input要显示的值,给value赋予this.state.value,通过setState对state的value进行更新,这时会触发render刷新页面,就会执行到value={this.state.value},TextInput中的内容就得到了更新。

组件生命周期

  componentDidMount() {
    
  }

  componentWillUnmount() {
    
  }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容