React 是一种流行的前端框架，它的核心思想是组件化。在 React 中，组件可以接受来自父组件的属性（Props），并且可以维护自己的状态（State）。Props 和 State 是 React 中非常重要的概念，了解它们的作用和使用方法对于开发高质量的 React 应用程序至关重要。
Props
Props 是组件接收的属性，它们是只读的。当组件被创建时，父组件可以将一些数据作为 Props 传递给它。组件可以通过 Props 访问这些数据，并将它们渲染到组件中。
Props 的使用
在组件中，Props 可以通过 this.props 访问。例如，下面是一个简单的组件，它接收一个名字作为 Props，然后将其显示在页面上：
-- -------------------- ---- -------
----- -------- ------- --------------- -
-------- -
------ ---------- ------------------------
-
-
----------------
--------- ------------ ---
-------------------------------
--在这个例子中，<Greeting name="World" /> 将一个名为 "World" 的字符串作为 Props 传递给 Greeting 组件。组件通过 this.props.name 访问该属性，并将其渲染到页面上。
Props 的验证
在 React 中，可以使用 PropTypes 库对 Props 进行验证。这可以确保 Props 的类型和值符合预期，并且可以在开发过程中捕获潜在的错误。例如，下面是一个组件，它使用 PropTypes 来验证它接收的 Props：
-- -------------------- ---- -------
------ --------- ---- -------------
----- -------- ------- --------------- -
-------- -
------ ---------- ------------------------
-
-
------------------ - -
----- ---------------------------
--
----------------
--------- ------------ ---
-------------------------------
--在这个例子中，Greeting.propTypes 定义了一个名为 name 的 Props，它必须是一个字符串。isRequired 意味着这个 Props 是必需的，如果没有提供，将会在控制台中发出警告。
State
State 是组件维护的内部状态，它是可变的。当组件的状态发生变化时，React 会自动重新渲染组件。
State 的使用
在组件中，State 可以通过 this.state 访问。例如，下面是一个简单的组件，它维护一个计数器状态，并在页面上显示它的值：
-- -------------------- ---- -------
----- ------- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
-
------------- -
--------------- ------ ---------------- - - ---
-
-------- -
------ -
-----
--------- ----------------------
------- ----------- -- --------------------------------------
------
--
-
-
----------------
-------- ---
-------------------------------
--在这个例子中，Counter 组件维护了一个名为 count 的状态，初始值为 0。当用户点击按钮时，handleClick 方法会将计数器的值加 1，然后通过 this.setState 更新组件的状态。每次状态更新时，React 会自动重新渲染组件。
State 的更新
在 React 中，不能直接修改组件的状态，而是应该使用 this.setState 方法。这是因为 React 需要知道何时重新渲染组件，并且需要比较新状态和旧状态之间的差异。例如，下面是一个错误的组件，尝试直接修改状态：
-- -------------------- ---- -------
----- ------------- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
-
------------- -
------------------- -- -----------
-
-------- -
------ -
-----
--------- ----------------------
------- ----------- -- --------------------------------------
------
--
-
-
----------------
-------------- ---
-------------------------------
--在这个例子中，BrokenCounter 组件尝试直接修改 count 状态，这是错误的。应该使用 this.setState 来更新状态。
State 的验证
与 Props 类似，可以使用 PropTypes 库对 State 进行验证。这可以确保状态的类型和值符合预期，并且可以在开发过程中捕获潜在的错误。例如，下面是一个组件，它使用 PropTypes 来验证它的状态：
-- -------------------- ---- -------
------ --------- ---- -------------
----- ------- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
-
------------- -
--------------- ------ ---------------- - - ---
-
-------- -
------ -
-----
--------- ----------------------
------- ----------- -- --------------------------------------
------
--
-
-
----------------- - -
------ ---------------------------
--
----------------
-------- ---
-------------------------------
--在这个例子中，Counter.propTypes 定义了一个名为 count 的状态，它必须是一个数字。isRequired 意味着这个状态是必需的，如果没有提供，将会在控制台中发出警告。
Props 和 State 的区别
Props 和 State 都是组件的数据源，但它们之间有一些重要的区别。
- Props 是只读的，而 State 是可变的。
- Props 是从父组件传递给子组件的，而 State 是在组件内部维护的。
- 当 Props 发生变化时，子组件会自动重新渲染，而当 State 发生变化时，组件会自动重新渲染。
在一般情况下，应该尽量使用 Props，因为它们可以使组件更加可重用和可组合。只有当需要在组件内部维护一些可变的状态时，才应该使用 State。
结论
Props 和 State 是 React 中非常重要的概念，了解它们的作用和使用方法对于开发高质量的 React 应用程序至关重要。在使用 Props 和 State 时，应该注意它们之间的区别，并且应该使用 PropTypes 来验证它们的类型和值。在开发过程中，应该尽量使用 Props，只有当需要在组件内部维护可变状态时，才应该使用 State。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676571a476af2b9a20ecf5f7