道具和状态在某种程度上是相同的，它们都会触发重渲染。不同之处在于，道具来自于父组件，状态在当前组件中管理。状态是可变的，道具是不可变的

摘自:Andrea Chiarelli的书《开始React:用React简化前端开发工作流，增强应用程序的用户体验》:

Every React component has a props property. The purpose of this property is to collect data input passed to the component itself. JSX attribute is attached to a React element, a property with the same name is attached to the props object. So, we can access the passed data by using the attached property. In addition, the immutability of props allows us to think of components as pure functions, which are functions that have no side effects (since they don't change their input data). We can think of data passing from one component to another as a unidirectional data flow, from the parent component toward the child components. This gives us a more controllable system.

React provides a mechanism to support the automatic rendering of a component when data changes. Such a mechanism is based on the concept of state. React state is a property that represents data that changes over time. Every component supports the state property, but it should be used carefully. Components that store data that can change over time are said to be stateful components. A stateful component stores the state in the this.state property. To inform a component that the state has changed, you must use the setState() method. State initialization is the only case where you can assign a value to the this.state property without using setState().

setState()将新数据与已包含在状态中的旧数据合并，并覆盖先前的状态 setState()会触发render()方法的执行，所以永远不要显式地调用render()

我最喜欢的道具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中的思考:确定你的状态应该在哪里

道具只是属性的简写。道具是组件之间相互交流的方式。如果你熟悉React，那么你应该知道道具是从父组件向下流动的。

还有一种情况是，你可以有默认的道具，这样即使父组件没有传递道具，道具也会被设置。

这就是为什么人们认为React具有单向数据流。这需要一些理解，我可能会在后面的博客中对此进行讨论，但现在只要记住:数据从父流向子。道具是不可变的(是指不变的)

所以我们很高兴。组件从父组件接收数据。都整理好了，对吧?

嗯，不完全是。当组件从父组件以外的对象接收数据时会发生什么?如果用户直接向组件输入数据呢?

这就是我们有状态的原因。

状态

道具不应该改变，所以状态上升。组件通常没有状态，因此被称为无状态。使用状态的组件称为有状态的。在聚会上随便说说你的小秘密，然后看着人们慢慢地离你而去。

所以使用状态是为了让组件可以在它所做的任何渲染之间跟踪信息。当你setState时，它更新状态对象，然后重新渲染组件。这非常酷，因为这意味着React会处理困难的工作，并且速度非常快。

作为状态的一个小例子，这里是一个搜索栏的片段(如果你想了解更多关于React的知识，值得看看这门课程)

Class SearchBar extends Component {
 constructor(props) {
  super(props);
this.state = { term: '' };
 }
render() {
  return (
   <div className="search-bar">
   <input 
   value={this.state.term}
   onChange={event => this.onInputChange(event.target.value)} />
   </div>
   );
 }
onInputChange(term) {
  this.setState({term});
  this.props.onSearchTermChange(term);
 }
}

总结

道具和状态的作用类似，但使用方式不同。大多数组件可能是无状态的。

道具用于将数据从父组件传递给子组件或由组件本身传递。它们是不可变的，因此不会被改变。

State用于可变数据或将更改的数据。这对于用户输入特别有用。以搜索栏为例。用户将输入数据，这将更新他们所看到的内容。

State:具有内部值，这意味着只在该类组件中有效，因此不能将其传递给另一个组件。

道具:另一方面，你可以将道具从父对象传递给子对象或从子对象传递给父对象。

props是JavaScript对象，传递给组件，保存配置属性。 props是接收组件不可更改的 state是在Component中管理的JavaScript对象，保存它的内部状态。 更新可以触发重新渲染