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() {
    
  }