主要的区别是状态是组件私有的，只能在组件内部更改，而道具只是静态值和键的子组件，通过父组件传递，不能在子组件内部更改

react中的state和props都用于将数据控制到组件中，通常props由父组件设置并传递给子组件，并且它们在整个组件中都是固定的。对于将要改变的数据，我们必须使用状态。道具是不可变的，而状态是可变的，如果你想改变道具，你可以从父组件做，然后传递给子组件。

“Props”是传递给组件(1)的外部输入，“state”是由组件(2)管理的内部私有数据。

我最喜欢的道具vs状态总结在这里:反应指南向这些家伙致敬。以下是该页面的编辑版本:

道具vs状态

如果一个组件需要在某个时间点改变它的一个属性，这个属性应该是它状态的一部分，否则它应该只是该组件的一个道具。

道具

道具(属性的简称)是组件的配置。它们是从上面接收的，对于接收它们的组件来说是不可变的。组件不能更改它的道具，但它负责将其子组件的道具组合在一起。道具不一定只是数据——回调函数可以作为道具传递进来。

状态

状态是一个数据结构，在组件挂载时以默认值开始。它可能会随着时间发生变化，主要是由于用户事件。

组件在内部管理自己的状态。除了设置一个初始状态外，它没有权利修改它的子进程的状态。您可以将状态概念化为该组件的私有状态。

改变道具和状态

                                                   props   state
    Can get initial value from parent Component?    Yes     Yes
    Can be changed by parent Component?             Yes     No
    Can set default values inside Component?*       Yes     Yes
    Can change inside Component?                    No      Yes
    Can set initial value for child Components?     Yes     Yes
    Can change in child Components?                 Yes     No

注意，从父组件接收到的props和state初始值都会覆盖组件内部定义的默认值。

这个组件应该有状态吗?

状态是可选的。由于状态增加了复杂性并降低了可预测性，因此最好使用没有状态的组件。即使在交互式应用程序中你显然不能没有状态，你也应该避免有太多的状态组件。

组件类型

无状态组件只有道具，没有状态。除了render()函数之外，没有什么事情要做。他们的逻辑围绕着他们得到的道具展开。这使得它们非常容易遵循和测试。

有状态组件包括道具和状态。当您的组件必须保持某种状态时使用这些。这是客户端-服务器通信(XHR、web套接字等)、处理数据和响应用户事件的好地方。这些类型的逻辑应该封装在适量的有状态组件中，而所有的可视化和格式化逻辑应该向下移动到许多无状态组件中。

来源

关于“props”和“state”的问题-谷歌组 React中的思考:确定你的状态应该在哪里

道具和状态之间的关键区别在于，状态是内部的，由组件本身控制，而道具是外部的，由呈现组件的任何东西控制。

大多数时候，你的子组件是无状态的，这意味着它们代表了它的父组件给它的数据/信息。

另一方面，状态处理的是处理组件本身，状态可以在组件内部通过setState和useState钩子改变。

例如

class Parent extends Component{
  constructor(props){
    super(props);
    this.state = {
      fruit: 'apple'
    }
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(){
    this.setState({fruit: 'mango'})
  }
  render(){
    return (
      <div>
      <Child  fruit={this.state.fruit} />
      <button onClick={this.handleChange}>Change state</button>
      </div>
    )
  }
}

当点击按钮时，父类将其状态从apple更改为mango，并将其状态作为道具传递给子组件。现在，没有状态的子组件根据父组件的状态显示不同的标题。

class Child extends Component{

  render(){
    return(
      <h1>I have received a prop {this.props.fruit}</h1>
    )
  }
}

所以在根级别上，道具是父进程与子进程的通信，而状态是描述父进程的情况等。