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

Question

我正在观看关于 React 的 Pluralsight 课程，讲师说不应更改道具。我现在正在阅读一篇关于道具与状态 的文章（uberVU/react-guide） ，它说

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

文章后面说：

Props（properties 的缩写）是一个组件的配置，如果可以的话，它是它的选项。它们是从上面接收的并且是不可变的。

• 所以道具可以改变，但它们应该是不可变的？

• 什么时候应该使用道具，什么时候应该使用状态？

• 如果你有 React 组件需要的数据，是应该通过 props 传递还是通过 getInitialState 在 React 组件中设置？

原文由 David 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

道具和状态是相关的。一个组件的状态往往会成为子组件的 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 });
 }

原文由 Todd 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

亲子交流，传递props即可。

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

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

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

道具

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

状态

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

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

哪些组件应该有状态？

你的大部分组件应该简单地从 props 中获取一些数据并渲染它。然而，有时您需要响应用户输入、服务器请求或时间流逝。为此，您使用状态。

尝试让尽可能多的组件保持 无状态。通过这样做，您会将状态隔离到其最合乎逻辑的位置并最大限度地减少冗余，从而更容易推理您的应用程序。

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

状态应该是什么？

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

原文由 BentOnCoding 发布，翻译遵循 CC BY-SA 3.0 许可协议