道具

用于在子组件中传递数据的道具 道具在组件(子组件)外部更改值

状态

在类组件中使用状态 状态更改组件内的值 如果呈现页面，则调用setState来更新DOM(更新页面) 值)

状态在反应中起着重要的作用

你可以通过将它与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

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

状态:

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

道具:

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

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

我想用一种简单的方式向你解释状态和道具:

状态

我们使用状态来存储一些数据。它也像一个变量，当你改变它时，你的组件将再次呈现。

要使用状态，你需要导入useState钩子:

import { useState } from 'react';
const [state_name,function_name] = useState(initial_value);

您可以通过state_name访问您的状态，也可以通过function_name更改它并为其设置一个新值。

更多信息:https://reactjs.org/docs/state-and-lifecycle.html

道具

它是一种将数据从一个组件发送到另一个组件的机制。它看起来也像CSS中的属性。例如:

<Component props_value={custom_function} />

你可以发送一个自定义函数到组件，并接收它进行操作。

更多信息:https://reactjs.org/docs/components-and-props.html

在回答最初关于道具不可变的问题时，我们说它们在子组件中是不可变的，但在父组件中是可以改变的。

在react中，我们通常使用模块来分离组件。有时分离的组件需要在它们内部共享数据。如果父组件有一些数据应该在子组件上共享，那么道具是解决方案。我们可以使用从父母到孩子的道具共享数据。Props是不可变的，这意味着您不能更改数据。

另一方面，状态用于跟踪数据中的任何变化。您可以将状态视为数据的存储和可以更新该数据的函数。状态是可变的。您可以在同一组件中使用setState函数更改状态