React 新旧 Context 对比：更优雅、更简单的状态管理

前端

2023-10-23 04:06:18

从 Redux 到 Context API

在 React 生态系统中，Redux 一直是状态管理的霸主，但随着 React Hooks 的出现，Context API 逐渐成为管理状态的首选方案。

Redux 的局限性

Redux 虽然强大，但也有其局限性：

学习曲线陡峭： Redux 的学习曲线陡峭，新手往往需要花费大量时间才能掌握其核心概念。
样板代码较多： Redux 需要编写大量样板代码，包括 actions、reducers、store 等，这增加了代码的复杂性。
与 React 耦合紧密： Redux 与 React 耦合紧密，这使得它难以在其他前端框架中使用。

Context API 的优势

与 Redux 相比，Context API 具有以下优势：

学习曲线平缓： Context API 的学习曲线平缓，新手可以轻松掌握其核心概念。
代码更简洁： Context API 的代码更简洁，可以减少样板代码的数量，提高代码的可读性和可维护性。
与 React 解耦： Context API 与 React 解耦，这使得它可以轻松在其他前端框架中使用。

旧版 Context API vs. 新版 Context API

React 的 Context API 经过了多次迭代，新版 Context API 在许多方面都比旧版 Context API 更加强大和易用。

旧版 Context API 的局限性

旧版 Context API 存在以下局限性：

不支持组件订阅： 旧版 Context API 不支持组件订阅，这使得组件无法监听 Context 值的变化。
使用起来比较复杂： 旧版 Context API 使用起来比较复杂，需要手动传递 Context 值和函数。

新版 Context API 的优势

新版 Context API 解决了旧版 Context API 的局限性，并提供了以下优势：

支持组件订阅： 新版 Context API 支持组件订阅，这使得组件可以轻松监听 Context 值的变化。
使用起来更简单： 新版 Context API 使用起来更简单，可以自动传递 Context 值和函数。
提供更多的特性： 新版 Context API 提供了更多的特性，例如 ContextType、useContext 和 useContextSelector 等，这些特性可以帮助开发者更轻松地管理状态。

新版 Context API 的使用示例

创建 Context

要创建一个 Context，可以使用 createContext() 函数。该函数接受一个默认值作为参数，该默认值将在 Context 值为 undefined 时使用。

const MyContext = createContext(null);

使用 Context

要使用 Context，可以将它作为参数传递给组件。组件可以通过 useContext() 钩子访问 Context 值。

const MyComponent = () => {
  const value = useContext(MyContext);

  return <div>{value}</div>;
};

更新 Context 值

要更新 Context 值，可以使用 useState() 钩子。

const MyComponent = () => {
  const [value, setValue] = useState(0);

  return (
    <MyContext.Provider value={value}>
      <div>
        <button onClick={() => setValue(value + 1)}>+</button>
        <div>{value}</div>
      </div>
    </MyContext.Provider>
  );
};