React Hooks (如 useState, useEffect, useContext, useMemo, useCallback) 的作用和使用规则是什么？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众，掌声在哪里？

今天咱们聊聊 React Hooks，这玩意儿就像魔法棒，让你的函数组件也能拥有 state 和生命周期，简直是函数组件的福音！别担心，我会用最接地气的方式，保证你们听得懂，学得会。

Hooks 是什么？为什么要用 Hooks？

在 React Hooks 出现之前，如果组件需要管理 state 或者执行副作用操作（比如发送网络请求、操作 DOM），通常需要使用 Class 组件。但 Class 组件写起来比较繁琐，而且 this 的指向问题也经常让人头疼。

Hooks 的出现就是为了解决这些问题。它允许你在函数组件中使用 state 和其他 React 特性，让你的代码更简洁、更易读。

Hooks 的基本规则

在使用 Hooks 之前，务必牢记以下两条铁律，否则你的代码可能会出现意想不到的 bug：

只能在函数组件或自定义 Hooks 中调用 Hooks。 你不能在普通的 JavaScript 函数中使用 Hooks。
只能在 React 函数的最顶层调用 Hooks。 不要把 Hooks 放在循环、条件语句或嵌套函数中。

违反以上规则会导致 React 无法正确追踪 Hooks 的状态，从而导致程序崩溃或产生不可预测的行为。

常用 Hooks 详解

接下来，咱们逐个击破，详细讲解几个常用的 Hooks：

useState: 管理组件的状态。
useEffect: 处理副作用操作。
useContext: 访问 Context 对象。
useMemo: 缓存计算结果。
useCallback: 缓存函数。

1. useState：状态管理大师

useState 是最常用的 Hook 之一，它允许你在函数组件中添加 state。

import React, { useState } from 'react';

function Counter() {
  // 声明一个名为 count 的 state 变量，初始值为 0
  const [count, setCount] = useState(0);

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

解释：

useState(0)：初始化 state，参数 0 是 count 的初始值。
[count, setCount]：useState 返回一个数组，第一个元素 count 是当前 state 的值，第二个元素 setCount 是一个函数，用于更新 state。
setCount(count + 1)：调用 setCount 函数来更新 count 的值，React 会重新渲染组件。

useState 的进阶用法：使用函数更新 state

有时候，新的 state 依赖于之前的 state。在这种情况下，建议使用函数来更新 state：

import React, { useState } from 'react';

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

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

解释：

setCount(prevCount => prevCount + 1)：setCount 接收一个函数作为参数，这个函数接收之前的 state 值 prevCount，并返回新的 state 值。这样做的好处是，React 保证 prevCount 是最新的 state 值，即使在多次更新 state 的情况下也能正确计算。

2. useEffect：副作用处理专家

useEffect 允许你在函数组件中执行副作用操作，比如发送网络请求、操作 DOM、设置定时器等。

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>
  );
}

解释：

useEffect(() => { ... })：useEffect 接收一个函数作为参数，这个函数会在组件渲染完成后执行。
document.title = You clicked ${count} times“：这是一个副作用操作，它会更新文档的标题。
useEffect 默认情况下会在每次组件渲染后执行。

useEffect 的进阶用法：控制副作用的执行时机

有时候，你只想在特定的情况下执行副作用操作。你可以通过给 useEffect 传递第二个参数（一个数组）来控制副作用的执行时机。

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

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

  // 只有当 count 改变时，才会执行副作用
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]); // 只有 count 改变时，才会重新运行 effect

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
      <input value={name} onChange={e => setName(e.target.value)} />
    </div>
  );
}

解释：

useEffect(() => { ... }, [count])：第二个参数 [count] 表示只有当 count 的值发生改变时，才会重新执行副作用。
如果第二个参数是一个空数组 []，则副作用只会在组件挂载时执行一次，类似于 componentDidMount。
如果省略第二个参数，则副作用会在每次组件渲染后执行，类似于 componentDidMount 和 componentDidUpdate。

useEffect 的清理函数：告别内存泄漏

有些副作用操作需要在组件卸载时进行清理，比如取消订阅、清除定时器等。你可以在 useEffect 中返回一个清理函数，React 会在组件卸载时执行这个函数。

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

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

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    // 清理函数
    return () => {
      clearInterval(timer);
    };
  }, []); // 只在组件挂载时设置定时器

  return (
    <div>
      <p>You clicked {count} times</p>
    </div>
  );
}

解释：

return () => { clearInterval(timer); }：这是一个清理函数，它会在组件卸载时清除定时器，防止内存泄漏。

3. useContext：Context API 的好帮手

useContext 允许你在函数组件中访问 Context 对象，而无需使用 Consumer 组件。

首先，创建一个 Context 对象：

import React from 'react';

const ThemeContext = React.createContext('light'); // 默认值是 'light'

export default ThemeContext;

然后，在父组件中使用 Provider 组件提供 Context 值：

import React, { useState } from 'react';
import ThemeContext from './ThemeContext';
import ThemedButton from './ThemedButton';

function App() {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={theme}>
      <ThemedButton onClick={toggleTheme}>Toggle Theme</ThemedButton>
    </ThemeContext.Provider>
  );
}

export default App;

最后，在子组件中使用 useContext Hook 访问 Context 值：

import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';

function ThemedButton(props) {
  const theme = useContext(ThemeContext);

  return (
    <button
      {...props}
      style={{ backgroundColor: theme === 'light' ? '#fff' : '#000', color: theme === 'light' ? '#000' : '#fff' }}
    >
      {props.children}
    </button>
  );
}

export default ThemedButton;

解释：

const theme = useContext(ThemeContext)：useContext 接收一个 Context 对象作为参数，并返回当前 Context 值。
ThemedButton 组件可以访问 theme 值，并根据 theme 值来设置按钮的样式。

4. useMemo：性能优化利器

useMemo 允许你缓存计算结果，只有当依赖项发生改变时，才会重新计算。这可以避免不必要的计算，提高组件的性能。

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

function Example() {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);

  // 只有当 a 或 b 改变时，才会重新计算 result
  const result = useMemo(() => {
    console.log('Calculating result...');
    return a + b;
  }, [a, b]);

  return (
    <div>
      <p>a: {a}</p>
      <p>b: {b}</p>
      <p>Result: {result}</p>
      <button onClick={() => setA(a + 1)}>Increment a</button>
      <button onClick={() => setB(b + 1)}>Increment b</button>
    </div>
  );
}

解释：

useMemo(() => { ... }, [a, b])：useMemo 接收两个参数：
- 第一个参数是一个函数，用于计算结果。
- 第二个参数是一个依赖项数组，只有当依赖项发生改变时，才会重新计算结果。
如果依赖项数组为空 []，则只会在组件挂载时计算一次结果。

5. useCallback：函数缓存大师

useCallback 允许你缓存函数，只有当依赖项发生改变时，才会创建新的函数。这可以避免不必要的函数创建，提高组件的性能，尤其是在将函数作为 props 传递给子组件时。

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

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

  // 只有当 count 改变时，才会创建新的 increment 函数
  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, [count]);

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

function MyButton({ onClick }) {
  console.log('MyButton rendered');
  return <button onClick={onClick}>Increment</button>;
}

解释：

useCallback(() => { ... }, [count])：useCallback 接收两个参数：
- 第一个参数是一个函数，用于创建新的函数。
- 第二个参数是一个依赖项数组，只有当依赖项发生改变时，才会创建新的函数。
如果依赖项数组为空 []，则只会在组件挂载时创建一次函数。

自定义 Hooks：打造你的专属魔法棒

除了 React 提供的内置 Hooks，你还可以创建自定义 Hooks，将组件逻辑提取出来，提高代码的复用性。

import { useState, useEffect } from 'react';

// 自定义 Hook：useCounter
function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

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

  const decrement = () => {
    setCount(prevCount => prevCount - 1);
  };

  return {
    count,
    increment,
    decrement,
  };
}

export default useCounter;

使用自定义 Hook：

import React from 'react';
import useCounter from './useCounter';

function Example() {
  const { count, increment, decrement } = useCounter(10);

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

解释：

useCounter 是一个自定义 Hook，它封装了计数器的逻辑。
Example 组件可以使用 useCounter Hook 来获取计数器的状态和操作方法。

Hooks 的优势

更简洁的代码： 函数组件比 Class 组件更简洁，更容易阅读和维护。
更好的代码复用性： 自定义 Hooks 可以将组件逻辑提取出来，提高代码的复用性。
更容易测试： 函数组件比 Class 组件更容易测试。
避免 this 的困扰： 函数组件没有 this，避免了 this 指向问题。

Hooks 的注意事项

遵循 Hooks 的基本规则： 只能在函数组件或自定义 Hooks 中调用 Hooks，只能在 React 函数的最顶层调用 Hooks。
合理使用 useMemo 和 useCallback： 不要过度使用 useMemo 和 useCallback，只有在性能瓶颈出现时才考虑使用它们。
避免在 useEffect 中更新 state 导致无限循环： 如果需要在 useEffect 中更新 state，请确保更新条件能够终止循环。
注意清理副作用： 在 useEffect 中返回清理函数，防止内存泄漏。

总结

React Hooks 是一个强大的工具，它可以让你在函数组件中使用 state 和其他 React 特性，让你的代码更简洁、更易读、更易维护。掌握 Hooks 的使用，可以让你成为一名更优秀的 React 开发者。

表格总结:

Hook	作用	使用场景	依赖项	返回值
useState	管理组件的状态	任何需要存储和更新状态的组件	无	`[state, setState]`
useEffect	处理副作用操作 (例如数据获取, DOM 操作, 定时器等)	数据获取, 操作 DOM, 设置定时器, 订阅事件等	可选, 用于控制 effect 的执行时机	无
useContext	访问 Context 对象	需要访问共享状态的组件	无	Context 的当前值
useMemo	缓存计算结果	计算密集型操作, 避免不必要的重复计算	可选, 用于控制 memoized 值的更新时机	memoized 的值
useCallback	缓存函数	将函数作为 props 传递给子组件, 避免子组件不必要的重新渲染	可选, 用于控制 callback 函数的更新时机	memoized 的函数

希望今天的讲座对大家有所帮助，祝大家编码愉快！记住，实践是检验真理的唯一标准，多写代码，多尝试，才能真正掌握 Hooks 的使用。

各位，下课！

发表回复 取消回复

发表回复取消回复