React Hooks 简介

React 是一款用于构建用户界面的 JavaScript 库。Hooks 是 React 16.8 版本引入的新特性，它可以让你在不编写 class 的情况下使用 state 和其他 React 特性。Hooks 使你能使用更多的 React 特性而无需编写 class 的代码。

为什么引入 Hooks？

在 React 之前，组件之间的状态共享和复用需要使用以下方式实现：

• High-order components (HOC)
• Render-props

虽然这些方式可以实现组件之间的状态共享，但是它们会导致代码的可读性和可维护性变差，同时也会导致无用的嵌套层级。Hooks 的引入使得状态共享和复用更加简单，易于阅读和维护。

如何使用 Hooks？

使用 Hooks 非常简单，只需要按以下步骤即可：

1. 导入所需的 Hook，如 useState、useEffect
2. 使用 Hook，获取 state 和 setState 或其他 React 特性

useState

useState 是最基本的 Hook 之一，它用于获取组件的 state 变量和更新 state 的函数。

import { useState } from 'react';

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

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

在上面的示例中，useState 返回一个数组，数组的第一个元素是 count，表示当前的 state；第二个元素是 setCount，表示更新 count 的函数。

useEffect

useEffect 用于在组件渲染后执行一些操作，例如请求数据、监听事件等。

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
    // 在组件销毁时清除 effect
    return () => {
      document.title = '';
    };
  }, [count]);

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

在上面的示例中，useEffect 接受两个参数：第一个参数是一个回调函数，它在组件渲染后执行；第二个参数是一个数组，它指定了当数组中的每个元素改变时，回调函数都会被重新执行。

总结

React Hooks 是一款便捷的状态管理工具，它使得开发者能够更方便地进行状态管理，有效地简化了组件之间的代码复用问题。如果还未使用 Hooks，不妨试试，它必定会给你带来意想不到的收获！