State是react中的一个特殊变量，用于在组件更新时重新渲染组件

状态对于组件本身是私有的。也就是说，它不能在组件外部被访问或修改。setState/用于更新状态的钩子。每当状态更新时，组件重新呈现

状态是可变的

道具是组件的输入，并使用道具数据呈现内容

道具是不可变的(Object。冻结= true)

Props: Props只是组件的属性，react组件只是一个javascript函数。

  class Welcome extends React.Component {
    render() {
      return <h1>Hello {this.props.name}</h1>;
    }
  }

Const元素=;

这里<Welcome name="Sara" />传递一个对象{name: 'Sara'}作为Welcome组件的道具。为了将数据从一个父组件传递给子组件，我们使用props。 道具是不可变的。在组件的生命周期中，道具不应该改变(认为它们是不可变的)。

状态:状态只能在组件中访问。为了跟踪组件中的数据，我们使用状态。我们可以通过setState来改变状态。如果我们需要将state传递给child，我们必须将它作为props传递。

class Button extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }

  updateCount() {
    this.setState((prevState, props) => {
      return { count: prevState.count + 1 }
    });
  }

  render() {
    return (<button
              onClick={() => this.updateCount()}
            >
              Clicked {this.state.count} times
            </button>);
  }
}

简单地说:

状态由组件自己管理。它是可重用的、组件私有的、可修改的。 道具从父母传递给孩子。它是一个单向流，子组件是只读的。父组件的状态可以作为道具传递给子组件。

道具和状态是相关的。一个组件的状态通常会成为子组件的道具。道具在父元素的呈现方法中作为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 });
}

亲子交流，只需传递道具即可。

使用state在控制器视图中存储当前页面所需的数据。

使用道具将数据和事件处理程序传递给你的子组件。

这些列表应该有助于指导您在组件中处理数据。

道具

是不可变的 它可以让React进行快速参考检查 用于从视图控制器向下传递数据 顶级组件 有更好的表现 使用它将数据传递给子组件

状态

是否应该在视图控制器中进行管理 顶级组件 是可变的 表现更差 不应该从子组件访问 用道具把它传下去

For communication between two components that don't have a parent-child relationship, you can set up your own global event system. Subscribe to events in componentDidMount(), unsubscribe in componentWillUnmount(), and call setState() when you receive an event. Flux pattern is one of the possible ways to arrange this. - https://facebook.github.io/react/tips/communicate-between-components.html What Components Should Have State? Most of your components should simply take some data from props and render it. However, sometimes you need to respond to user input, a server request or the passage of time. For this you use state. Try to keep as many of your components as possible stateless. By doing this you'll isolate the state to its most logical place and minimize redundancy, making it easier to reason about your application. A common pattern is to create several stateless components that just render data, and have a stateful component above them in the hierarchy that passes its state to its children via props. The stateful component encapsulates all of the interaction logic, while the stateless components take care of rendering data in a declarative way. - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-components-should-have-state What Should Go in State? State should contain data that a component's event handlers may change to trigger a UI update. In real apps this data tends to be very small and JSON-serializable. When building a stateful component, think about the minimal possible representation of its state, and only store those properties in this.state. Inside of render() simply compute any other information you need based on this state. You'll find that thinking about and writing applications in this way tends to lead to the most correct application, since adding redundant or computed values to state means that you need to explicitly keep them in sync rather than rely on React computing them for you. - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-should-go-in-state

简单的解释是: STATE是组件的局部状态，例如color = "blue"或animation=true等。用这个。setState更改组件的状态。 PROPS是组件如何相互通信(将数据从父组件发送给子组件)以及如何使组件可重用。