【React 进阶】props 和 state 的区别详解

时隔一年半之久再次重新学习 React，好多都还是原来的样子，这次我要重新开启 React 的大门，希望各位小伙伴可以一起讨论学习呦～

前言

今天我们开始第一个专题：React 中 关于 props 和 state。当然我们不是对 props 和 state 基本用法的介绍，而是尝试由浅入深的来解释 props 和 state 的本质和区别，并且归纳使用它们时的注意事项。

我们在开发应用时，必然是要与数据进行频繁交互的。React 的核心思想是组件化的思想，所有的页面会被切分成一些独立的、可复用的组件。
那么数据从何而来呢？React 的数据是自顶向下单向流动的，即从父组件到子组件中，组件的数据存储在 props 和 state 中。

UI = Component(props, state)

props 和 state 本质

props 是组件对外的接口，state 是组件对内的接口。 组件内可以引用其他组件，组件之间的引用形成了一个树状结构（组件树），如果下层组件需要使用上层组件的数据或方法，上层组件就可以通过下层组件的 props 属性进行传递，因此 props 是组件对外的接口。组件除了使用上层组件传递的数据外，自身也可能需要维护管理数据，这就是组件对内的接口 state。根据对外接口 props 和对内接口 state，组件计算出对应界面的UI。

---

props

组件从概念上看其实就是一个函数，它可以接受一个 props 作为输入值，所以可以把 props 理解为从外部传入组件内部的数据。由于 React 是单向数据流，所以 props 基本上也就是从父组件向子组件传递的数据。

1. 基础用法

<Component data="测试props"/>

现有两个组件： 和 。

1. import Item from "./item";
   export default class ItemList extends React.Component{
     render(){
       return (
          <div>
            <Item data="我是props值"/>,
          </div>
       )
     }
   }
   

2. export default class Item extends React.Component{
     render(){
       return (
         <h1>{this.props.data}</h1>
       )
     }
   }
   

在 render 函数中可以看出，组件内部是使用 this.props 来获取传递到该组件的所有数据，它是一个对象，包含了所有你对这个组件的配置，现在只包含了一个 data 属性，所以通过 this.props.data 来获取即可。

这里只是对 props 的用法进行了简单的介绍，更详细、更高级的用法大家可以去官网学习哦～

2. 只读性

props 是组件的只读属性，组件内部不能直接修改 props，要想修改 props，只能在该组件的上层组件中修改。在组件状态上移的场景中，父组件正是通过子组件的 props，传递给子组件其所需要的状态。

props 经常被用作渲染组件和初始化状态，当一个组件被实例化之后，它的 props 是只读的，不可改变的。如果 props 在渲染过程中可以被改变，会导致这个组件显示的形态变得不可预测。只有通过父组件重新渲染的方式才可以把新的 props 传入组件中。

3. 默认参数

在组件使用过程中，我们最好为 props 中的参数设置一个 defaultProps，并且制定它的类型。比如这样：

Item.defaultProps = {
  item: 'Hello Props',
};

Item.propTypes = {
  item: PropTypes.string,
};

关于 propTypes 可以声明的其他类型请详见官网：使用 PropTypes 进行类型检查

---

state

state 的主要作用是用于组件保存、控制以及修改自己的状态，它只能在 constructor 中初始化，它是组件的私有属性，不可通过外部访问和修改，只能通过组件内部的 this.setState 来修改，修改 state 属性会导致组件的重新渲染。

1. 基础用法

在组件初始化的时候，通过 this.state 给组件设定一个初始的 state，在第一次 render 的时候就会用这个数据来渲染组件。

export default class ItemList extends React.Component{
  constructor(){
    super();
    this.state = {
      itemList:'好多数据',
    }
  }
  render(){
    return (
      {this.state.itemList}
    )
  }
}

2. 如何定义 State

我们既然要创建组件，那么就必然需要定义一个能代表一个组件UI呈现的完整状态集，也就是说：组件对应UI的任何改变，都可以从 state 的变化中反映出来；同时，state 还必须是代表一个组件UI呈现的最小状态集，即 state 中的所有状态都是用于反映组件UI的变化，没有任何多余的状态，也不需要通过其他状态计算而来的中间状态。

⚠️ 并不是组件中用到的所有变量都是组件的状态！ 当存在多个组件共同依赖同一个状态时，一般的做法是状态上移，将这个状态放到这几个组件的公共父组件中。

3. 正确修改 State

1）首先，不能直接修改 State

state 不同于 props 的一点是：state 是可以被改变的。不过，不可以直接通过 this.state=xxx 的方式来修改，而需要通过 this.setState() 方法来修改 state。

this.setState({title: 'React'});

⚠️ 通过 this.state=xx来 初始化 state，使用 this.setState 来 修改state，constructor 是唯一能够初始化的地方。

2）setState 可以接收多个参数

• setState 接受一个对象或者函数作为第一个参数，只需要传入需要更新的部分即可，不需要传入整个对象。

  export default class ItemList extends React.Component{
    constructor(){
      super();
      this.state = {
        name: '八了个戒',
        age: 25,
      }
    }
    componentDidMount(){
      this.setState({age: 18})  
    }
  }
  

  在执行完 setState 之后的 state 应该是 {name: '八了个戒', age: 18}。

• setState 还可以接受第二个参数，它是一个函数，会在 setState 调用完成并且组件开始重新渲染时被调用，可以用来监听渲染是否完成。

  this.setState({
    name: '八戒'
  },()=>console.log('setState finished'))
  

3）State 的更新是异步的

调用 setState，组件的 state 并不会立即改变，setState 只是把要修改的状态放入一个队列中，React 会优化真正的执行时机，并且 React 会出于性能原因，可能会将多次 setState 的状态修改合并成一次状态修改。

所以不能依赖当前的 state，计算下个 state。当真正执行状态修改时，依赖的 this.state 并不能保证是最新的 state，因为 React 会把多次 state 的修改合并成一次，这时，this.state 还是等于这几次修改发生前的 state。另外需要注意的是，同样不能依赖当前的 props 计算下个 state，因为 props 的更新也是异步的。

---

总结

props 和 state 都是普通的 JavaScript 对象。它们都是用来保存信息的，这些信息可以控制组件的渲染输出，而它们的几个重要的不同点就是：

1. props 是传递给组件的（类似于函数的形参），而 state 是在组件内被组件自己管理的（类似于在一个函数内声明的变量）。
2. props 是不可修改的，所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。 由于 props 是传入的，并且它们不能更改，因此我们可以将任何仅使用 props 的 React 组件视为 pureComponent（纯组件），也就是说，在相同的输入下，它将始终呈现相同的输出。
3. state 是在组件中创建的，一般在 constructor 中初始化 state
4. state 是多变的、可以修改，每次 setState 都异步更新的。

---

希望以上内容可以帮助到大家。我也是重新开始学习 React，欢迎大家一起讨论学习，最后不要忘记一键三连哦~

各位 加油！

参考内容：

1. react中props和state有什么区别?（https://juejin.cn/post/6844903978061266957）
2. React中state和props分别是什么？（https://segmentfault.com/a/1190000011184076）
3. React 深入系列３：Props 和 State（https://juejin.cn/post/6844903591845724167#heading-1）