常用 Hooks：useContext、useReducer、useMemo 等

在 React 中，除了常用的 useState 和 useEffect，还有一些非常实用的内置 Hooks，如 useContext、useReducer 和 useMemo。这些 Hooks 可以帮助我们更好地管理状态、优化性能以及处理复杂的逻辑。

本章将介绍这些常用的 React Hooks，帮助你在开发中高效地使用它们。

1. useContext

useContext 是 React 提供的用于访问上下文（Context）的 Hook。上下文通常用于跨组件传递数据，而不需要通过 props 一层层地传递。useContext 使得在组件树中任何地方都能轻松访问共享的数据。

1.1 基本语法

const contextValue = useContext(MyContext);

MyContext：传入你想要访问的上下文对象。 contextValue：返回上下文的当前值。

1.2 示例：使用 useContext 获取主题

首先，创建一个上下文：

import React, { createContext, useContext, useState } from 'react';

// 创建上下文
const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

然后在组件中使用 useContext 获取上下文的值：

function ThemeSwitcher() {
  const { theme, setTheme } = useContext(ThemeContext);

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

  return (
    <div>
      <p>Current theme: {theme}</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

export default ThemeSwitcher;

说明：

  • ThemeContext.Provider 提供了上下文值（theme 和 setTheme）。
  • useContext(ThemeContext) 在组件中访问上下文的值。

2. useReducer

useReducer 是 React 提供的用于管理复杂状态逻辑的 Hook，尤其是在组件的状态更新逻辑比较复杂时（例如多重依赖或多个状态值），useReducer 是一个更好的选择。它的工作原理与 Redux 相似，使用 reducer 来管理状态的更新。

2.1 基本语法

const [state, dispatch] = useReducer(reducer, initialState);
  • reducer：一个函数，接收当前的状态和一个 action，返回新的状态。
  • initialState：状态的初始值。
  • state：当前状态。
  • dispatch：用于发送动作（action）来更新状态。

2.2 示例：计数器管理

import React, { useReducer } from 'react';

// 定义 action 类型
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';

// 定义 reducer
function counterReducer(state, action) {
  switch (action.type) {
    case INCREMENT:
      return { count: state.count + 1 };
    case DECREMENT:
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: INCREMENT })}>Increment</button>
      <button onClick={() => dispatch({ type: DECREMENT })}>Decrement</button>
    </div>
  );
}

export default Counter;

说明：

  • counterReducer 是一个处理状态更新的 reducer 函数，它根据 action 的类型来修改状态。
  • dispatch 用于发送 action，useReducer 根据 action 更新状态。

2.3 使用场景

  • 当状态变化依赖于复杂的计算，或者需要根据多个条件更新时，useReducer 是一个比 useState 更合适的选择。
  • 比如在表单处理中，多个字段的更新逻辑可能比较复杂，使用 useReducer 可以让状态更新逻辑更加清晰和易于管理。

3. useMemo

useMemo 是 React 提供的优化性能的 Hook，它允许你缓存计算结果，避免不必要的重新计算。useMemo 会根据依赖数组的变化来重新计算值，只有在依赖项变化时才会重新计算，否则返回缓存的结果。

3.1 基本语法

const memoizedValue = useMemo(() => {
  // 计算值
}, [dependencies]);
  • memoizedValue：缓存的计算结果。
  • 第二个参数 [dependencies] 是依赖项数组，只有当依赖项变化时，useMemo 才会重新计算值。

3.2 示例：优化复杂计算

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

function ExpensiveComputation({ num }) {
  // 使用 useMemo 优化计算
  const computedValue = useMemo(() => {
    console.log('Computing...');
    return num * 2;
  }, [num]); // 仅当 num 变化时重新计算

  return <p>Computed Value: {computedValue}</p>;
}

function App() {
  const [num, setNum] = useState(1);

  return (
    <div>
      <ExpensiveComputation num={num} />
      <button onClick={() => setNum(num + 1)}>Increase</button>
    </div>
  );
}

export default App;

说明：

  • useMemo 确保了计算 num * 2 仅在 num 变化时才会发生。
  • 如果 num 没有变化，useMemo 会返回上一次计算的结果，从而避免不必要的重新计算，提高性能。

3.3 使用场景

  • 避免不必要的渲染：对于高开销的计算，使用 useMemo 可以避免每次渲染时都进行计算。
  • 避免不必要的引用变化：在传递对象或数组作为 prop 时，useMemo 可以确保对象引用在没有变化时不会发生变化，避免子组件的重新渲染。

4. 其他常用 Hooks

4.1 useCallback

useCallback 是用来缓存函数的引用，避免在每次渲染时都创建新的函数。它类似于 useMemo，但是它的返回值是一个函数。

const memoizedCallback = useCallback(() => {
  // 函数体
}, [dependencies]);

4.2 useRef

useRef 用来创建一个可变的引用对象，能够在组件渲染之间保持不变的值。它主要用于访问 DOM 元素或者存储不触发渲染的变量。

const myRef = useRef(initialValue);

5. 小结

  • useContext：用于跨组件传递共享数据，不需要逐层传递 props。
  • useReducer：用于处理复杂的状态逻辑，比 useState 更适用于多重依赖的场景。
  • useMemo：用于缓存计算结果，避免不必要的重新计算，从而提升性能。
  • useCallback 和 useRef 是其他优化性能和管理引用的常用 Hook。

掌握这些常用的 React Hooks，能够使你的代码更加简洁、可维护，并且在性能上也能得到优化。

Last Updated::