充分利用 React Hooks：掌握 useContext、useReducer 和自定义 Hook

2023-12-30 22:03:07

在现代 Web 开发中，React Hooks 已成为提升应用程序性能和可维护性的关键技术。它们允许我们在函数组件中使用 state 和其他 React 功能，而无需编写类组件。在这篇文章中，我们将深入探讨三个重要的 React Hook：useContext、useReducer 和自定义 Hook，了解它们的工作原理、优势以及最佳实践。

useContext：共享状态而不必传递 Props

useContext Hook 用于在组件树的不同级别之间共享状态，而无需使用 Props 手动传递。它通过提供对 Context 对象的访问，而 Context 对象可以存储应用程序的全局状态。

// createContext 函数创建一个 Context 对象
const MyContext = React.createContext();

// 包裹在 MyContext 中的组件可以访问上下文值
const ChildComponent = () => {
  const context = useContext(MyContext);
  return <p>Current context value: {context.value}</p>;
};

useReducer：管理复杂状态

useReducer Hook 用于管理复杂的状态，其中状态更新的逻辑可能很复杂或涉及多个步骤。它接受一个 reducer 函数和一个初始 state，并返回一个状态值和一个 dispatch 函数来更新该状态。

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + 1 };
    case 'decrement':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

const CounterComponent = () => {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <>
      <p>Current count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </>
  );
};

自定义 Hook：复用和组织逻辑

自定义 Hook 允许我们将可重用的逻辑提取到单独的函数中，使我们可以在不同的组件中轻松复用它。它们使用 useCallback 或 useMemo Hook 来缓存结果，以提高性能。

const useMyCustomHook = (data) => {
  const processedData = processData(data);
  return processedData;
};

const MyComponent = () => {
  const processedData = useMyCustomHook(data);
  return <p>Processed data: {processedData}</p>;
};