理解React Native的Props和State

时间:2022-03-02 11:25:13

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()做处理。