我正在观看关于 React 的 Pluralsight 课程，讲师说不应更改道具。我现在正在阅读关于道具与状态的an article (uberVU/react-guide)，上面写着
道具和状态更改都会触发渲染更新。
文章后面说：
Props（properties 的缩写）是一个组件的配置，如果可以的话，它是它的选项。它们是从上面接收的并且是不可变的。
getInitialState 在 React 组件中设置？【问题讨论】：
标签： javascript reactjs
道具和状态是相关的。一个组件的状态往往会成为子组件的 props。 props 在父级的 render 方法中作为 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 });
}
【讨论】：
对于父子通信，只需传递props即可。
使用 state 将当前页面所需的数据存储在控制器视图中。
使用 props 将数据和事件处理程序向下传递给您的子组件。
这些列表应该有助于指导您处理组件中的数据。
道具
州
用于两个没有 亲子关系，可以设置自己的全局事件 系统。订阅componentDidMount()中的事件，取消订阅 componentWillUnmount()，并在收到事件时调用 setState()。 通量模式是安排这一点的可能方式之一。 - https://facebook.github.io/react/tips/communicate-between-components.html
哪些组件应该有状态？
你的大部分组件应该简单地从 props 和 渲染它。但是，有时您需要响应用户输入，例如 服务器请求或时间的流逝。为此，您使用状态。
尽量保持尽可能多的组件无状态。通过做 这你会将状态隔离到最合乎逻辑的位置并最小化 冗余，更容易推理您的应用程序。
一种常见的模式是创建几个无状态组件 渲染数据，并在层次结构中在它们之上有一个有状态的组件 通过道具将其状态传递给它的孩子。有状态的 组件封装了所有的交互逻辑，而 无状态组件以声明的方式处理数据。 - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-components-should-have-state
状态应该怎样？
状态应包含组件的事件处理程序可能更改的数据 触发 UI 更新。在实际应用中，这些数据往往非常小 和 JSON 可序列化。在构建有状态组件时，请考虑 其状态的最小可能表示，并且只存储那些 this.state 中的属性。在 render() 内部简单地计算任何其他 您需要基于此状态的信息。你会发现这样的想法 以这种方式讨论和编写应用程序往往会导致最 正确的应用程序，因为将冗余或计算值添加到 state 意味着您需要明确地使它们保持同步，而不是 依靠 React 为您计算它们。 - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-should-go-in-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>;
}
Props 让组件能够以 props 的形式从其父组件接收数据，从而使组件可重用。它们等价于函数参数。
普通的 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" />
【讨论】：
我最喜欢的道具与状态摘要在这里：react-guide 给那些家伙的大礼帽。以下是该页面的编辑版本：
tl;dr 如果组件需要在某个时间点更改其属性之一，则该属性应该是其状态的一部分，否则它应该只是该组件的道具。
Props（properties 的缩写）是组件的配置。它们是从上面接收的，并且就接收它们的组件而言是不可变的。一个组件不能改变它的 props，但是它负责把它的子组件的 props 放在一起。道具不必只是数据——回调函数可以作为道具传入。
状态是一个数据结构，在组件挂载时以默认值开始。它可能会随着时间发生变化，主要是由于用户事件。
组件在内部管理自己的状态。除了设置初始状态外，它没有任何事情摆弄其子节点的状态。您可以将状态概念化为该组件的私有状态。
状态是可选的。由于状态增加了复杂性并降低了可预测性，因此最好使用没有状态的组件。尽管您显然不能在交互式应用程序中没有状态，但您应该避免使用过多的有状态组件。
无状态组件只有道具，没有状态。除了 render() 函数之外，没有太多事情发生。他们的逻辑围绕着他们收到的道具。这使得它们很容易理解和测试。
有状态组件 props 和 state。当您的组件必须保留某些状态时使用这些。这是客户端-服务器通信（XHR、Web 套接字等）、处理数据和响应用户事件的好地方。此类物流应封装在适量的有状态组件中，而所有可视化和格式化逻辑都应向下移动到许多无状态组件中。
【讨论】：
props（“properties”的缩写）和 state 都是纯 JavaScript 对象。虽然两者都持有影响输出的信息 渲染，它们在一个重要方面是不同的：道具被传递给 组件（类似于函数参数），而 state 是 在组件内管理（类似于在组件中声明的变量） 函数）。
所以 state 仅限于您当前的组件，但 props 可以传递给您希望的任何组件...您可以传递 state 当前组件作为 prop 到其他组件...
同样在 React 中，我们有 无状态组件，它们只有 props 而没有内部状态...
以下示例展示了它们在您的应用中的工作方式：
父级（状态完整组件）：
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>
);
}
}
Child（无状态组件）：
const Clock = ({name}, {date}) => (
<div>
<h1>{`Hi ${name}`}.</h1>
<h2>{`It is ${date}`}.</h2>
</div>
);
【讨论】：
props 和 state 的主要区别在于 state 是内部的，由组件本身控制，而 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"));
【讨论】：
基本上，区别在于 state 类似于 OOP 中的属性：它是类（组件）的本地，用于更好地描述它。 Props 就像参数一样 - 它们从组件的调用者（父级）传递到组件：就好像你调用了一个具有特定参数的函数。
【讨论】：
react 中的 state 和 props 都是用来控制数据进入组件的，一般 props 由父组件设置并传递给子组件，并在整个组件中固定.对于将要发生变化的数据，我们必须使用状态。而道具是不可变而状态是可变，如果你想改变道具，你可以从父组件做，然后将它传递给子组件。
【讨论】：
正如我在使用 react 时学到的。
props 被组件用于从外部环境获取数据，即另一个组件（纯、函数或类）或通用类或javascript/typescript代码
状态用于管理组件的内部环境表示组件内部的数据变化强>
【讨论】：
状态：
道具：
class Parent extends React.Component{
render()
{
return(
<div>
<Child name = {"ron"}/>
</div>
);
}
}
class Child extends React.Component{
{
render(){
return(
<div>
{this.props.name}
</div>
);
}
}【讨论】：
state - 它是一个特殊的可变属性，用于保存组件数据。 Componet 挂载时具有默认值。
props - 它是一种特殊属性，本质上是不可变的，用于从父级到子级的值传递。 props 只是组件之间的沟通渠道，总是从顶部（父）移动到底部（子）。
下面是结合 state 和 props 的完整示例：-
<!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>
【讨论】：
Props : Props 只不过是组件的属性，React 组件不过是一个 javascript 函数。
class Welcome extends React.Component {
render() {
return <h1>Hello {this.props.name}</h1>;
}
}
常量元素 = ;
这里<Welcome name="Sara" /> 传递一个对象 {name : 'Sara'} 作为 Welcome 组件的道具。要将数据从一个父组件传递到子组件，我们使用道具。
道具是不可变的。在组件的生命周期中，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>);
}
}
【讨论】：
基本上，props 和 state 是组件知道要渲染什么以及如何渲染的两种方式。应用程序状态的哪一部分属于状态，哪一部分属于某个顶级商店，与您的应用程序设计更相关，而不是 React 的工作方式。 IMO，最简单的决定方法是考虑这个特定的数据是否对整个应用程序有用，或者它是一些本地信息。另外，不重复状态也很重要，所以如果某些数据可以从 props 计算出来 - 它应该从 props 计算出来。
例如，假设您有一些下拉控件（它包含用于自定义样式的标准 HTML 选择），它可以 a）从列表中选择一些值，并且 b）打开或关闭（即显示或隐藏选项列表)。 现在，假设您的应用程序显示某种项目列表，并且您的下拉控件过滤列表条目。然后，最好将活动过滤器值作为道具传递，并保持本地打开/关闭状态。此外，为了使其正常工作，您将从父组件传递一个 onChange 处理程序，该处理程序将在下拉元素内部调用，并立即将更新的信息（新选择的过滤器）发送到商店。另一方面，打开/关闭状态可以保留在下拉组件中，因为应用程序的其余部分并不真正关心控件是否打开，直到用户实际更改它的值。
以下代码不能完全正常工作，它需要 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')
);
【讨论】：
状态是 react 处理组件所持有信息的方式。
假设您有一个组件需要从服务器获取一些数据。您通常希望通知用户请求是否正在处理、是否失败等。这是一条仅与该特定组件相关的信息。这是状态进入游戏的地方。
通常定义状态的最佳方式如下：
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 编程中一直使用的对象属性有什么不同？通常，您的状态中保存的信息并不意味着是静态的，它会随着时间而变化，您的视图将需要更新以反映这种变化。 State 以一种简单的方式提供了此功能。
状态是不可变的！我不能对此做出足够的强调。这是什么意思？这意味着你永远不应该做这样的事情。
state.key2 = newValue;
正确的做法是：
this.setState({ key2: newValue });
使用 this.setState，您的组件会在更新周期中运行，如果状态的任何部分发生更改，您的组件渲染方法将再次被调用以反映此更改。
查看反应文档以获得更详细的解释： https://facebook.github.io/react/docs/state-and-lifecycle.html
【讨论】：
道具只是属性的简写。 Props 是组件之间的通信方式。如果您完全熟悉 React，那么您应该知道 props 从父组件向下流动。
还有一种情况是你可以有默认的 props，这样即使父组件没有向下传递 props 也可以设置 props。
这就是为什么人们将 React 称为具有单向数据流的原因。这需要您花点时间思考，我可能稍后会在博客上讨论这个问题，但现在请记住：数据从父级流向子级。道具是不可变的（花哨的词不会改变）
所以我们很高兴。组件从父级接收数据。都整理好了，对吧？
嗯，不完全是。当组件从父级以外的其他人那里接收数据时会发生什么？如果用户直接向组件输入数据会怎样？
嗯，这就是我们有状态的原因。
状态
道具不应该改变，所以状态会增加。通常组件没有状态，因此被称为无状态。使用状态的组件称为有状态的。随意在聚会上丢掉那些小花絮，看着人们远离你。
所以使用状态是为了让组件可以在它所做的任何渲染之间跟踪信息。当您 setState 时，它会更新状态对象，然后重新渲染组件。这非常酷，因为这意味着 React 可以处理繁重的工作并且速度非常快。
作为状态的一个小例子，这里有一个来自搜索栏的 sn-p（如果你想了解更多关于 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 做类似的事情，但以不同的方式使用。您的大部分组件可能是无状态的。
Props 用于将数据从父级传递给子级或由组件本身传递。它们是不可变的，因此不会被更改。
状态用于可变数据，或将改变的数据。这对于用户输入特别有用。以搜索栏为例。用户将输入数据，这将更新他们看到的内容。
【讨论】：
简而言之。
props 值无法更改 [不可变]
状态值可以改变，使用 setState 方法 [可变]
【讨论】：
道具
props 用于在子组件中传递数据
props 改变组件外的值（子组件）
州
在类组件内使用状态
状态改变组件内的值
如果渲染页面，调用setState更新DOM(update page 值）
状态在反应中起着重要作用
【讨论】：
在回答关于 props 是不可变的最初问题时，它们被称为是不可变的就子组件而言，但在父组件中是可变的。
【讨论】：
一般来说，一个组件（父组件）的状态是子组件的prop。
道具通常是不可变的。
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，它作为 prop 传递给子组件（Child 类），子组件使用 {this.props.name} 渲染它
【讨论】：
在 React 中，状态存储数据以及道具。它与后者的区别在于存储的数据可以通过不同的变化进行修改。这些只不过是用平面 JavaScript 编写的对象，因此它们可以包含数据或代码，代表您要建模的信息。如果您需要更多详细信息，建议您查看这些出版物 Use of the State in React 和 Use of Props in React
【讨论】：
这是我目前关于 state 和 props 之间解释的观点
状态就像组件中的局部变量。你可以操纵 使用 set state 来设置 state 的值。然后您可以传递 state 的值 例如，您的子组件。
Props 是恰好位于你的 redux 存储中的值，这实际上是 来自起源于reducer的状态。你的组件 应该连接到 redux 以从 props 中获取值。你也可以通过 你的 props 对你的子组件的价值
【讨论】：
您有一些用户正在应用程序某处输入的数据。
正在输入数据的组件应使该数据处于其状态，因为它需要在数据输入期间对其进行操作和更改
应用程序中的其他任何地方，数据都应作为 props 传递给所有其他组件
所以是的，道具正在发生变化，但它们在“源”处发生了变化，然后会简单地从那里流下来。所以 props 在接收它们的组件的上下文中是不可变的。
例如用户在其中编辑供应商列表的参考数据屏幕将在状态下对其进行管理，然后会有一个操作导致更新的数据保存在 ReferenceDataState 中，它可能比 AppState 低一级，然后此供应商列表将作为道具传递给所有需要使用它的组件。
【讨论】：
Props： 表示“只读”数据，它们是不可变的，并且引用父组件的属性。
状态： 表示可变数据，最终影响页面上呈现的内容并由组件本身在内部管理，并且通常由于用户输入而超时更改。
【讨论】：
【讨论】：
react 中“state”和“props”的一些区别。
React 根据状态控制和渲染 DOM。组件状态有两种：props 是组件之间传递的状态，state 是组件内部的状态。 Props 用于从父组件到子组件的数据传输。组件内部也有自己的状态：只能在组件内部修改的状态。
一般来说，某个组件的状态可以是子组件的props，props会传递给子组件，子组件在父组件的渲染方法中声明
【讨论】：
来自：Andrea Chiarelli 的书《Beginning React：使用 React 简化前端开发工作流程并增强应用程序的用户体验》：
每个 React 组件都有一个 props 属性。此属性的目的是收集传递给组件本身的数据输入。 JSX 属性附加到 React 元素，具有相同名称的属性附加到 props 对象。因此，我们可以使用附加属性访问传递的数据。此外，props 的不变性让我们可以将 组件 视为 纯函数，它们是没有副作用的函数（因为它们没有'不要改变他们的输入数据）。我们可以将数据从一个组件传递到另一个组件视为从父组件到子组件的单向数据流。这为我们提供了一个更可控的系统。
React 提供了一种机制来支持在数据更改时自动呈现组件。这种机制基于状态的概念。 React state 是一个表示随时间变化的数据的属性。每个组件都支持 state 属性，但应谨慎使用。存储随时间变化的数据的组件被称为有状态组件。 有状态组件将状态存储在this.state属性中。要通知组件状态已更改，您必须使用 setState() 方法。 State 初始化是唯一可以在不使用 setState() 的情况下为 this.state 属性赋值的情况。
setState() 将新数据与状态中已包含的旧数据合并，并覆盖之前的状态 setState() 会触发 render() 方法的执行，因此您永远不应显式调用 render()
【讨论】：
props 和 state 的主要区别在于 state 是内部的，由组件本身控制，而 props 是外部的，由渲染组件的任何东西控制。
【讨论】：
React 组件使用状态来读取/写入可以更改/变异的内部变量，例如：
this.setState({name: 'Lila'})
React props 是一个特殊的对象，它允许程序员从父组件中获取变量和方法到子组件中。
这有点像房子的门窗。道具也是不可变的，子组件不能更改/更新它们。
有几种方法可以帮助在父组件更改 props 时进行监听。
【讨论】：
简单的解释是： STATE 是组件的本地状态，例如 color = "blue" 或 animation=true 等。使用 this.setState 来改变组件的状态。 PROPS 是组件相互通信（从父级向子级发送数据）并使组件可重用的方式。
【讨论】：
State 是你的数据，是可变的，你可以用它做任何你需要的事情，props 是只读数据，通常当你传递 props 时，你已经使用了你的数据，你需要子组件来渲染它，或者如果你的props 是你调用它来执行任务的函数
【讨论】：