理解React Native的Props和State

Props和State是React Native分别用来控制组件中两种不同类型的数据。

Props

props是Properties的简写，称为属性。props的特点是在组件内它是不可变，或者说不能被修改。在React数据流是单向的，从父组件到子组件的方向传递。props就是组件从父组件接收的数据，在组件内部是不能对它修改。

props不可变的特性是有助于我们写可复用的组件。我们只需要对一个组件在不同的地方传递不同的props，它们之间是不会相互干扰。

示例：

// Parent 
export default class ScreenOne extends React.Component {
  render () {
    return (
     <View>
         <Heading message={'欢迎，欢迎，热烈欢迎！！！'}/>
     </View>
    )
  }
}

// Child
export default class Heading extends React.Component {
  render () {
    return (
      <View>
        <Text>{this.props.message}</Text>
      </View>
    )
  }
}
Heading.propTypes = {
  message: PropTypes.string
}
Heading.defaultProps = {
  message: '标题示例'
}

Heading组件定义了属性message，Heading.defaultProps设置message默认值为“标题示例”。在组件ScreanOne上调用了Heading组件，给它传递了属性message。

State

State称为状态，props是由父组件传递给组件的，而state则是属于组件内部，它是可变的，即在组件内部可以对状态做修改。React是用它来追踪组件内部信息。

使用state时，不要直接更新this.state，建议使用setState()。setState()默认会重新渲染组件以及它的子组件。

示例：

class Form extends React.Component {

  constructor (props) {
     super(props)
     this.state = {
       input: ''
     }
  }

handleChangeInput = (text) => {
    this.setState({ input: text })
  }

  render () {
    const { input } = this.state

    return (
       <View>
          <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}}
            onChangeText={this.handleChangeInput}
            value={input}
          />
        </View>
      )
    }
 }

示例里使用TextInput组件，对它的值做监控，如果输入的值被修改了，触发onChangeText时间，然后调用setState修改组件的input值。setState会默认重新渲染组件以及它的子组件，如果不想重新渲染组件，可以在shouldComponentUpdate()做处理。