React 中如何初始化 State？

推荐答案

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

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

   // www.javascriptcn.com code example
   class MyComponent extends React.Component {
     constructor(props) {
       super(props);
       this.state = {
         count: 0,
         name: 'John Doe'
       };
     }
   
     render() {
       return <div>{this.state.name}</div>;
     }
   }

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

   // www.javascriptcn.com code example
   import React, { useState } from 'react';
   
   function MyComponent() {
     const [count, setCount] = useState(0);
     const [name, setName] = useState('John Doe');
   
     return (
       <div>
         <p>{name}</p>
         <p>{count}</p>
       </div>
     );
   }

本题详细解读

类组件中的 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 中灵活地初始化和管理组件的状态。