【React】State和Props

State与Props

1、props是组件对外的接口, 而state是组件对内的接口
2、props用于组件间的数据传递, 而state用于组件内部的数据传递
3、state是私有的，可以认为state是组件的“私有属性”
4、用 setState() 修改 State

用 setState() 修改State

onClick = {() => {
   this.setState( {isOpen: !this.state.isOpen} )
}}

初始化

// 生命周期第一阶段：初始化
// 初始化组件 state
constructor(props) {
  super(props);
  this.state = {
    robotGallery: [],
    count: 0
  }
}

Props

• 本质上, props就是传入函数的参数，是从传入组件内部的数据。更准确地说，是从父组件传递向子组件的数据。
• 父组件：

<Robot id={id} email={email} name={name}/>

• 子组件

const Robot: React.FC<RobotProps> = ({id, name, email}) => {
  return(<div></div>)
}

Immutable(不变的）

• 对象一旦创建就不可改变，只能通过销毁、重建来改变数据
• 通过判断内存地址是否一致，来确认对象是否经过修改
• Immutable JS, Redux, Observable(RxJS)
• props是只读属性的
• 函数式编程