React中的状态和道具有什么区别？

Question

我正在看React的Pluralsight课程，导师说道具不应该改变。我现在正在阅读关于道具与状态的an article (uberVU/react-guide)，并且说

  

道具和状态更改都会触发渲染更新。

文章后面说：

  

道具（属性的简称）是组件的配置，如果可以，它的选项。他们是从上面收到的，不可变的。

• 所以道具可以改变，但它们应该是不可改变的？
• 什么时候应该使用道具？什么时候应该使用州？
• 如果您有React组件需要的数据，是否应通过getInitialState通过道具或React组件中的设置进行传递？

Answer 1

道具和州有关系。一个组件的状态通常会成为子组件的支柱。道具在父项的render方法中作为React.createElement()的第二个参数传递给子项，或者，如果您使用JSX，则更熟悉的标记属性。

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

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

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

Answer 2

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

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

使用道具传递数据＆amp;事件处理程序到您的子组件。

这些列表可以帮助您在处理组件中的数据时提供指导。

<强>道具

• 是不可变的
  • 让React做快速参考检查
• 用于从视图控制器传递数据
  • 您的顶级组件
• 有更好的表现
  • 使用它将数据传递给子组件

<强>国家

• 应在您的视图控制器中进行管理
  • 您的顶级组件
• 是可变的
• 性能更差
不应从子组件访问
• • 用道具传下来

  

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

     

哪些组件应该具有哪些状态？

     

你的大部分组件都应该只从道具中获取一些数据   渲染它。但是，有时您需要响应用户输入，a   服务器请求或时间的推移。为此你使用状态。

     

尽量保留尽可能多的组件无状态。通过做   这样你就可以将状态隔离到最合乎逻辑的位置并最小化   冗余，使您更容易推理您的申请。

     

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

     

该怎么做？

     

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

Answer 3

我最喜欢的道具vs州摘要就在这里：https://github.com/uberVU/react-guide/blob/master/props-vs-state.md给那些家伙一个大帽子。以下是该页面的编辑版本：

道具vs州

tl; dr 如果某个组件需要在某个时间点改变其中一个属性，那么该属性应该是其状态的一部分，否则它应该只是该组件的支柱。 / p>

道具

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

状态

状态是一个数据结构，在组件安装时以默认值开头。它可能会随着时间而变异，主要是由于用户事件。

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

改变道具和状态

                                                   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中定义的默认值。

此组件是否具有状态？

州是可选的。由于状态增加了复杂性并降低了可预测性，因此优选没有状态的组件。即使您在交互式应用中显然无法使用状态，但您应该避免使用过多的有状态组件。

组件类型

无状态组件只有道具，没有状态。除了render（）函数之外，还没有多少事情发生。他们的逻辑围绕着他们收到的道具。这使得它们非常易于遵循和测试。

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

来源

• Question about 'props' and 'state' - Google Groups
• Thinking in React: Identify where your state should live

Answer 4

  

大多数答案令人困惑，初学者却在澄清。这很难   关联和理解。 您可以通过将其与Plain相关联来理解它   JS。

简单来说，

状态是指组件的本地状态，无法在组件外部进行访问和修改，只能使用＆amp;在组件内修改。

Plain JS

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

React JS Equivalent

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

另一方面，

道具通过赋予组件以道具形式从父组件接收数据的能力，使组件可重用。

普通JS

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

React JS

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

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

致谢：https://medium.com/@manojsinghnegi

文章林克：https://medium.com/@manojsinghnegi/react-state-vs-props-explained-51beebd73b21

Answer 5

  

道具（“属性”的缩写）和州都是纯JavaScript   对象。虽然两者都持有影响产出的信息   渲染，它们在一个重要方面是不同的：道具传递给   组件（类似于函数参数），而状态是   在组件内管理（类似于在a中声明的变量）   功能）。

因此，状态仅限于您​​当前的组件，但道具可以传递给您希望的任何组件...您可以传递状态当前组件的 prop 到其他组件......

同样在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>
);

Answer 6

基本上，区别在于 州 类似于OOP中的属性：它是本地到class（component），用于更好地描述它。 Props 就像参数 - 它们传递到组件调用者的组件中（父母）：好像你用一定的参数调用了一个函数。

Answer 7

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

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

• 状态可以更改（可变）
• 道具无法（不变）

Answer 8

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

Answer 9

道具：道具只不过是组件的属性，而react组件只不过是一个javascript函数。

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

const element =;

此处<Welcome name="Sara" />传递对象{name：'Sara'}作为Welcome组件的道具。要将数据从一个父组件传递到子组件，我们使用props。 道具是一成不变的。在组件的生命周期中，道具不应更改（将其视为不变的）。

状态：状态只能在Component中访问。为了跟踪组件中的数据，我们使用状态。我们可以通过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>);
  }
}

Answer 10

简而言之。

  

道具值无法更改（不可变）

     

状态值可以使用setState方法[mutable]

进行更改

Answer 11

状态：

1. 状态是可变的。
2. 状态与各个组件相关联，其他组件无法使用。
3. 状态在组件安装时初始化。
4. 状态用于在组件内呈现动态变化。

道具：

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

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

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

Answer 12

State是处理组件所拥有信息的方式。

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

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

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

但是在本地反应原理的最新实现中你可以做到：

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

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

那么，与我们在OO编程中一直使用的对象属性有什么不同？通常，您所在州的信息不是静态的，它会随着时间的推移而变化，您的视图需要更新以反映这些变化。 State以简单的方式提供此功能。

国家意味着无法改变！而且我无法对此施加足够的压力。这意味着什么？这意味着你永远不应该做这样的事情。

 state.key2 = newValue;

正确的做法是：

this.setState({ key2: newValue });

使用this.setState，您的组件将运行更新周期，如果状态的任何部分发生更改，则将再次调用Component render方法以反映此更改。

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

Answer 13

道具只是属性的简写。道具是组件彼此交谈的方式。如果您完全熟悉React，那么您应该知道道具从父组件向下流动。

还有一种情况是你可以拥有默认道具，这样即使父组件没有传递道具也会设置道具。

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

所以我们很高兴。组件从父级接收数据。全部排序了吧？

嗯，不太好。当组件从父级以外的其他人接收数据时会发生什么？如果用户直接将数据输入到组件怎么办？

嗯，这就是为什么我们有州。

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

概要

道具和国家做类似的事情，但以不同的方式使用。您的大多数组件可能都是无状态的。

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

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

Answer 14

反应中“状态”和“道具”之间有些差异。

React根据状态控制和呈现DOM。组件状态有两种类型：props是在组件之间转移的状态，而state是组件的内部状态。道具用于从父组件到子组件的数据传输。组件内部还具有自己的状态：状态只能在组件内部进行修改。

通常，某些组件的状态可能是子组件的道具，道具会传递给子组件，这在父组件的渲染方法中说明

Answer 15

state - 这是一个包含Component数据的特殊mutable属性。它在Componet安装时具有默认值。

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

下面的

是结合状态和完整性的完整示例。道具： -

<!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>

Answer 16

基本上，props和state是组件可以知道什么以及如何呈现的两种方式。应用程序状态的哪个部分属于州，哪个属于顶级商店，与您的应用程序设计有关，而不是与React的工作方式有关。决定IMO的最简单方法是考虑这个特定的数据是否对整个应用程序有用，或者它是一些本地信息。另外，重复状态非常重要，因此如果可以从道具计算某些数据 - 它应该从道具计算。

例如，假设您有一些下拉控件（包装标准HTML选择自定义样式），可以a）从列表中选择一些值，b）打开或关闭（即选项）列表显示或隐藏）。 现在，让我们说您的应用程序显示某种项目列表，您的下拉列表控件会过滤列表条目。然后，最好将活动过滤器值作为道具传递，并保持打开/关闭状态为本地。此外，为了使其正常工作，您将从父组件传递一个onChange处理程序，该组件将在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')
);

Answer 17

通常，一个组件（父组件）的状态是子组件的prop。

1. State位于从父级传递到道具的组件中 子。

2. 道具通常是不可改变的。

   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），其名称作为其状态，作为prop传递给子组件（Child类），子组件使用{this.props.name}呈现它

Answer 18

您有一些用户正在应用程序中输入的数据。

1. 要在其中输入数据的组件将其数据保持为状态，因为它需要在数据输入过程中对其进行操作和更改

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

是的，道具正在发生变化，但是它们在“源”处发生了变化，然后将仅从那里流下来。因此，道具在接收道具的上下文中是不可变的。

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

Answer 19

• 道具 ---您无法更改其值。
• 状态-您可以在代码中更改其值，但是在进行渲染时它将处于活动状态。

Answer 20

道具

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

• 道具在组件（子组件）外部更改值

州

• 说明在类组件内部的使用情况

• 状态更改组件内部的值

• 如果呈现页面，则调用setState来更新DOM（更新页面 值）

国家在反应中起着重要作用

Answer 21

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

Answer 22

• props是传递给Component的JavaScript对象，其中包含配置属性。
• 道具是接收组件不变的
• state是在组件内管理的JavaScript对象，它保持其内部状态。
• 进行更新以触发重新渲染

Answer 23

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

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

React提供了一种机制来支持在数据更改时自动呈现组件。这种机制是基于 state 的概念。 React 状态是代表随时间变化的数据的属性。每个组件都支持 state 属性，但应谨慎使用。存储可随时间变化的数据的组件被称为有状态组件。 状态组件将状态存储在 this.state 属性中。要通知组件状态已更改，必须使用 setState（）方法。 状态初始化是唯一一种无需使用 setState（）即可为 this.state 属性分配值的情况。

setState（）将新数据与该状态中已经包含的旧数据合并，并覆盖以前的状态 setState（）触发 render（）方法的执行，因此您不应显式调用 render（）

Answer 24

根据我在与React合作时所学到的知识。

组件使用

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

• 状态用于管理组件的内部环境，表示组件内部的数据更改 strong>

Answer 25

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

Answer 26

道具和状态在触发重新渲染的方式上是相同的。区别在于道具来自父组件，而状态在当前组件中管理。所以状态是可变的，道具是不可变的

Answer 27

简单地说：

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

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

Answer 28

状态

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

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

道具

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

Answer 29

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

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

Answer 30

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

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

当按钮被点击并将其状态作为道具传递给子组件时，该父类正在将其状态从苹果更改为芒果。现在，甚至没有状态的子组件根据父组件的状态显示不同的标题。

class Child extends Component{

  render(){
    return(
      <h1>I have received a prop {this.props.fruit}</h1>
    )
  }
}

所以在根级别上，props 是父级与其子级通信，而 state 是描述父级情况等。

Answer 31

State驻留在组件中，在该组件中，道具从父级传递到子级。 道具通常是不可变的。

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

在上面的代码中，我们有一个父类（父类），其状态为名称，它作为道具传递给子组件（子类），子组件使用{this.props.name}进行渲染。

Answer 32

React组件使用状态来读/写可通过以下方式更改/更改的内部变量：

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

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

这就像房子的窗户和门。道具也是不可变的，子组件无法更改/更新它们。

有两种方法可以帮助侦听父组件更改道具的情况。

Answer 33

道具：代表“只读”数据，该数据是不可变的，并引用父级组件的属性。

状态：表示可变数据，这些可变数据最终会影响页面上呈现的内容以及由组件本身在内部进行管理的内容，并且通常会由于用户输入而超时。

Answer 34

状态是真理的起源，您的数据生活在这里。 您可以说国家通过道具来表现自己。

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

给出相同的道具（用于显示的道具），它将始终产生相同的标记。

所以道具就像将数据从原点传送到功能组件的管道一样。

Answer 35

状态是您的数据，是可变的，您可以使用它做任何需要的事情，props是只读数据，通常当您传递props时，您已经在使用数据，并且需要子组件来呈现它，或者props是您用来执行任务的功能

Answer 36

简单的解释是： STATE是组件的局部状态，例如color =“ blue”或animation = true等。使用this.setState更改组件的状态。 PROPS是组件之间相互交谈（将数据从父级发送到子级）并使组件可重用的方式。

Answer 37

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

1. 状态就像是组件中的局部变量。你可以操纵 使用set状态的state值。然后，您可以传递state的值 以您的子组件为例。

2. Props是精确定位在redux商店内的值，实际上就是这个 源自减速机的国家。你的组件 应该连接到redux以获取props的值。你也可以通过 你的道具价值给你的孩子组件

Answer 38

React Components使用state来读取/写入可以改变/变异的内部变量，例如：

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

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

它就像一扇窗户和房子的门。道具也是不可变的子组件无法更改/更新它们。

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

Answer 39

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

Answer 40

主要区别在于，状态是组件的私有状态，只有在props只是静态值和子组件的键（通过父组件传递且不能在子组件内部更改）时，状态才可以在该组件内部更改< / p>

Answer 41

道具是在渲染时传递到组件中的值，对象或数组。这些道具通常是组件中创建UI，设置某些默认功能或用于填充字段所需的值。道具还可以采用从父组件向下传递的功能形式，子组件可以调用这些功能。

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

这是我发现支持的定义：