React 中如何初始化 State？

推荐答案

在 React 中，初始化 State 可以通过以下两种方式实现：

1. 在类组件中使用 constructor 初始化 State：

   -- -------------------- ---- -------
   ----- ----------- ------- --------------- -
     ------------------ -
       -------------
       ---------- - -
         ------ --
         ----- ----- ----
       --
     -
   
     -------- -
       ------ -----------------------------
     -
   -

2. 在函数组件中使用 useState Hook 初始化 State：

   -- -------------------- ---- -------
   ------ ------ - -------- - ---- --------
   
   -------- ------------- -
     ----- ------- --------- - ------------
     ----- ------ -------- - -------------- ------
   
     ------ -
       -----
         -------------
         --------------
       ------
     --
   -

本题详细解读

类组件中的 State 初始化

在类组件中，State 的初始化通常在 constructor 方法中进行。constructor 是类组件的构造函数，它在组件实例化时被调用。通过 this.state 可以定义组件的初始状态。

• super(props)：在构造函数中，必须先调用 super(props)，以确保父类（即 React.Component）的构造函数被正确调用。
• this.state：this.state 是一个对象，用于存储组件的状态。你可以在其中定义多个状态变量。

函数组件中的 State 初始化

在函数组件中，State 的初始化通过 useState Hook 实现。useState 是 React 提供的一个 Hook，用于在函数组件中添加状态。

• useState：useState 接受一个参数，即状态的初始值，并返回一个数组。数组的第一个元素是当前状态值，第二个元素是更新状态的函数。
• 状态更新：通过调用 setCount 或 setName 等函数，可以更新对应的状态值。

对比

• 类组件：适用于复杂的组件逻辑，尤其是需要生命周期方法或状态管理的场景。
• 函数组件：更简洁，适合简单的组件逻辑，尤其是结合 Hooks 使用后，函数组件的能力得到了极大的增强。

通过这两种方式，你可以在 React 中灵活地初始化和管理组件的状态。