在 React 中，Props 和 State 是两个非常重要的概念。Props 代表着组件的属性，而 State 代表着组件的状态。它们之间的区别和联系是很重要的，本文将详细介绍。
Props
Props 是父组件传递给子组件的属性，这些属性可以被子组件 read-only 访问。Props 可以是任何类型的数据，包括字符串、数字、对象、数组等。Props 的作用是将数据从父组件传递给子组件，使得子组件可以根据这些数据渲染视图。
在子组件中，Props 可以通过 this.props.xxx 的方式来访问。例如：
class Child extends React.Component {
render() {
return <div>{this.props.message}</div>;
}
}在这个例子中，父组件可以将一个 message 属性传递给子组件，并通过 this.props.message 来访问。
State
State 是组件自己管理的状态，它与 Props 不同，可以被组件自身修改。State 可以是任何类型的数据，包括字符串、数字、对象、数组等。
在类组件中，State 可以通过 this.state.xxx 的方式来访问。例如：
-- -------------------- ---- -------
----- ------- ------- --------------- -
------------------ -
-------------
---------- - -
------ --
--
-
-------- -
------ -
-----
-------------------------------
------- ----------- -- --------------- ------ ---------------- - - ----
----- --
---------
------
--
-
-在这个例子中，Counter 组件会自己管理一个 count 状态，每次点击按钮会更新 count 的值。通过 this.state.count 可以访问到 count 的值。
需要注意的是，State 的更新是异步的，所以不能通过 this.state.xxx 直接更新 State。需要使用 this.setState() 来更新 State，这样 React 才能正确地处理更新。
Props 和 State 的区别
Props 和 State 之间的主要区别可以总结为以下几点：
- Props 是只读的，不能被子组件修改。而 State 是组件自己管理的，可以被组件自身修改。
- Props 是从父组件传递而来的，而 State 是组件自己内部的状态。
- Props 的作用是传递数据，使得子组件能够渲染视图，而 State 的作用是管理组件的状态，保存数据。
Props 和 State 的联系
虽然 Props 和 State 有着明显的区别，但它们之间也是有联系的。在许多情况下，组件的 State 会依赖于 Props，也就是说，Props 的变化会导致 State 的变化。
例如，我们可以在 Counter 组件中添加一个 props 属性来接受一个初始值，这个初始值会在组件渲染时赋值给 State：
-- -------------------- ---- -------
----- ------- ------- --------------- -
------------------ -
-------------
---------- - -
------ ------------------ -- --
--
-
-------- -
------ -
-----
-------------------------------
------- ----------- -- --------------- ------ ---------------- - - ----
----- --
---------
------
--
-
-这样，在父组件中传递一个 initialCount 属性就可以控制 Counter 组件的初始值了。
结论
通过本文，我们了解了 Props 和 State 之间的区别和联系。要正确地使用 Props 和 State，我们需要：
- 确保理解 Props 和 State 的含义和作用。
- 确保正确地使用 Props 和 State，不要混淆它们的用途。
- 确保正确地处理 Props 和 State 的变化，避免出现不必要的问题。
总之，Props 和 State 是组件开发中非常重要的概念，理解它们的区别和联系对于编写高质量的 React 组件非常重要。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646c8452968c7c53b0b7a6c0