基于React Context实现一个简单的状态管理的示例代码

目录

前言封装一个父组件用来包裹其他子组件子组件如何获取数据呢

class Component 方式context.ConsumeruseContext

总结参考

前言

在大多数情况下，我们开发项目都需要一个状态管理，方便我们在全局共享状态库，在React生态里比较流行的几个库
redux、mobx、recoil
但是对于小项目，我们完全可以自己封装一个状态管理，减少一个包的安装就可以减小打包以后的项目体积。 主要分两步：

封装一个顶层组件提供数据子组件获取数据和更新数据

封装一个父组件用来包裹其他子组件

stores/index.js 文件中首先需要调用 createContext

1. export const MyContext = React.createContext({list: [], data: null, time: Date.now()});

复制代码

createContext 中的参数是默认值，只有当组件所处的树中没有匹配到 Provider 时，其参数才会生效。
每个 Context 对象都会返回一个 Provider React 组件，它允许消费组件订阅 context 的变化。
创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件，这个组件会从组件树中匹配离自身最近的Provider，并从中读取到当前的 context 值。
context 可以设置一个displayName 的属性， 可以方便在React DevTool 对该context调试。

1. MyContext.displayName = 'MyManagementDisplayName';

复制代码

Provider 接收一个 value 属性，传递给消费组件。 Context 能让你将这些数据向组件树下所有的组件进行“广播”，所有的组件都能访问到这些数据，也能访问到后续的数据更新。
这里我们封装一个父组件用来包裹其他子组件。

1. import { createContext, useReducer } from 'react';
3. // 纯函数reducer
4. function reducer(state, action) {
5.     // action包括 具体的类型type，
6.     // 除了 `type` 之外，action 对象的结构其实完全取决于你自己。
7.     // 这里使用了payload代表dipatch传过来的数据
8.     switch(action.type) {
9.         case 'list':
10.             return ({...state, list: action.payload});
11.         case 'data':
12.             return ({...state, data: action.payload});
13.         case 'time':
14.             return ({...state, time: action.payload});
15.         default:
16.             return state;
17.     }
18. }
19. const list = [{num: 0, key: 0}, {num: 1, key: 1}, {num: 2, key: 2}];
20. export const MyContext = createContext({list: [], data: null, time: Date.now()});
22. function ContextProvider({children}) {
23.     const [state, dispatch] = useReducer(
24.         reducer,
25.         {list: list, data: null, time: Date.now()}
26.     );
28.     const value = {
29.         state,
30.         dispatch
31.     }
32.     return <MyContext.Provider value={value}>
33.         {children}
34.     </MyContext.Provider>
35. }
37. export default ContextProvider;

复制代码

这里用到了useReducer， 用过redux的同学一定非常熟悉，这是因为redux的作者 dan abramov 加入了react开发团队， 是react的主要开发者。 第一个参数是一个处理数据的纯函数，第二个参数是 initialValue。 useReducer还有另一种用法可以接受函数作为第三个参数，可以惰性地创建初始 state，这不是本文的重点，感兴趣的同学可以自行查询文档学习。
在入口文件index.js中 用 ContextProvider 包裹 App 组件

1. import ReactDOM from 'react-dom';
2. import App from './App';
3. import './styles/index.less';
5. import ContextProvider from './stores';
6. ReactDOM.render(
7.     <ContextProvider><App /></ContextProvider>,
8.     document.getElementById('root')
9. );

复制代码

子组件如何获取数据呢

有3种方式

Class Component 内获取(本方法仅能订阅 1 个 context)context.ConsumeruseContext

class Component 方式

1. import {MyContext} from '@/store';
3. class MyClass extends React.Component {
4.   static contextType = MyContext;
5.   // 引入的MyContext 赋值给静态属性 contextType后，
6.   // React可以让你使用 `this.context` 来获取最近 Context 上的值。
7.   componentDidMount() {
8.     let value = this.context;
9.     /* 在组件挂载完成后，使用 MyContext 组件的值来执行一些有副作用的操作 */
10.   }
11.   componentDidUpdate() {
12.     let value = this.context;
13.     /* ... */
14.   }
15.   componentWillUnmount() {
16.     let value = this.context;
17.     /* ... */
18.   }
19.   render() {
20.     let value = this.context;
21.     /* 基于 MyContext 组件的值进行渲染 */
22.   }
23. }

复制代码

context.Consumer

1. <context.Consumer>
2.   {value => /* 基于 context 值进行渲染* /}
3. </context.Consumer>

复制代码

useContext

这是使用 hook 方式， 也是目前最流行的用法，后面的例子主要使用这个方式来演示。 因为我们要在很多需要全局状态的子组件使用，所以我们可以封装一下。
在 hooks/useStores.js

1. import {MyContext} from '@/stores';
2. import React from 'react';
4. // 封装代码以复用
5. const useStores = () => React.useContext(MyContext);
7. export default useStores;

复制代码

下面我们通过两个组件，分别演示 获取数据并展示 和 更新全局数据
views/footer/index.js
在此组件里获取全局数据并展示

1. import { useEffect } from 'react';
2. import useStores from '../../hooks/useStores';
4. function Footer() {
5.   const { state } = useStores();
6.   const { time, list } = state;
7.   useEffect(() => {
8.     console.log('Footer page rendered!!!')
9.   })
10.   return (
11.     <div style={{ height: 200 }}>
12.       <div>time now is {time}</div>
13.       <div>
14.         list is
15.         {list.map((item) => (
16.           <span
17.               style={{
18.                   background: 'pink',
19.                   padding: '0 10px',
20.                   border: '1px solid',
21.                   marginRight: '10px'
22.               }}
23.               key={item.key}
24.           >
25.               {item.num}
26.           </span>
27.         ))}
28.       </div>
29.     </div>
30.   );
31. }
33. export default Footer;

复制代码

views/header/index.js
我们在此组件里更新全局数据

1. import useStores from '../../hooks/useStores';
2. import { Link } from 'react-router-dom';
3. import { useEffect } from 'react';
5. function Header() {
6.   // 解构获取 dispatch 方法
7.   const { dispatch } = useStores();
8.   const handleList = () => {
9.     const payload = [...new Array(3)].map(() => {
10.       const key = Math.random();
11.       const num = Math.floor(key * 100);
12.       return ({
13.         key, num
14.       });
15.     })
16.     // 更新数据，订阅状态的组件都会获取更新通知并取到最新数据
17.     dispatch({ type: "list", payload });
18.   };
19.   return (
20.     <div style={{ height: 100 }}>
21.       <button onClick={() => dispatch({ type: 'time', payload: Date.now() })}>
22.         time
23.       </button>
24.       <button onClick={handleList}>list</button>
25.     </div>
26.   );
27. }
29. export default Header;

复制代码

点击 header 中的按钮，footer 里的 time list 都会响应改变，获取到最新的值并渲染展示。

总结

我们通过封装顶层组件提供全局数据，子组件获取和更新数据， 完全基于 React 实现了一个简单的状态管理。
当然 Context 是可以嵌套多层的,同学们可以自行尝试

参考

React ContextReact useReducer

到此这篇关于基于React Context实现一个简单的状态管理的示例代码的文章就介绍到这了,更多相关React Context状态管理内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持中国红客联盟！