React Hooks 使用指南

在 React 16.8 版本中，引入了一种新的特性叫做 Hooks，它可以让我们在不编写 class 组件的情况下使用 React 的特性。Hooks 可以让函数组件拥有状态和生命周期方法，这样可以更方便地管理状态和副作用。

1. 基本用法

1.1 useState

useState 是 React 提供的一个钩子函数，作用是定义一个状态和改变该状态的函数。

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
}

在上面的例子中，useState(0) 定义了一个名为 count 的状态，初始值为 0，并且返回了一个数组，其中第一个元素是当前的状态值，第二个元素是更新状态的函数。通过调用 setCount 函数来更新状态值 count。

1.2 useEffect

useEffect 是 React 提供的另一个钩子函数，作用是在组件渲染之后执行副作用操作。

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

function Counter() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
}

在上面的例子中，通过在 useEffect 中传递一个函数，该函数将在组件渲染之后执行。第二个参数是一个数组，用于指定需要监视的状态，当所依赖的状态发生变化时，副作用操作将被重新执行。

2. 自定义 Hook

除了使用 React 提供的钩子函数外，我们还可以自定义钩子函数来重用一些逻辑。

import { useState, useEffect } from "react";

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => {
      setWidth(window.innerWidth);
    };

    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  return width;
}

function App() {
  const width = useWindowWidth();

  return <p>Window Width: {width}</p>;
}

在上面的示例中，我们定义了一个名为 useWindowWidth 的自定义钩子函数。它通过 useState 定义了一个名为 width 的状态，并在 useEffect 中监听窗口大小变化，根据变化来更新 width 的值。

3. 使用规范

在使用 Hooks 时，需要遵守一些规范：

只在 React 函数组件内使用 Hooks，不要在循环、条件语句或嵌套函数中使用。
Hooks 的调用顺序必须保持一致，不要在判断语句中使用 Hooks。
自定义的 Hooks 必须以 "use" 开头，这样可以方便其他开发者识别该函数是一个钩子函数。

结论

React Hooks 是一项非常强大的功能，可以让我们更方便地编写函数组件并管理状态和副作用。通过使用 useState 和 useEffect 可以实现基本的状态管理和副作用操作，同时还可以自定义钩子函数来复用逻辑。当使用 Hooks 时，需要遵守一些规范以保证代码的可读性和一致性。

希望本篇博客对你理解并使用 React Hooks 有所帮助！

本文来自极简博客，作者：雨后彩虹，转载请注明原文链接：React Hooks 使用指南