React Hooks 是 React 16.8 引入的新特性，它让我们能在不编写 class 的情况下使用 state 以及其他的 React 特性。本文将深入探讨 Hooks 的核心概念和最佳实践。

什么是 Hooks?

Hooks 是一些可以让你在函数组件里"钩入" React state 及生命周期等特性的函数。它们不能在 class 组件中使用——这使得你不使用 class 也能使用 React。

为什么引入 Hooks?

Hook 解决了我们五年来编写和维护成千上万的组件时遇到的各种各样看起来不相关的问题。无论你正在学习 React，或每天使用它，或者更喜欢使用不同的库并希望了解 React 的最新发展方向，Hook 都能让你大显身手。

基础 Hooks

useState

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0);

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

useEffect

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

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

  // 相当于 componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    // 使用浏览器的 API 更新页面标题
    document.title = `You clicked ${count} times`;
  });

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

高级 Hooks

useContext

接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定。

useReducer

useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。

自定义 Hooks

通过自定义 Hook，可以将组件逻辑提取到可重用的函数中。自定义 Hook 是一个 JavaScript 函数，其名称以 "use" 开头，函数内部可以调用其他的 Hook。

最佳实践

• 只在最顶层使用 Hook。不要在循环、条件或嵌套函数中调用 Hook。
• 只在 React 函数中调用 Hook。不要在普通的 JavaScript 函数中调用 Hook。
• 使用 ESLint 插件来检查这些规则。

结论

Hooks 为 React 带来了更灵活和强大的功能，使得函数组件几乎可以完全替代 class 组件。通过合理使用 Hooks，我们可以写出更简洁、更易于维护的代码。