React Hooks 入门指南#

React Hooks 是 React 16.8 引入的新特性，它允许你在不编写 class 组件的情况下使用 state 和其他 React 特性。Hooks 让函数组件拥有了类组件的能力，同时代码更加简洁和易于维护。

什么是 Hooks#

Hooks 是一些可以让你在函数组件里”钩入” React state 及生命周期等特性的函数。React 内置了一些常用的 Hooks，如 useState、useEffect、useContext 等。

useState Hook#

useState 是最常用的 Hook，用于在函数组件中添加 state。

1
import React, { useState } from 'react';
2

3
function Counter() {
4
  const [count, setCount] = useState(0);
5

6
  return (
7
    <div>
8
      <p>你点击了 {count} 次</p>
9
      <button onClick={() => setCount(count + 1)}>
10
        点击我
11
      </button>
12
    </div>
13
  );
14
}

useState 返回一个数组，第一个元素是当前的 state 值，第二个元素是更新该 state 的函数。

useEffect Hook#

useEffect 用于处理副作用操作，如数据获取、订阅、手动修改 DOM 等。

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

3
function UserProfile({ userId }) {
4
  const [user, setUser] = useState(null);
5

6
  useEffect(() => {
7
    fetchUser(userId).then(data => setUser(data));
8
  }, [userId]);
9

10
  if (!user) return <div>加载中...</div>;
11

12
  return <div>欢迎, {user.name}!</div>;
13
}

useEffect 接受两个参数：一个函数和一个依赖数组。当依赖数组中的值发生变化时，effect 会重新执行。

useContext Hook#

useContext 让你可以在函数组件中读取 context 的值，而无需使用 Consumer 组件。

1
import React, { useContext } from 'react';
2

3
const ThemeContext = React.createContext('light');
4

5
function Button() {
6
  const theme = useContext(ThemeContext);
7
  return <button className={theme}>点击我</button>;
8
}

自定义 Hooks#

你可以创建自己的 Hooks 来复用状态逻辑。

1
function useWindowSize() {
2
  const [size, setSize] = useState({
3
    width: window.innerWidth,
4
    height: window.innerHeight,
5
  });
6

7
  useEffect(() => {
8
    const handleResize = () => {
9
      setSize({
10
        width: window.innerWidth,
11
        height: window.innerHeight,
12
      });
13
    };
14

15
    window.addEventListener('resize', handleResize);
16
    return () => window.removeEventListener('resize', handleResize);
17
  }, []);
18

19
  return size;
20
}
21

22
function App() {
23
  const { width, height } = useWindowSize();
24
  return <div>窗口大小: {width} x {height}</div>;
25
}

Hooks 使用规则#

使用 Hooks 时需要遵循以下规则：

只在函数最外层调用 Hook：不要在循环、条件判断或者子函数中调用
只在 React 函数中调用 Hook：在 React 函数组件或自定义 Hook 中调用

1
// 错误示例
2
function BadExample() {
3
  if (condition) {
4
    const [count, setCount] = useState(0); // 不要在条件语句中使用
5
  }
6
}
7

8
// 正确示例
9
function GoodExample() {
10
  const [count, setCount] = useState(0);
11
  if (condition) {
12
    // 在这里使用 count
13
  }
14
}

总结#

React Hooks 为函数组件带来了强大的能力，让我们能够更优雅地编写 React 组件。掌握常用的 Hooks 和自定义 Hooks 的编写，将大大提升你的 React 开发效率。