React Hooks教程： useState、useEffect以及如何创建自定义钩子

2024-02-15 01:03:04

### React Hooks简介

React Hooks 是在 React 16.8 中引入的一组新特性。它们允许你在函数组件中使用 state 和其他 React 特性，而无需编写类。这使得 React 代码更加简洁和易于维护。

### useState Hook

useState Hook 用于管理组件的状态。它接受一个初始状态作为参数，并返回一个数组，其中第一个元素是当前状态，第二个元素是一个函数，用于更新状态。

例如，以下代码使用 useState Hook 来管理一个计数器组件的状态：

import React, { useState } from "react";

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

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>+</button>
    </div>
  );
};

export default Counter;

### useEffect Hook

useEffect Hook 用于在组件生命周期的不同阶段执行副作用。副作用是指对组件外部状态的修改，例如发送网络请求或更新 DOM。

useEffect Hook 接受两个参数：一个回调函数和一个依赖项数组。回调函数将在组件挂载、更新或卸载时执行。依赖项数组指定了哪些状态或属性的变化会触发回调函数的执行。

例如，以下代码使用 useEffect Hook 来在组件挂载时发送网络请求：

import React, { useEffect } from "react";

const MyComponent = () => {
  useEffect(() => {
    fetch("https://example.com/api/data")
      .then(res => res.json())
      .then(data => {
        // Do something with the data
      });
  }, []);

  return <div>My Component</div>;
};

export default MyComponent;

### 创建自定义Hooks

你可以创建自己的 Hooks 来封装常用的逻辑，然后在多个组件中重用它们。自定义 Hooks 使用 use 来声明，例如：

import React, { useState } from "react";

const useCounter = (initialCount = 0) => {
  const [count, setCount] = useState(initialCount);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  const reset = () => {
    setCount(initialCount);
  };

  return {
    count,
    increment,
    decrement,
    reset
  };
};

export default useCounter;

然后，你可以在组件中使用自定义 Hook，就像使用内置的 Hook 一样：

import React, { useCounter } from "react";

const Counter = () => {
  const { count, increment, decrement, reset } = useCounter();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
};

export default Counter;