状态:

状态是可变的。 状态与单个组件相关联，不能被其他组件使用。 在组件挂载时初始化状态。 状态用于呈现组件内的动态更改。

道具:

道具是不可变的。 您可以在组件之间传递道具。 道具主要用于组件之间的通信。你可以直接从父母传递给孩子。用于从孩子传递给父母 你需要使用提升状态的概念。

类Parent扩展React。组件{ 呈现() { 回报( < div > <孩子的名字= {"ron"}/> . < / div > ）; ｝ ｝ 子类扩展React。组件{ ｛ 呈现(){ 回报( < div > {this.props.name} < / div > ）; ｝ ｝

道具和状态是相关的。一个组件的状态通常会成为子组件的道具。道具在父元素的呈现方法中作为React.createElement()的第二个参数传递给子元素，如果您使用的是JSX，则是更熟悉的标记属性。

<MyChild name={this.state.childsName} />

父类的childsName的状态值变成子类的this.props.name。从子进程的角度来看，名称道具是不可变的。如果它需要改变，父进程只需要改变它的内部状态:

this.setState({ childsName: 'New name' });

React会把它传播给你的子程序。一个自然的后续问题是:如果子程序需要更改其名称道具怎么办?这通常是通过子事件和父回调完成的。子进程可能会公开一个名为onNameChanged的事件。然后父进程通过传递回调处理程序来订阅事件。

<MyChild name={this.state.childsName} onNameChanged={this.handleName} />

子进程将通过调用this.props将其请求的新名称作为参数传递给事件回调。onNameChanged('New name')，父进程将在事件处理程序中使用该名称来更新其状态。

handleName: function(newName) {
   this.setState({ childsName: newName });
}

基本上，区别在于状态类似于OOP中的属性:它是类(组件)的局部属性，用于更好地描述它。道具就像参数一样——它们从组件的调用者(父组件)传递给组件:就像你调用一个带有特定参数的函数一样。

State是你的数据，是可变的，你可以对它做任何你需要的事情，props是只读数据，通常当你传递props时，你已经使用了你的数据，你需要子组件来渲染它，或者如果你的props是一个函数，你调用它来执行任务

简而言之。

道具值不能改变[不可变] 使用setState方法[mutable]可以改变状态值

摘自: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()