理解 React Hooks：用例与实践

---

前言

React Hooks 是 React 16.8 引入的一项强大功能，它们为函数组件引入了状态和其他 React 特性。以下是对 React 常用 Hooks 的详细介绍和使用指南。

useState：管理组件状态

状态是组件的核心部分。useState 是最基本的 Hook，用于在函数组件中添加状态。

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>
  );
}

要点：

• useState 接受一个初始状态值，并返回一个状态和更新状态的函数。
• setState 可以接受新的状态值或一个返回新状态值的函数。

useEffect：处理副作用

useEffect 是处理副作用的 Hook，例如数据获取、订阅和手动 DOM 操作。

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

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

  useEffect(() => {
   
    document.title = `You clicked ${
     count} times`;
  }, [count]); // 仅在 count 变化时执行

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