状态驻留在组件中，作为道具从父组件传递给子组件。 道具通常是不可变的。

class Parent extends React.Component {
    constructor() {
        super();
        this.state = {
            name : "John",
        }
    }
    render() {
        return (
            <Child name={this.state.name}>
        )
    }
}

class Child extends React.Component {
    constructor() {
        super();
    }

    render() {
        return(
            {this.props.name} 
        )
    }
}

在上面的代码中，我们有一个父类(parent)，它的状态是name，它被传递给子组件(子类)作为道具，子组件使用{this.props.name}渲染它。

props (properties的缩写)和state都是简单的JavaScript 对象。而两者都持有影响输出的信息 渲染，他们在一个重要的方面是不同的:道具被传递到 组件(类似于函数参数)，而状态为 在组件中管理(类似于在组件中声明的变量 功能)。

所以简单的状态仅限于你当前的组件，但道具可以传递给任何组件你希望…你可以将当前组件的状态作为道具传递给其他组件……

同样在React中，我们有无状态的组件，它们只有道具，没有内部状态……

下面的例子展示了它们如何在你的应用程序中工作:

父组件(全状态组件):

class SuperClock extends React.Component {

  constructor(props) {
    super(props);
    this.state = {name: "Alireza", date: new Date().toLocaleTimeString()};
  }

  render() {
    return (
      <div>
        <Clock name={this.state.name} date={this.state.date} />
      </div>
    );
  }
}

子组件(无状态组件):

const Clock = ({name}, {date}) => (
    <div>
      <h1>{`Hi ${name}`}.</h1>
      <h2>{`It is ${date}`}.</h2>
    </div>
);

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

function A(props) {
  return <h1>{props.message}</h1>
}

render(<A message=”hello” />,document.getElementById(“root”));

class A extends React.Component{  
  constructor(props) {  
    super(props)  
    this.state={data:"Sample Data"}  
  }  
  render() {
    return(<h2>Class State data: {this.state.data}</h2>)  
  } 
}

render(<A />, document.getElementById("root"));

状态可以改变(可变的) 而道具不能(不可变)

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

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

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