React Hooks 状态管理

React Hooks 是 React 16.8 版本引入的新特性，它允许你在不编写类的情况下使用 state 以及其他的 React 特性。

常用状态管理 Hooks

以下是一些常用的状态管理 Hooks：

• useState: 用于在函数组件中添加 state。
• useEffect: 用于在组件中执行副作用操作，例如数据获取、订阅或手动更改 DOM。
• useContext: 用于在组件树中共享一些值，而不必一层层手动通过 props 传递。

使用 useState 管理状态

useState 是最常用的状态管理 Hook，它允许你在函数组件中添加 state。

import React, { useState } from 'react';

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

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

在上面的例子中，我们创建了一个名为 Counter 的组件，它有一个名为 count 的 state，初始值为 0。我们还有一个按钮，当点击按钮时，count 的值会增加 1。

使用 useEffect 进行副作用操作

useEffect 允许你在组件中执行副作用操作，例如数据获取、订阅或手动更改 DOM。

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

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

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('/api/data');
      const json = await response.json();
      setData(json);
    };

    fetchData();
  }, []); // 空数组表示这个 effect 只在组件挂载时运行一次

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

在上面的例子中，我们创建了一个名为 FetchData 的组件，它使用 useEffect 来从服务器获取数据。当组件挂载时，useEffect 会运行，并从服务器获取数据。一旦数据被获取，它就会被存储在组件的 state 中，并显示在页面上。

扩展阅读

更多关于 React Hooks 的信息，您可以访问 React 官方文档。

<center><img src="https://cloud-image.ullrai.com/q/react_hooks/" alt="React Hooks"/></center>