解释React中的钩子（Hooks）：useState和useEffect的深度解析

基本概念与作用说明

useState

useState 是一个 Hook，用于在函数组件中添加状态。在类组件中，我们通常使用 this.state 和 this.setState() 方法来管理组件的状态，而 useState 提供了类似的功能，但更简洁且易于理解。

示例一：基本使用

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

在这个例子中，useState 接收初始状态值 0，并返回一个数组，其中第一个元素是当前状态，第二个元素是更新状态的函数。

useEffect

useEffect Hook 允许你执行副作用操作，如数据获取、订阅或手动更改 DOM。它接受一个回调函数作为第一个参数，该函数会在组件渲染后执行。useEffect 可以替代类组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount。

示例二：模拟 componentDidMount

import React, { useState, useEffect } from 'react';

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData().then(data => setData(data));
  }, []); // 仅在组件挂载时运行

  return (
    <div>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Loading...'}
    </div>
  );
}

这里的 useEffect 接受一个空数组作为依赖项列表，这意味着这个副作用只会在组件挂载时执行一次。

功能使用思路与代码示例

示例三：条件渲染和数据获取

import React, { useState, useEffect } from 'react';

function Example() {
  const [loaded, setLoaded] = useState(false);
  const [items, setIte