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

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

另一方面，状态处理的是处理组件本身，状态可以在组件内部通过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>
    )
  }
}

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

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 props和state之间的主要区别是props是不可变的，一旦组件接收到一个props，它就不能改变它的值，而在另一方面，React state是可变的，组件可以根据需要的时间自由改变它的值。

你可以通过将它与Plain联系起来来更好地理解它 JS函数。

简单地说,

State是组件的本地状态，不能在组件外部访问和修改。它相当于函数中的局部变量。

普通JS函数

const DummyFunction = () => {
  let name = 'Manoj';
  console.log(`Hey ${name}`)
}

反应组件

class DummyComponent extends React.Component {
  state = {
    name: 'Manoj'
  }
  render() {
    return <div>Hello {this.state.name}</div>;
  }

另一方面，通过赋予组件以道具形式从父组件接收数据的能力，道具可以使组件可重用。它们等价于函数参数。

普通JS函数

const DummyFunction = (name) => {
  console.log(`Hey ${name}`)
}

// when using the function
DummyFunction('Manoj');
DummyFunction('Ajay');

反应组件

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

}

// when using the component
<DummyComponent name="Manoj" />
<DummyComponent name="Ajay" />

工作人员:Manoj Singh Negi

文章链接:解释了反应状态与道具

用户在应用程序的某个地方输入了一些数据。

在其中输入数据的组件应该在其状态中拥有该数据，因为它需要在数据输入期间操作和更改它 在应用程序的其他任何地方，数据都应该作为道具传递给所有其他组件

所以，是的，道具是在变化的，但它们是从“源头”改变的，然后简单地从那里向下流动。所以道具在接收它们的组件的上下文中是不可变的。

例如，在一个参考数据屏幕上，用户编辑一个供应商列表将在状态下管理它，然后会有一个操作，导致更新的数据保存在ReferenceDataState中，它可能比AppState低一级，然后这个供应商列表将作为道具传递给所有需要使用它的组件。