ReactNative从零开始笔记3-state(状态)与props(属性)

字数 340阅读 87

一、使用环境

  • Mac 电脑 系统10.14.2
  • Xcode9.4
  • react-native-cli版本 2.0.1
  • react-native: 0.57.3
  • webstorm

二、 props(属性)

ReactNative(React)使用两种数据来控制一个组件:props 和 state。

  • props: 一般自定义组件都要用各种参数来描述组件,用于描述组件的参数就是props

  • 访问属性

 定义属性
static propTypes ={
      gif: PropTypes.string,
}
 组件内访问属性  
 this.props.gif

 使用组件访问属性 
 <ChildComponent ref='son' gif={'公瑾水战法'}></ChildComponent>
  • 注意props是在父组件中指定,而且一经指定,在整个组件的生命周期中都不再改变,如果需要改变的数据,请用state

三、 state(状态)

state 属性主要用来存储组件自身需要的数据,是组件自己私有的,我们一般通过修改 state 属性的值来更新数据,React 内部会监听 state 的变化,一旦发生变化就会主动触发组件的 render() 方法来更新 Dom 结构

  • 一般情况下ES6之后初始化state在constructor() 方法

其他资料
ReactNative从零开始笔记1-初始化项目
ReactNative从零开始笔记2-组件的生命周期
ReactNative从零开始笔记3-state(状态)与props(属性)
ReactNative从零开始笔记4-PropTypes使用
ReactNative从零开始笔记5-组件传值(父子组件/兄弟组件)
ReactNative从零开始笔记6-导航页面传值(正传和逆传)

推荐阅读更多精彩内容