在前端应用的开发过程中，对于规模较小、各个模块间依赖较少的项目，一般不会引入复杂的状态管理工具。

但实际上，业务的发展和变化很快，随着我们项目在不断地变大、各个页面中需要共享和通信的内容越来越多，与此同时项目也加入了新成员、不同开发的习惯不一致，项目到后期可能会出现事件的传递和全局数据满天飞的情况。

  • （一般使用）React 组件自带的 state 状态、通过 props 父组件向子组件传递数据
  • （解决兄弟组件间通信 => 不同地方的使用相同数据）简单的可使用状态提升 + 复杂一些需要考虑全局状态管理方案（Context API、Redux/dva、mobx、recoil）

一、复杂度不高项目

建议使用 Context API

1、常规用法

  1. import React from 'react'
  3. const MyContext = React.createContext({})
  5. // 根组件
  6. const APP = (props) => {
  7.       const [val, setVal] = useState({ text: 'world' })
  9.     // provider 的 value 不要直接写成 value={{text: 'world'}} 这种形式
  10.     // 因为这样写的话，APP 组件每次重新渲染后，Provider 的 value 会赋上新的值
  11.     // 导致所有消费该 context 的子组件重新渲染
  12.     return (
  13.             <MyContext.Provider value={val}>
  14.                   {props.children}
  15.           <MyContext.Provider/>
  16.     )
  17. }
  19. // 消费 context 的子组件
  20. const SubComponent (props) {
  22.     return (
  23.             <MyContext.Consumer>
  24.                 {val => <p>hello {val.text}</p>}
  25.              </MyContext.Consumer>
  26.     )
  27. }

2、使用 Hooks 优化

  1. import React, {useContext} from 'react'
  3. const MyContext = React.createContext({})
  5. // 根组件
  6. const APP = (props) => {
  7.       const [val, setVal] = useState({ text: 'world' })
  9.     return (
  10.             <MyContext.Provider value={val}>
  11.                   {props.children}
  12.           <MyContext.Provider/>
  13.     )
  14. }
  16. // 消费 context 的子组件
  17. const SubComponent (props) {
  18.     const {text} = useContext(Context)
  20.     return (
  21.             <p>hello {text}</p>
  22.     )
  23. }

3、整体案例

3.1 model

model 层中包括状态、状态变更方法、异步请求方法等

  1. // useCounter.js
  2. import {useState, useCallback, createContext} from 'react';
  4. export const Counter = createContext(0);
  6. export const useCounter = () => {
  7.     const [count, setCount] = useState(0);
  9.       // 无副作用方法
  10.     const decrement = useCallback(() => setCount(count - 1), [count]);
  11.     const increment = useCallback(() => setCount(count + 1), [count]);
  13.       // 副作用方法
  14.     const fetchCount = useCallback(async () => {
  15.         // 一些数据处理
  16.         try {
  17.             // 方式一：封装统一 request 方法，service/api 中 url 加上标识
  18.             const res = await request(fetchCountFunc, params);
  20.               // 方式二：使用集成好的方法
  21.             const res = await get('/api/get', params);
  22.             const res = await post('/api/add', params);
  23.             setCount(res)
  24.         } catch (e) {
  25.             // ...
  26.         }
  27.     }, []);
  29.     return {count, decrement, increment, fetchCount};
  30. };

其中 api 和统一请求方法相关的定义，可以写在 service 文件下

  1. // service/api.js
  2. export const api = {
  3.       counter: {
  4.                fetchCountFunc: '/api/fetchCount', // get 请求
  5.             add: '/api/add?1', // post 请求
  6.             update: '/api/update?2', // patch 请求
  7.             del: '/api/del?3' // delete 请求
  8.       }
  9. }
  1. // service/index.js
  2. import { api } from './api'
  3. import { request } from './request'
  5. // 该枚举为 service/api.js 中 url 后的标识，定义是属于哪种请求
  6. enum METHOD {
  7.     GET,
  8.     POST,
  9.     PATCH,
  10.     DELETE,
  11.     PUT,
  12.     HEAD
  13. }
  15. const gen = (url) => {
  16.     let method = Method[Method.GET]; // 默认get
  17.     const s = url.split('?');
  18.     if (s.length > 1) {
  19.         method = Method[Number(s[1])];
  20.     }
  21.     return (data, options = {}) => {
  22.         url = s[0];
  23.         // 支持拼接url
  24.         const { path, isBlob = false, headers = {} } = options;
  25.         if (path) {
  26.             if (Array.isArray(path)) {
  27.                 url += path.reduce((prev, cur) => `${prev}/${cur}`, '');
  28.             } else {
  29.                 url += `/${path}`;
  30.             }
  31.         }
  32.         return request({
  33.             url,
  34.             data,
  35.             method,
  36.             headers,
  37.             responseType: isBlob ? 'blob' : undefined,
  38.         });
  39.     }
  40. };
  42. // 缓存命名空间下的 apiFunc
  43. const cacheApiFunc = {};
  45. const createApiFunc = (namespace) => {
  46.     if (cacheApiFunc[namespace]) { return cacheApiFunc[namespace] };
  47.     if (!api[namespace]) { return {} };
  48.     const funcs = {};
  49.     const obj = api[namespace];
  50.     for (const i of Object.keys(obj)) {
  51.         funcs[i] = gen(`${obj[i]}`);
  52.     }
  53.     cacheApiFunc[namespace] = funcs;
  54.     return funcs;
  55. };
  57. export default createApiFunc;
  1. // service/request.js
  3. // 统一请求方法
  4. export const request = (url, params, ...opt) => {
  5.     // ...
  6. }

3.2 view

  1. function App() {
  2.       let counter = useCounter();
  3.       return (
  4.             <Counter.Provider value={counter}>
  5.               <CounterDisplay />
  6.                <CounterDisplay />
  7.          </Counter.Provider>
  8.   )
  9. }
  11. function CounterDisplay() {
  12.       let {count, decrement, increment, fetchCount} = useContext(Counter);
  14.       useEffect(() => {
  15.             fetchCount()
  16.     }, [])
  18.       return (
  19.             <div>
  20.                   <button onClick={decrement}>-</button>
  21.                   <p>You clicked {count} times</p>
  22.                   <button onClick={]increment}>+</button>
  23.           </div>
  24.   )
  25. }

4、问题

  • Provider 中的 value 是可变的，即该模块的 store 是可变的，会导致消费 context 的子组件re-render

若保持 store 不变，则子组件不会自动触发 re-render。需要使用类似 redux 中的 useSelector 方法，在 hooks 中进行处理，判断子组件中使用的状态是否变化，来做到局部 re-render

  • 仅在某个组件发起的请求，为了逻辑写法清晰，是否也统一在该 model 中维护？

二、单向数据流

1. Redux

Redux 核心概念及数据流转如下图，具体结构可参看 demo
image.png

2. dva

  • dva 准确点说应该是一个轻量级的应用框架，可理解为是 react-router + redux + redux-saga
  • dva 核心概念及数据流转如下图，具体结构可参看 demo

image.png
数据流向：通过 dispatch 发起一个 action，如果是同步行为会直接通过 Reducers 改变 State ，如果是异步行为（副作用）会先触发 Effects 然后流向 Reducers 最终改变 State

其中：

  • State：表示 Model 的状态数据
  • Action: 改变 State 的唯一途径，通过 dispatch 触发
  • Reducer：一个纯函数，返回 state 处理后的结果
  • Effect：副作用操作，如异步操作
  • Subscriptions：订阅一个数据源，根据条件触发 action。数据源可以是当前的时间、服务器的

websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等

例子：

2.1 Model

  1. // model.js
  2. export default {
  3.     namespace: 'counter',
  4.     state: {
  5.         count: 0,
  6.     },
  7.     effects: {
  8.         * fetchCount({payload}, {select, call, put}) {
  9.                 const res = yield call(fetchCountFunc);
  10.               if (res && res.success) {
  11.                     yield put({type: 'updateCount', payload: {count: res.count}});
  12.             }
  13.         },
  14.     },
  15.     reducers: {
  16.         increment(state, action) {
  17.             return {...state, count: state.count + 1};
  18.         },
  19.           decrement(state, action) {
  20.             return {...state, count: state.count - 1};
  21.         },
  22.           updateCount(state, action) {
  23.               const {count} = action.payload
  24.                 return {...state, count}
  25.         }
  26.     },
  27.     subscriptions: {
  28.         setup({dispatch, history}) {
  29.             history.listen(location => {
  30.                 if (location.pathname === '/url') {}
  31.             });
  32.         },
  33.     },
  34. };

2.2 View

  1. // view.js
  2. import {useSelector, useDispatch} from 'react-redux';
  4. const namespace = 'Counter';
  5. const App = (props) => {
  6.   const count = useSelector(_ => _.[namespace].count);
  7.   const dispatch = useDispatch();
  9.   useEffect(() => {
  10.         dispatch({type: `${namespace}/fetchCount`});
  11.   }, [])
  13.   return (
  14.     <div>
  15.       <h2>{ props.count }</h2>
  16.       <button onClick={() => {dispatch({type: `${namespace}/increment`})}}>+</button>
  17.       <button onClick={() => {dispatch({type: `${namespace}/decrement`})}}>-</button>
  18.     </div>
  19.   );
  20. });

3.3 Register

需完成 Dva 实例注册，才能正常使用，注册过程如下：

  1. import countModel from './models/countModel'
  3. // 初始化
  4. const app = dva();
  6. // 注册 model
  7. app.model(countModel);
  9. // router 绑定 view
  10. app.router(() => <App />);
  12. // 启动 dva
  13. app.start('#root');

3. 自己撸一个纯净版（自定义 hooks + Context API）

～、～__～、～

三、双向数据绑定

1. mobx

四、原子状态

1. recoiljs

https://www.recoiljs.cn/
4fffeb5685a6a78ec87992726b88d402.png
【暂不考虑】需引入新的概念、API 太多、目前实践较少