React Hooks：useState、useEffect 和自定义 Hook 的实用指南

2023-09-20 08:22:29

了解 React Hooks 中 useState、useEffect 和自定义 Hook 的作用和用法

简介

React Hooks 是 React 16.8 中引入的一组强大的工具，它们彻底改变了 React 的状态管理和副作用处理方式。useState、useEffect 和自定义 Hook 是最流行的 Hooks 之一，它们提供了一种声明式且无状态的方式来处理状态、副作用和代码重用。

useState

useState Hook 允许我们在函数组件中管理状态。它采用一个初始状态值，返回一个数组，其中包含当前状态和一个更新状态的函数。

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

每当 setCount 函数被调用时，React 会重新渲染组件并使用新的状态值更新组件的状态。

useEffect

useEffect Hook 允许我们在组件生命周期中执行副作用，例如数据获取、DOM 操作或计时器。它采用一个回调函数和一个依赖项数组。

useEffect(() => {
  // 副作用
}, [dependency]);

当依赖项发生更改时，useEffect 回调函数将再次执行。

自定义 Hook

自定义 Hook 允许我们创建自己的 Hook，这些 Hook 可以重用代码并在多个组件中共享。自定义 Hook 使用 use 前缀命名，并在函数组件中调用。

import { useState } from 'react';

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

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

  return { count, increment };
};

我们可以通过在其他组件中调用 useCounter Hook 来使用自定义 Hook：

const MyComponent = () => {
  const { count, increment } = useCounter();

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