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

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

父级的状态值childsName变成子级的this.props.name。从子级的角度来看，名称prop是不可变的。如果需要更改，父级应该更改其内部状态：

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

一个自然的后续问题是：如果子级需要更改其名称prop怎么办？这通常通过子事件和父回调来完成。子级可能公开一个名为的事件，例如onNameChanged。然后父级将通过传递回调处理程序订阅事件。

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

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

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

对于亲子沟通，只需传递道具即可。

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

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

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

道具

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

国家

• 应该在你的视图控制器中管理
  • 您的顶级组件
• 是可变的
• 表现更差
• 不应该从子组件访问
  • 用道具代替传下去

用于两个组件之间的通信，这些组件没有 亲子关系，可以设置自己的全局活动 订阅组件中的事件，取消订阅组件中的事件 组件WillUnMount（），并在收到事件时调用setState（）。 通量模式是安排这种情况的可能方法之一。 -https://facebook.github.io/react/tips/communicate-between-components.html

哪些组件应该具有状态？

您的大多数组件应该简单地从props获取一些数据 渲染它。但是，有时您需要响应用户输入，a 服务器请求或时间流逝。为此，您使用状态。

尽量保留尽可能多的组件无国籍。通过这样做 这将把状态隔离到最合理的位置并最小化 冗余，使您的应用程序更容易推理。

一个常见的模式是创建几个无国籍组件，它们只是 呈现数据，并在层次结构中它们之上有一个有状态的组件 通过道具将状态传递给孩子。有状态的 组件封装了所有交互逻辑，而 无状态组件以声明性方式处理呈现数据。 -https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-components-should-have-state

国家应该做什么？

状态应包含组件的事件处理程序可能更改的数据 触发UI更新。在实际应用程序中，此数据往往非常小 和JSON可序列化。构建有状态组件时，请考虑 它的状态的最小可能表示，并且只存储那些 属性在this.state.内部的渲染（）简单地计算任何其他 你需要的信息基于这个状态。你会发现思考 以这种方式了解和编写应用程序往往会导致最 正确的应用程序，因为将冗余或计算值添加到 状态意味着您需要显式地保持它们同步，而不是 依靠React为你计算它们。 -https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-should-go-in-state

基本上，props和state是组件知道该渲染什么和如何渲染的两种方式。应用程序状态的哪一部分属于state，哪一部分属于一些顶级存储，与你的应用设计更相关，而不是React的工作方式。在我看来，最简单的决定方法是思考，这一特定数据片段是否对整个应用程序有用，还是它是一些本地信息。此外，重要的是不要重复state，所以如果某段数据可以从props计算——它应该从props计算。

例如，假设您有一些下拉控件（它包装了标准超文本标记语言选择的自定义样式），它可以a）从列表中选择一些值，b）打开或关闭（即显示或隐藏选项列表）。 现在，假设你的应用显示了一个某种项的列表，并且你的下拉控件过滤列表条目。然后，最好将活动过滤器值作为道具传递，并保持打开/关闭状态在本地。此外，为了使其正常工作，你将从父组件传递一个onChange处理程序，该处理程序将在dropdown元素内调用，并立即将更新的信息（新选择的过滤器）发送到商店。另一方面，打开/关闭状态可以保留在dropdown组件内，因为应用程序的其余部分并不真正关心控件是否打开，直到用户实际更改它的值。

以下代码不完全工作，它需要css和处理下拉单击/模糊/更改事件，但我想保持示例最小。希望它有助于理解差异。

const _store = {
items: [
{ id: 1, label: 'One' },
{ id: 2, label: 'Two' },
{ id: 3, label: 'Three', new: true },
{ id: 4, label: 'Four', new: true },
{ id: 5, label: 'Five', important: true },
{ id: 6, label: 'Six' },
{ id: 7, label: 'Seven', important: true },
],
activeFilter: 'important',
possibleFilters: [
{ key: 'all', label: 'All' },
{ key: 'new', label: 'New' },
{ key: 'important', label: 'Important' }
]
}


function getFilteredItems(items, filter) {
switch (filter) {
case 'all':
return items;


case 'new':
return items.filter(function(item) { return Boolean(item.new); });


case 'important':
return items.filter(function(item) { return Boolean(item.important); });


default:
return items;
}
}


const App = React.createClass({
render: function() {
return (
<div>
My list:


<ItemList   items={this.props.listItems} />
<div>
<Dropdown
onFilterChange={function(e) {
_store.activeFilter = e.currentTarget.value;
console.log(_store); // in real life, some action would be dispatched here
}}
filterOptions={this.props.filterOptions}
value={this.props.activeFilter}
/>
</div>
</div>
);
}
});


const ItemList = React.createClass({
render: function() {
return (
<div>
{this.props.items.map(function(item) {
return <div key={item.id}>{item.id}: {item.label}</div>;
})}
</div>
);
}
});


const Dropdown = React.createClass({
getInitialState: function() {
return {
isOpen: false
};
},


render: function() {
return (
<div>
<select
className="hidden-select"
onChange={this.props.onFilterChange}
value={this.props.value}>
{this.props.filterOptions.map(function(option) {
return <option value={option.key} key={option.key}>{option.label}</option>
})}
</select>


<div className={'custom-select' + (this.state.isOpen ? ' open' : '')} onClick={this.onClick}>
<div className="selected-value">{this.props.activeFilter}</div>
{this.props.filterOptions.map(function(option) {
return <div data-value={option.key} key={option.key}>{option.label}</div>
})}
</div>
</div>
);
},


onClick: function(e) {
this.setState({
isOpen: !this.state.isOpen
});
}
});


ReactDOM.render(
<App
listItems={getFilteredItems(_store.items, _store.activeFilter)}
filterOptions={_store.possibleFilters}
activeFilter={_store.activeFilter}
/>,
document.getElementById('root')
);

我最喜欢的道具与状态摘要在这里：反应引导给那些家伙的大帽子提示。以下是该页面的编辑版本：

道具vs状态

tl； dr如果某个组件需要在某个时间点更改其属性之一，则该属性应该是其状态的一部分，否则它应该只是该组件的道具。

道具

道具（属性的缩写）是组件的配置。它们从上面接收，并且就接收它们的组件而言是不可变的。组件不能更改其道具，但它负责将其子组件的道具放在一起。道具不必只是数据-回调函数可以作为道具传入。

州

状态是一种数据结构，在组件挂载时以默认值开头。它可能会随着时间的推移而变化，主要是用户事件的结果。

组件在内部管理自己的状态。除了设置初始状态外，它没有摆弄其子级状态的业务。你可以将状态概念化为该组件的私有状态。

改变道具和状态

props   state
Can get initial value from parent Component?    Yes     Yes
Can be changed by parent Component?             Yes     No
Can set default values inside Component?*       Yes     Yes
Can change inside Component?                    No      Yes
Can set initial value for child Components?     Yes     Yes
Can change in child Components?                 Yes     No

• 请注意，从父级接收的props和state初始值都会覆盖在Component中定义的默认值。

这个组件应该有状态吗？

状态是可选的。由于状态会增加复杂性并降低可预测性，因此没有状态的组件更可取。即使你显然不能在交互式应用程序中没有状态，你应该避免拥有太多有状态组件。

组件类型

无状态组件只有道具，没有状态。除了渲染（）函数之外没有太多功能。它们的逻辑围绕着它们收到的道具。这使得它们非常容易跟踪和测试。

有状态组件道具和状态。当你的组件必须保留一些状态时使用它们。这是客户端-服务器通信（XHR、Web套接字等）、处理数据和响应用户事件的好地方。这种物流应该封装在适度数量的有状态组件中，而所有的可视化和格式化逻辑应该向下游移动到许多无状态组件中。

来源

• 关于“道具”和“状态”的问题-Google群组

在回答关于道具不可变的最初问题时，它们被称为不可变就子组件而言，但在父级中是可变的。

状态是反应处理组件所持有的信息的方式。

假设您有一个需要从服务器获取一些数据的组件。您通常希望通知用户请求是否正在处理，是否失败等。这是一条与特定组件相关的信息。这是状态进入游戏的地方。

通常定义状态的最佳方法如下：

class MyComponent extends React.Component {
constructor() {
super();
this.state = { key1: value1, key2: value2 }
}
}

但是在React Native的最新实现中，你可以这样做：

class MyComponent extends React.Component {
state = { key1: value1, key2: value2 }
}

这两个示例以完全相同的方式执行，这只是语法改进。

那么，与我们在OO编程中一直使用的对象属性有什么不同呢？通常，您的状态中保存的信息并不意味着是静态的，它会随着时间的推移而变化，您的View需要更新以反映这些变化。State以一种简单的方式提供了这个功能。

国家是不可替代的！这一点我怎么强调都不为过。这意味着什么？这意味着你永远不应该做这样的事情。

 state.key2 = newValue;

正确的做法是：

this.setState({ key2: newValue });

使用this.set状态，您的组件将运行整个更新周期，如果状态的任何部分发生变化，您的组件呈现方法将再次调用以反映此更改。

查看反应文档以获取更扩展的解释： https://facebook.github.io/react/docs/state-and-lifecycle.html

一般来说，一个组件（父组件）的状态是子组件的支持。

1. 状态驻留在一个组件中，当props从父级传递到 孩子。

2. Props通常是不可变的。

   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}
   )
   }
   }
   

In the above code, we have a parent class(Parent) which has name as its state which is passed to the child component(Child class) as a prop and the child component renders it using {this.props.name}

州-它是一个特殊的可变属性，用于保存组件数据。当Componet挂载时，它具有默认值。

道具-它是一个特殊的属性，本质上是不可变的，用于从父级到子级的值传递。道具只是组件之间的通信通道，总是从顶部（父级）移动到按钮（子级）。

下面是组合状态和道具的完整示例：-

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>state&props example</title>


<script src="https://unpkg.com/react@0.14.8/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@0.14.8/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>


</head>
<body>
<div id="root"></div>
<script type="text/babel">


var TodoList = React.createClass({
render(){
return <div className='tacos-list'>
{
this.props.list.map( ( todo, index ) => {
return <p key={ `taco-${ index }` }>{ todo }</p>;
})}
</div>;
}
});


var Todo = React.createClass({
getInitialState(){
return {
list : [ 'Banana', 'Apple', 'Beans' ]
}
},
handleReverse(){
this.setState({list : this.state.list.reverse()});
},
render(){
return <div className='parent-component'>
<h3 onClick={this.handleReverse}>List of todo:</h3>
<TodoList list={ this.state.list }  />
</div>;
}
});


ReactDOM.render(
<Todo/>,
document.getElementById('root')
);


</script>
</body>
</html>

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

React组件使用状态来读取/写入可以更改/突变的内部变量，例如：

this.setState({name: 'Lila'})

React props是一个特殊的对象，它允许程序员将变量和方法从父组件获取到子组件。

它有点像房子的窗户和门。道具也是不可变的，子组件不能更改/更新它们。

当父组件更改道具时，有几种方法可以帮助收听。

这是我目前对于状态与道具之间的解释的观点

1. 状态就像组件中的局部变量。您可以操作 通过使用set state来获取state的值。然后您可以传递state的值 例如，您的子组件。

2. Props是准确位于Redux商店内的值，这实际上 来自起源于减速器的状态。你的组件 应该连接到redux以从props获取值。您也可以通过 子组件的props值

道具只是属性的简写。道具是组件相互通信的方式。如果你对React很熟悉，那么你应该知道道具从父组件向下流动。

还有一种情况是，您可以拥有默认的props，以便即使父组件没有向下传递props，也可以设置props。

这就是为什么人们将React称为具有单向数据流的原因。这需要一点时间来理解，我可能会在稍后的博客中对此进行讨论，但现在请记住：数据流从父级到子级。道具是不可变的（它不会改变的花哨词）

所以我们很高兴。组件从父级接收数据。所有排序，对吧？

嗯，不完全是。当组件从父组件以外的人那里接收数据时会发生什么？如果用户直接向组件输入数据怎么办？

这就是为什么我们有国家。

国家

道具不应该改变，所以状态会增加。通常组件没有状态，所以被称为无状态。使用状态的组件被称为有状态的。随意在派对上放弃这个小花絮，看着人们逐渐远离你。

所以使用state是为了让组件可以跟踪它所做的任何渲染之间的信息。当你设置State时，它会更新state对象，然后重新渲染组件。这非常酷，因为这意味着React会处理繁重的工作并且速度非常快。

作为一个状态的小例子，这是一个搜索栏的片段（如果你想了解更多关于React的知识，值得看看这门课程）

Class SearchBar extends Component {
constructor(props) {
super(props);
this.state = { term: '' };
}
render() {
return (
<div className="search-bar">
<input
value={this.state.term}
onChange={event => this.onInputChange(event.target.value)} />
</div>
);
}
onInputChange(term) {
this.setState({term});
this.props.onSearchTermChange(term);
}
}

摘要

Props和State做类似的事情，但使用方式不同。您的大多数组件可能是无状态的。

道具用于将数据从父级传递给子级或由组件本身传递。它们是不可变的，因此不会更改。

State用于可变数据或将更改的数据。这对用户输入特别有用。例如，考虑搜索栏。用户将输入数据，这将更新他们看到的内容。

基本上，区别在于状态类似于OOP中的属性：它是类（组件）的当地，用于更好地描述它。道具就像参数-它们是来自组件调用者（父级）的组件的通过：就好像你用某些参数调用了一个函数。

道具（“属性”的缩写）和州都是纯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>
);

你最好把它和平原联系起来 js函数。

简单地说，

国家是组件的局部状态，不能在组件之外访问和修改。它等价于函数中的局部变量。

纯JS函数

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

React组件

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');

React组件

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

文章链接：React State vs Props解释

道具：道具只不过是组件的属性，而反应组件只不过是一个JavaScript函数。

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

const元素

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

状态：状态只能在组件中访问。为了跟踪组件中的数据，我们使用状态。我们可以通过setState更改状态。如果我们需要将状态传递给孩子，我们必须将其作为道具传递。

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>);
}
}

国家：

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

道具：

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

class Parent extends React.Component{
render()
{
return(
<div>
<Child name = {"ron"}/>
</div>
);
}
}


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

简而言之。

道具值不能改变[不可变]

可以使用setState方法[可变]更改状态值

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

1. 正在输入数据的组件应该将此数据置于其状态，因为它需要在数据输入期间对其进行操作和更改

2. 在应用程序中的任何其他地方，数据都应该作为props传递给所有其他组件

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

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

道具是在渲染时传递给组件的值、对象或数组。这些道具通常是组件内创建UI、设置某些默认功能或用于填充字段所需的值。道具也可以以从父组件传递的函数的形式出现，可以由子组件调用。

状态在组件（子组件或父组件）中进行管理。

这是我找到的一个支持这一点的定义：

简单的解释是： STATE是组件的局部状态，例如颜色=“蓝色”或动画=true等。使用this.set状态更改组件的状态。 PROPS是组件如何相互通信（将数据从父级发送到子级）并使组件可重用。

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

国家是真理的起源，你的数据生活在那里。 你可以说国家通过道具表现出来。

为组件提供道具是保持UI与数据同步的原因。 组件实际上只是一个返回标记的函数。

给定同样的道具（用于显示的数据），它将始终生成相同的标记。

这些道具就像管道，将数据从原点传输到功能组件。

在React中，状态存储数据以及道具。它与后者的区别在于存储的数据可以通过不同的更改进行修改。这些只不过是用平面JavaScript编写的对象，因此它们可以包含数据或代码，代表您要建模的信息。如果您需要更多详细信息，建议您查看这些出版物 在React中使用状态和 在React中使用Props

道具介绍：表示“只读”数据，这些数据是不可变的，并引用父组件的属性。

国家：表示可变数据，最终影响页面上呈现的内容并由组件本身内部管理，并且通常由于用户输入而更改超时。

主要的区别是状态是私有的组件和可以改变内部的组件只有而道具只是静态值和键的子组件是通过父组件传递的不能改变内部的子组件

• 道具---你不能改变它的值。
• 国家---您可以在代码中更改其值，但当渲染发生时它将处于活动状态。

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

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"));

• 状态可以改变（可变）
• 而Props不能（不可变）

“状态”和“道具”在反应中的一些差异。

反应控制和渲染基于状态的DOM。有两种类型的组件状态：道具是组件之间传输的状态，状态是组件的内部状态。道具用于从父组件到子组件的数据搬迁。组件内部也有自己的状态：只能在组件内部修改的状态。

一般某个组件的状态可能是子组件的props，props会传递给子组件，这在父组件的渲染方法里面写明

React组件使用状态来读取/写入可以更改/突变的内部变量，例如：

this.setState({name: 'Lila'})

React props是一个特殊的对象，它允许程序员将变量和方法从父组件获取到子组件。

它有点像房子的窗户和门。道具也是不可变的，子组件不能更改/更新它们。

当父组件更改道具时，有几种方法可以帮助收听。

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

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}
)
}
}

在上面的代码中，我们有一个父类（父），它的状态是name，它作为一个prop传递给子组件（子类），子组件使用{this.props.name}来呈现它。

来自：Andrea Chiarelli的书“开始React：简化前端开发工作流程并使用React增强应用程序的用户体验”：

每个React组件都有一个道具属性。该属性的目的是收集传递给组件本身的数据输入。JSX属性附加到一个React元素，一个同名的属性附加到道具对象。因此，我们可以使用附加属性访问传递的数据。此外，道具的不变性允许我们将组件视为纯函数，它们是没有副作用的函数（因为它们不会更改输入数据）。我们可以将数据从一个组件传递到另一个组件视为单向数据流，从父组件流向子组件。这给了我们一个更可控的系统。

React提供了一种机制来支持在数据发生变化时自动渲染组件。这样的机制基于州的概念。React州是一个表示随时间变化的数据的属性。每个组件都支持州属性，但应谨慎使用。存储可随时间变化的数据的组件被称为有状态组件。一个有状态分量将州存储在this.state属性中。要通知组件状态发生了变化，必须使用设置状态方法。国家初始化是唯一可以在不使用设置状态的情况下为this.state属性赋值的情况。

设置状态将新数据与状态中已经包含的旧数据合并，并覆盖上一个状态 setState（）触发渲染函数方法的执行，因此您永远不应该显式调用渲染函数

正如我在与React合作时所学到的。

• 组件使用props从外部环境获取数据，即另一个组件（纯组件，函数组件或类组件）或一个通用类或javascript/typeScript代码

• 用于管理组件内部环境的状态，是指组件内部的数据变化

道具

• props用于在子组件中传递数据

• props更改组件（子组件）外部的值

国家

• 状态在类组件中使用

• 状态更改组件内部的值

• 如果渲染页面，则调用setState来更新DOM（更新页面 value）

国家在应对中发挥重要作用

主要区别在于状态只能在组件内部处理，而道具只能在组件外部处理。如果我们从外部获取数据并进行处理，在这种情况下，我们应该使用状态。

props和state在某种程度上是相同的，它们都会触发重新渲染。不同的是props来自父组件，状态在当前组件中进行管理。所以状态是可变的，props是不可变的

• props是JavaScript对象，传递到一个组件中，该组件包含配置属性。
• Props对于接收组件是不可变的
• state是JavaScript对象，在组件中管理，保存其内部状态。
• 更新以触发重新渲染

简单地说：

• 状态由组件自行管理。它是可重用的、组件私有的和可修改的。

• 道具从父组件传递给子组件。它是一个单向流，子组件只读。父组件的状态可以作为道具传递给子组件。

React道具用于向子组件发送信息，大多数时候，您的子组件是无状态的，这意味着它们代表其父组件提供给它的数据/信息，

另一方面，该州处理组件本身，状态可以在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是与其子级通信的父级，而状态是描述父级情况等。

州：是内部有价值的，这意味着只在该类组件中有效，因此您不能将其传递给另一个组件。

道具：另一方面，您可以将道具从父级传递给子级或从子级传递给父级。

国家

State是React Native中用于跟踪信息的组件的内部。 1.状态是可变的 2.组件内使用（仅限于当前组件） 3.在构造函数中初始化 4.使用“this.set状态”更新对象。 5.可以从父组件获取初始化，但不能从父组件更改 6.可以为子组件设置初始化值，不能在子组件中更改 7.可以在组件内设置默认值，也可以在组件内更改。

8.示例：-组件内的用户交互，如填写表单、复选框、按钮单击 语法

道具

Props是属性的简写形式，可以指可以在组件中动态更改的内容。在这里，组件从父组件接收道具。 1. Props是不可变的 2.用于将数据从父级传递给子级。 3.用于将数据以及回调函数作为道具传递。 4.可以从父组件获取初始化，也可以从父组件更改 5.可以为子组件设置初始化值，可以在子组件中更改 6.可以在组件内部设置默认值，可以在组件内部更改 7.示例：-父组件中使用的子组件。

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

作为对上述评论的补充，给出最简单的解释：

根据React的官方留档，他们将“状态”视为

To “remember” things, components use state.

而props可以理解为从父组件传递给子组件的变量。

如果你想记住应用程序中的某些内容，你会使用state，如果你想传递数据，你会使用props。

让我给你另一个类比，假设你试图在你的脑海中添加前25个自然数的序列。

1+2+3+4.....

您将从1开始，然后将2添加到其中，您现在将是3，然后您将添加到当前总数（现在是6），然后您将在当前总数（6）中添加4，因此新的当前总数是10。

当前的总数是程序的state，假设你需要找到总和的平均值。你将取该总和并将其放入方程中，你将把你的总和作为props传递。

希望这是有道理的。

Reactprops和state之间的主要区别在于props是不可变的，一旦组件收到props，它就不能更改其值，而在另一方面，Reactstate是可变的，组件可以根据需要的时间自由更改其值。

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

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

国家是可变的

道具是使用道具数据的组件和渲染内容的输入

道具是不可变的（Object. Frozen=true）

我们可以改变state值，但我们不能改变props值，或者我们可以说props是不可变的，state是可变的

“道具”是传递给组件（1）的外部输入，“国家”是由组件（2）管理的内部私有数据。

在React中，我们通常使用模块来分隔组件。有时分离的组件需要在其中共享数据。如果父组件有一些数据应该在子组件上共享，那么props是解决方案。我们可以使用来自父组件的props将数据共享给子组件。props是不可变的，这意味着你不能更改数据。

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

在React中，props和state之间有一些关键的区别。props是不可变的——一旦设置好，就不能更改。另一方面，state可以随时更改。props也从父级传递给子级，而state是单个组件的本地。

我想用一种简单的方式向您解释州和道具：

州

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

要使用您需要导入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} />

您可以将自定义函数发送到Component并接收它以进行操作。

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