在 React 中，有两个重要的概念：状态 (State) 和属性 (Props)。这两个概念都与组件有关，但却有着不同的作用和用法。本文将详细介绍 React 中状态和属性的概念、区别以及如何使用。同时，也将给出一些示例代码来帮助读者更好地理解这些概念。
状态 (State)
状态是组件内部存储和处理数据的一种方式。在 React 组件中，状态通常用一个类属性 state 存储。状态是组件内部的数据，可以被组件自己修改，但组件之外不能直接访问或修改状态。
状态可以在构造函数中初始化，也可以在组件的生命周期函数中更新。当状态发生变化时，React 会重新渲染组件以保持 UI 的一致性。
以下是一个简单示例，其中状态 count 表示了按钮被点击的次数：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------ ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
-
------------- -
--------------- ------ ---------------- - - ---
-
-------- -
------ ------- --------------------------------------------- ------------------ ---------------
-
-
------ ------- -------在这个例子中，状态 count 初始化为 0。每次按钮被点击时，我们通过 this.setState 函数更新状态并触发重新渲染。每次渲染时，按钮标签的 Clicked {this.state.count} times 中的 count 会更新成当前的按钮点击次数。
属性 (Props)
属性是组件外部传递给组件内部的数据。在 React 组件中，属性通常用类属性 props 存储。属性是组件的只读数据，不能被组件自己修改，只能由它的父组件传递进来。
组件接收的属性可以被用于构建组件内部的状态。在某些情况下，组件内部的状态可能需要从外部传递的属性进行计算。例如，可以使用给定的属性数据来初始化状态、更新组件的显示方式等。
以下是一个示例，其中属性 name 表示组件的名称：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------- ------- --------------- -
------------------ -
-------------
---------- - - -------- --------------- ------- -- ------- --
-
-------- -
------ --------------------------------
-
-
------ ------- --------在这个例子中，我们使用来自父组件的 name 属性来初始化状态的 message。这将在渲染时生成消息 Hello, world! Welcome to React.
状态和属性的区别
状态和属性有以下区别：
- 状态是组件内部的数据，属性是由父组件传递给子组件的数据。
- 状态通常用来存储和处理组件内部的数据，而属性则用于控制组件的显示方式和行为。
- 状态可以被组件自己修改，而属性则是只读的。组件通常需要将属性转换为状态来更好地管理内部数据或响应用户的操作。
如何使用状态和属性
在 React 中，一般建议使用属性来控制组件的显示和行为，同时使用状态来存储和处理组件内部的数据。通过这种方式，我们能够更好地封装组件，使其更加灵活和可复用。
以下是一个示例，展示了如何同时使用状态和属性控制组件的显示和行为：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
-
------------- -
--------------- ------ ---------------- - - ---
-
-------- -
----- - ----- ---- - - -----------
----- - ----- - - -----------
------ -
-----
---------------
-------- --- ------ -- -------- --- ------------
------- --------------------------------------
------- ------- ----- ------ -------
---------
------
--
-
-
------ ------- --------在这个例子中，我们定义了一个组件 Counter，它有两个属性：name 和 step。属性 name 用于设置组件的名称，属性 step 用于设置计数器的步长。我们使用属性 name 在组件的标头中显示组件的名称，并使用属性 step 在计数器按钮的下方显示步长。
组件还有一个状态 count，它用于存储计数器的当前值。每次点击按钮时，我们通过调用 this.setState 来递增计数器的值。这将触发重新渲染组件，显示更新后的计数器值。
总结
在 React 中，状态和属性是两个重要的概念。状态是组件内部存储和处理数据的一种方式，可以用来修改组件的显示和行为。属性是组件外部传递给组件内部的数据，用于控制组件的显示方式和行为。
通过合理使用状态和属性，我们可以更好地组织和管理 React 应用程序的代码。同时，我们也能够更好地封装和复用组件，并提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647cea0c968c7c53b07d4af8