React 是一种用于构建用户界面的 JavaScript 库，它的核心思想是将 UI 抽象为组件。在 React 中，组件是一个可复用的 UI 部件，将 UI 拆分为小的、独立的部分，每个部分都有自己的状态和属性。其中，状态和属性是 React 组件中最重要的概念，本文将详细讲解 React SPA 应用中的 state 和 props。
state
在 React 组件中，状态（state）是组件的一个对象，它包含了组件内部的数据。当组件的状态发生变化时，React 会重新渲染组件，以便更新 UI。状态是组件内部的私有数据，只能通过组件自身来修改。
定义状态
在 React 中，状态的定义通常在组件的构造函数中完成。例如，下面的代码定义了一个名为 Counter 的组件，它有一个状态 count，初始值为 0：
----- ------- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
-
-- ---
-修改状态
在 React 中，修改状态必须使用 setState 方法。例如，下面的代码定义了一个名为 handleClick 的方法，当用户点击按钮时，会将 count 值加 1：
----- ------- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
---------------- - ----------------------------
-
------------- -
--------------- ------ ---------------- - - ---
-
-------- -
------ -
-----
-------------------------
------- -------------------------------- -----------
------
--
-
-在上面的代码中，当用户点击按钮时，会调用 handleClick 方法，该方法调用 setState 方法来更新 count 的值。当 count 的值发生变化时，React 会重新渲染组件，以便更新 UI。
异步更新状态
在 React 中，setState 方法是异步执行的，这意味着当你调用 setState 方法时，React 并不会立即更新组件的状态。相反，React 会将状态的更新加入到一个队列中，在下一个事件循环中批量执行更新操作。
例如，下面的代码定义了一个名为 handleClick 的方法，当用户点击按钮时，会将 count 值加 1，然后打印 count 的值：
----- ------- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
---------------- - ----------------------------
-
------------- -
--------------- ------ ---------------- - - ---
------------------------------
-
-------- -
------ -
-----
-------------------------
------- -------------------------------- -----------
------
--
-
-在上面的代码中，当用户点击按钮时，会调用 handleClick 方法，该方法调用 setState 方法来更新 count 的值，然后打印 count 的值。但是，由于 setState 是异步执行的，所以打印的结果总是比实际值小 1。
为了解决这个问题，React 提供了一个回调函数作为 setState 的第二个参数。例如，下面的代码定义了一个名为 handleClick 的方法，当用户点击按钮时，会将 count 值加 1，然后打印 count 的值：
----- ------- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
---------------- - ----------------------------
-
------------- -
--------------- ------ ---------------- - - -- -- -- -
------------------------------
---
-
-------- -
------ -
-----
-------------------------
------- -------------------------------- -----------
------
--
-
-在上面的代码中，当用户点击按钮时，会调用 handleClick 方法，该方法调用 setState 方法来更新 count 的值，然后在回调函数中打印 count 的值。由于回调函数是在状态更新后执行的，所以打印的结果是实际值。
props
在 React 组件中，属性（props）是组件的输入，它通过组件的属性传递给组件。属性是不可变的，只能由父组件来修改。
定义属性
在 React 中，属性的定义通常在组件的 JSX 中完成。例如，下面的代码定义了一个名为 Hello 的组件，它有一个属性 name，默认值为 World：
----- ----- ------- --------------- -
-------- -
------ --------- -----------------------
-
-
------------------ - -
----- --------
--使用属性
在 React 中，使用属性非常简单。例如，下面的代码定义了一个名为 App 的组件，它将 Hello 组件作为子组件，并传递了一个 name 属性：
----- --- ------- --------------- -
-------- -
------ ------ ------------ ---
-
-在上面的代码中，App 组件将 Hello 组件作为子组件，并传递了一个 name 属性。当 Hello 组件接收到 name 属性时，会在组件的 JSX 中使用 {this.props.name} 来引用属性的值。
验证属性
在 React 中，你可以使用 PropTypes 来验证组件的属性。PropTypes 是一个 JavaScript 库，它提供了一种类型检查机制，用于在运行时检查传递给组件的属性是否符合预期类型。
例如，下面的代码定义了一个名为 Hello 的组件，它有一个属性 name，默认值为 World，并使用 PropTypes 来验证属性的类型：
------ --------- ---- -------------
----- ----- ------- --------------- -
-------- -
------ --------- -----------------------
-
-
------------------ - -
----- --------
--
--------------- - -
----- ----------------------------
--在上面的代码中，Hello 组件使用 PropTypes 来验证 name 属性的类型是否为字符串。当你传递一个非字符串的值给 Hello 组件时，PropTypes 会在控制台中输出一个警告信息。
总结
在 React SPA 应用中，状态和属性是组件的两个重要概念。状态用于管理组件内部的私有数据，而属性用于将数据从父组件传递到子组件。状态和属性的正确使用可以大大提高代码的可读性和可维护性，帮助你构建更好的用户界面。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65ddfcb61886fbafa4b4ee8d