React中的Props和State区别

Props和State都是控制页面变化的数据

区别：

Props是组件对外的接口，而State是组件对内的接口

Props用于组件间数据传递，而State用于组件内部的数据传递

1.State

State是私有的，可以认为state是组件的"私有属性"，

1.1.初始化state

构建函数constructor是唯一可以初始化state的地方

// 初始化组件 state
  constructor(props: Props) {
    super(props);
    this.state = {
      isOpen: false,
      count: 0,
    }
  }

1.2.修改State:

一旦离开了constructor，只能用setState() 函数来修改State:

错误：直接修改state，组件不会触发render函数，页面不会渲染

 正确：使用setState()函数修改state

注意：state的更新是异步的

调用setState后，state不会立刻改变，是异步操作，所以不要依赖当前的state，计算下个state。

2.Props

Props是Properties的缩写，组件属性的意思

理解为：从组件外部传入组件内部的数据，因为react数据是单向流动的，所以准确地说，Props是从父组件向子组件传递的数据。

2.1.props是只读属性，Immutable

对象一旦创建就不可改变，只能通过销毁、重建来改变数据

通过判断内存地址的是否一致，来确认对象是否有经过修改

2.2.用法

父组件：

      <div className={styles.robotList}>
        {robots.map((r, index) => (
          <Robot key={index} id={r.id} name={r.name} email={r.email} />
        ))}
      </div>

子组件：

// 创建函数式组件
const Robot: React.FC<RobotProps> = ({id, name, email}) => {
  return (
    <div className= {styles.cardContainer}>
      <img src={`https://robohash.org/${id}`} alt="robot"/>
      <h2>{name}</h2>
      <p>{email}</p>
    </div>
  )
}