React 中的 state 和 props 有什么区别？

Question

我在看一个关于 React 的 Pluralsight 课程，讲师说 props 不应该被改变。我现在正在阅读 an article (uberVU/react-guide) 关于 props vs. state 的内容，上面写着

Both props and state changes trigger a render update.

文章后面说：

Props (short for properties) are a Component's configuration, its options if you may. They are received from above and immutable.

所以 props 可以改变但它们应该是不可变的？
什么时候应该使用道具，什么时候应该使用状态？
如果你有 React 组件需要的数据，它应该通过 props 传递还是通过 getInitialState 在 React 组件中设置？

Answer 1

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

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

parent 的 childsName 的状态值变为 child 的 this.props.name。从 child 的角度来看，名称属性是不可变的。如果需要更改，parent 应该只更改其内部状态：

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

并且 React 会为您将其传播到 child。一个自然的 follow-on 问题是：如果 child 需要更改其名称属性怎么办？这通常通过 child 事件和 parent 回调来完成。 child 可能会公开一个名为 onNameChanged 的事件。 parent 然后将通过传递回调处理程序来订阅该事件。

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

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

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

Answer 2

亲子交流，传递props即可

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

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

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

道具

是不可变的
- 让 React 进行快速引用检查
用于从您的视图控制器向下传递数据
- 你的顶级组件
有更好的表现
- 使用它向子组件传递数据

州

应该在您的视图控制器中进行管理
- 你的顶级组件
可变
性能较差
不应从子组件访问
- 用道具代代相传

For communication between two components that don't have a parent-child relationship, you can set up your own global event system. Subscribe to events in componentDidMount(), unsubscribe in componentWillUnmount(), and call setState() when you receive an event. Flux pattern is one of the possible ways to arrange this. - https://facebook.github.io/react/tips/communicate-between-components.html

What Components Should Have State?

Most of your components should simply take some data from props and render it. However, sometimes you need to respond to user input, a server request or the passage of time. For this you use state.

Try to keep as many of your components as possible stateless. By doing this you'll isolate the state to its most logical place and minimize redundancy, making it easier to reason about your application.

A common pattern is to create several stateless components that just render data, and have a stateful component above them in the hierarchy that passes its state to its children via props. The stateful component encapsulates all of the interaction logic, while the stateless components take care of rendering data in a declarative way. - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-components-should-have-state

What Should Go in State?

State should contain data that a component's event handlers may change to trigger a UI update. In real apps this data tends to be very small and JSON-serializable. When building a stateful component, think about the minimal possible representation of its state, and only store those properties in this.state. Inside of render() simply compute any other information you need based on this state. You'll find that thinking about and writing applications in this way tends to lead to the most correct application, since adding redundant or computed values to state means that you need to explicitly keep them in sync rather than rely on React computing them for you. - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-should-go-in-state

Answer 3

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

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

以下代码并不完全有效，它需要 css 并处理下拉 click/blur/change 事件，但我想尽量减少示例。希望它有助于理解差异。

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 4

我最喜欢的 props vs state 总结在这里：react-guide 给那些家伙的大帽子提示。以下是该页面的编辑版本：

道具与状态

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

道具

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

状态

状态是一种数据结构，在组件挂载时以默认值开始。它可能会随时间发生变化，主要是由于用户事件。

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

改变道具和状态

                                                   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 初始值都会覆盖组件内定义的默认值。

这个组件应该有状态吗？

状态是可选的。由于状态增加了复杂性并降低了可预测性，因此最好使用没有状态的组件。即使您显然不能在交互式应用程序中没有状态，您也应该避免使用过多的有状态组件。

组件类型

无状态组件 只有道具，没有状态。除了 render() 函数之外没有太多的事情发生。他们的逻辑围绕着他们收到的道具。这使得它们非常容易理解和测试。

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

来源

Answer 5

在回答关于 props 不可变的最初问题时，据说它们在子组件中是不可变的，但在父组件中是可变的。

Answer 6

State 是 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 你的组件在更新周期中运行，如果状态的任何部分发生变化，你的组件渲染方法将再次被调用以反映这种变化。

查看 React 文档以获得更详尽的解释： https://facebook.github.io/react/docs/state-and-lifecycle.html

Answer 7

一般来说，一个组件(parent)的状态是child组件的支柱。

State 驻留在组件中，其中 props 从 parent 传递到 child.

道具通常是不可变的。

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 class(Parent)，它的状态是名称，它被传递给 child 组件(Child class) 作为道具，child 组件使用 {this.props.name}

渲染它

Answer 8

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

props - 这是一个特殊的属性，它本质上是不可变的，用于从父级到子级的值传递。 props 只是 Components 之间的通信通道，总是从 top（parent）移动到 buttom（child）。

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

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

react中的state和props都是用来控制数据进入组件的，一般props由parent设置并传递给child组件，它们在整个组件中是固定的。对于 将要更改的数据， 我们必须使用状态。 props 是 immutable 而 states 是 mutable，如果你想改变 props 你可以从父组件做，然后传递给子组件。

Answer 10

React 组件使用状态 READ/WRITE 可以是 changed/mutated 的内部变量例如：

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

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

它有点像 Windows 和房子的门。 Props 也是不可变的 Child Component 不能 change/update 它们。

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

Answer 11

这是我目前对state和props解释的看法

State 就像是组件中的局部变量。你可以操纵通过使用设置状态的状态值。然后你可以传递 state 的值例如，您的子组件。
Props 是恰好位于你的 redux store 中的值，这实际上来自 reducer 的状态。你的组件应该连接到 redux 以从道具中获取价值。你也可以通过你的道具对你的子组件的价值

Answer 12

道具只是 shorthand 属性。道具是组件如何相互交谈的。如果你对 React 非常熟悉，那么你应该知道 props 从父组件向下流动。

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

这就是为什么人们称 React 具有 uni-directional 数据流。这需要一点头脑，我可能会在稍后写博客，但现在请记住：数据从父级流向子级。道具是不可变的（花哨的词是不变的）

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

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

好吧，这就是我们拥有状态的原因。

状态

道具不应该改变，所以状态会上升。通常组件没有状态，因此被称为无状态。使用状态的组件称为有状态的。随意在聚会上说些小道消息，然后看着人们逐渐远离你。

所以使用状态是为了让组件可以跟踪它所做的任何呈现之间的信息。当您设置状态时，它会更新状态对象，然后 re-renders 组件。这非常酷，因为这意味着 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 做类似的事情，但使用方式不同。您的大部分组件可能都是无状态的。

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

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

Answer 13

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

Answer 14

props (short for “properties”) and state are both plain JavaScript objects. While both hold information that influences the output of render, they are different in one important way: props get passed to the component (similar to function parameters) whereas state is managed within the component (similar to variables declared within a function).

所以 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>
);

Answer 15

You can understand it best by relating it to Plain JS functions.

简单地说，

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

普通 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>;
  }

另一方面，

Props 通过让组件能够以 props 的形式从其父组件接收数据，从而使组件可重用。它们相当于函数参数。

普通 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

文章 Link：React State vs Props explained

Answer 16

Props : Props 只不过是属性组件，而 React 组件不过是 javascript 函数。

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

const 元素 =;

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

状态：状态只能在组件内访问。为了跟踪组件内的数据，我们使用状态。我们可以通过 setState 改变状态。如果我们需要将状态传递给 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>);
  }
}

Answer 17

州：

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

道具：

道具是不可变的。
你可以在组件之间传递道具。
props主要用于components.You之间的通信，可以直接从parent传递到child。从 child 传递到 parent 你需要使用提升状态的概念。

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 18

简而言之

props values can't be changed [immutable]

state values can be changed, using setState method [mutable]

Answer 19

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

正在输入数据的组件应该在其状态中包含此数据，因为它需要在数据输入期间对其进行操作和更改
应用程序中的任何其他地方，数据应作为 props 传递给所有其他组件

所以是的，道具正在改变，但它们在 'source' 处改变，然后会从那里简单地流下来。所以 props 在接收它们的组件的上下文中是不可变的。

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

Answer 20

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

状态在组件（子组件或父组件）内管理。

这是我发现的支持这一点的定义：

Answer 21

简单的解释是： STATE 是组件的本地状态，例如 color = "blue" 或 animation=true 等。使用 this.setState 改变组件的状态。 PROPS 是组件相互通信（将数据从父级发送到子级）并使组件可重用的方式。

Answer 22

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

Answer 23

状态是真理的起源，是你的数据所在。 你可以说状态通过道具表现出来。

为组件提供 props 是让您的 UI 与您的数据保持同步的原因。组件实际上只是 returns 标记的函数。

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

所以 props 就像是将数据从源端传输到功能组件的管道。

Answer 24

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

Answer 25

Props: 代表 "read-only" 数据，它是不可变的并且引用来自父组件的属性。

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

Answer 26

主要区别在于，state 是组件私有的，只能在该组件内部更改，而 props 只是子组件的静态值和键，它通过父组件传递，不能在子组件内部更改组件

Answer 27

props --- 你不能改变它的值。
states --- 您可以在代码中更改它的值，但在渲染发生时它会处于活动状态。

Answer 28

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

状态可以改变（可变）
而道具不能（不可变）

Answer 29

react中“state”和“props”的一些区别

React 基于状态控制和渲染 DOM。组件状态分为两类：props是组件间传递的状态，state是组件内部状态。 Props 用于从父组件到子组件的数据传输。组件内部也有自己的状态：只能在组件内部修改的状态。

一般某个组件的state可以是子组件的props，props会传递给children，在父组件的rendering方法中声明

Answer 30

React 组件使用状态 READ/WRITE 可以是 changed/mutated 的内部变量例如：

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

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

它有点像 Windows 和房子的门。 Props 也是不可变的 Child Component 不能 change/update 它们。

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

Answer 31

State 驻留在一个组件中，其中 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} 
        )
    }
}

在上面的代码中，我们有一个父级 class(Parent)，它的状态是 name，它作为 prop 传递给子组件(Child class)，子组件使用 {this.props.name}

渲染它

Answer 32

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

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

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

setState() 将新数据与状态中已包含的旧数据合并，并覆盖之前的状态 setState() 触发 render() 方法的执行，因此您永远不应调用 render() 明确地

Answer 33

我在使用 React 时学到的。

props 被一个组件用来从外部环境获取数据，即另一个组件（纯函数式或 class）或 一般 class 或 javascript/typescript代码
状态用于管理组件的内部环境表示数据变化 在 组件中

Answer 34

道具

props用于在子组件中传递数据
props 在组件（子组件）外改变一个值

州

state use inside a class component
状态更改组件内的值
渲染页面调用setState更新DOM(更新页面值)

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

Answer 35

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

Answer 36

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

Answer 37

props 是 JavaScript 对象，传递到组件中，保存配置属性。
道具对于接收组件是不可变的
state 是 JavaScript 对象，在组件内管理，保存其内部状态。
更新触发 re-render

Answer 38

简单地说：

状态由组件自行管理。它是可重用的、组件私有的和可修改的。
道具从父级传递给子级。它是一个单向流，对于子组件是只读的。父组件的状态可以作为道具传递给子组件。

Answer 39

React props 用于向 child 组件发送信息，大多数时候，您的 child 组件是无状态的，这意味着它们代表data/information 它的 parent 给它，

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

这个 parent class 在单击按钮时将其状态从苹果更改为芒果，并将其状态作为道具传递给 child 组件。现在，甚至没有状态的 child 组件根据 parent.

的状态显示不同的标题

class Child extends Component{

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

所以在根级别上，道具是 parent 与其 child 通信，而状态是描述 parent 情况等

Answer 40

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

props：另一方面，您可以将道具从 parent 传递到 child 或从 child 传递到 parent.

Answer 41

州

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

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

道具

Props 是属性的简称，指的是可以在组件中动态改变的东西。在这里，组件从父组件接收道具。 1.Props 是不可变的 2.Used 将数据从父级传递给子级。 3.Used 将数据和回调函数作为 props 传递。 4.Can 从父组件初始化并且可以从父组件更改 5.Can set initialize the value for child component 可以在子组件中更改 6.Can 在组件内部设置默认值，并且可以在组件内部更改 7.Examples :- 在父组件中使用了子组件。

Answer 42

props 和 state 之间的主要区别是 state 是内部的，由组件本身控制，而 props 是外部的，由渲染组件的任何东西控制。

Answer 43

给出最简单的解释，补充上面的评论：

根据 React 的 official documentation，他们将“状态”视为

To “remember” things, components use state.

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

如果你想在你的应用程序中记住一些东西，你会使用状态，如果你想传递数据，你会使用道具。

我再给你打个比方，假设你想在脑海中添加前 25 个自然数的序列。

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

你将从 1 开始，然后你将 2 添加到其中，你将在 3 现在添加到你当前的总数（现在是 6），然后你将在你当前的总数中添加 4（6 ) 所以新的当前总数是 10.

当前总数是您程序的 state，假设您需要计算总和的平均值。你会把那个总和放到一个方程式中，你会把你的总和作为 props.

希望这是有道理的。

Answer 44

React props 和 state 的主要区别在于 props 是不可变的，一旦组件接收到 props 它就不能改变它的值，而在另一方面，React state 是可变的，Component 可以根据需要随时更改其值。

Answer 45

State是react中的一个特殊变量，用于re-render组件每当更新

State 对组件本身是私有的。也就是说，它不能在组件外部访问或修改。 setState/hook 用于更新状态。每当状态更新时，组件重新渲染

状态是可变的

Props 是组件的输入并使用 props 数据渲染内容

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

Answer 46

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

Answer 47

“Props” 是通过组件 (1), "state" is internal, private data managed by the component (2) 的外部输入。

Answer 48

在react中我们通常使用模块来分隔组件。有时分离的组件需要在它们内部共享数据。如果 parent 组件有一些数据应该在 child 组件上共享，那么 props 就是解决方案。我们可以使用从 parents 到 children 的道具共享数据。道具是不可变的，这意味着您无法更改数据。

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

React 中的 state 和 props 有什么区别？

What is the difference between state and props in React?

javascript

reactjs

道具与状态

道具

状态

改变道具和状态

这个组件应该有状态吗？

组件类型

来源