ReactContext的封装思路-五八三

写在最前

看官们好，我叫JetTsang，之前都是在掘金潜水来着，现在偶尔做一些内容输出吧。

引出

在React当中，做全局状态管理可能一般会想到Redux、Recoil、Zustand之类专门用于状态管理的库。毫无疑问，他们都有着强大的功能和设计思想，能满足复杂场景的需求。

但如果是简单的场景，完全可以使用React原生自带的context来作为一种轻量级的替代方案。

下面就context来实现一种封装

实现

通常的话都是这么去使用

但这种代码组织的可维护性、可复用性会稍差一些

我们可以考虑将共享数据和相关逻辑隔离到一个独立的Provider组件中，在需要引入的时候去引入。

可以这样

// context.jsx


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


// 创建自定义的Context对象
const MyContext = createContext();

// 创建Context Provider组件
const MyContextProvider = ({ children }) => {
  // 在Provider组件中管理共享数据和相关逻辑
  const [data, setData] = useState('Default Value');


  const updateData = (newValue) => {
    setData(newValue);
  };

  // 将共享数据和方法通过value属性传递给Provider组件的子组件
  return (
    <MyContext.Provider value={{ data, updateData }}>
      {children}
    </MyContext.Provider>
  );
};

export { MyContext, MyContextProvider };

使用的时候,先提供

import { MyContextProvider } from './context'


// 其他逻辑...


root.render(
    <>
        <MyContextProvider>
            <App>
        </MyContextProvider>
    </>
)

在组件内使用

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

const SomeComponent = () => { 
    const { data, updateData } = useContext(MyContext); 
        return ( 
        <div>
            <p>Data: {data}</p>
            <button onClick={() => updateData('New Value')}>Update Data</button>
        </div>
    ); 
}; 
export default SomeComponent;