React中的数据流管理

zhidao

我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。

本文作者：霜序

前言

💡 为什么数据流管理重要？
React 的核心思想为：UI=render(data) ，data 就是所谓的数据，render 是 React 提供的纯函数，所以 UI 展示完全由数据层决定。

在本文中，会简单介绍 React 中的数据流管理，从自身的 context 到三方库的 redux 的相关概念，以及 redux 附属内容丐版实现。
在正文之前，先简单介绍数据和状态的概念。React 是利用可复用的组件来构建界面，组件本质上是有限状态机，能够记住当前组件的状态，根据不同的状态变化做出相关的操作。在React中，把这种状态定义为 state 。通过管理状态来实现对组件的管理，当 state 发生改变时，React 会自动去执行相应的操作。
而数据，它不仅指 server 层返回给前端的数据，React 中的状态也是一种数据。当数据改变时，我们需要改变状态去引发界面的变更。
React自身的数据流方案

基于Props的单向数据流

React 是自上而下的单向数据流，容器组件&展示组件是最常见的 React 组件设计方案。容器组件负责处理复杂的业务逻辑和数据，展示组件负责处理 UI 层。通常我们会把展示组件抽出来复用或者组件库的封装，容器组件自身通过 state 来管理状态，setState 更新状态，从而更新 UI ，通过 props 将自身的 state 传递给展示组件实现通信

对于简单的通信，基于 props 串联父子和兄弟组件是很灵活的。
但对于嵌套深数据流组件，A→B→C→D→E，A 的数据需要传递给 E 使用，那么我们需要在 B/C/D 的 props 都加上该数据，导致最为中间组件的 B/C/D 来说会引入一些不属于自己的属性
使用 Context API 维护全局状态

Context API 是 React 官方提供的一种组件树全局通信方式
Context 基于生产者-消费者模式，对应 React 中的三个概念:  React.createContext 、 Provider、 Consumer 。通过调用 createContext 创建出一组 Provider 。Provider 作为数据的提供方，可以将数据下发给自身组件树中的任意层级的 Consumer ，而 Consumer 不仅能够读取到 Provider 下发的数据还能读取到这些数据后续的更新值
const defaultValue = {  count: 0,  increment: () => {}};const ValueContext = React.createContext(defaultValue);<ValueContext.Provider value={this.state.contextState}>  <div className="App">    <div>Count: {count}</div>    <ButtonContainer />    <ValueContainer />  </div></ValueContext.Provider><ValueContext.Consumer>  {({ increment }) => (    <button onClick={increment} className="button">increment</button>  )}</ValueContext.Consumer>16.3之前的用法，16.3之后的createContext用法，useContext用法
Context工作流的简单图解：

在 v16.3 之前由于各种局限性不被推荐使用

• 代码不够简单优雅：生产者需要定义 childContextTypes 和 getChildContext ，消费者需要定义 ChildTypes 才能够访问 this.context 访问到生产者提供的数据
  
• 数据无法及时同步：类组件中可以使用 shouldComponentUpdate 返回 false 或者是 PureComponent ，后代组件都不会被更新，这违背了 Context 模式的设置，导致生产者和消费者之间不能及时同步
  

在 v16.3 之后的版本中做了对应的调整，即使组件的 shouldComponentUpdate 返回 false ，它仍然可以”穿透”组件继续向后代组件进行传播，更改了声明方式变得更加语义化，使得 Context 成为了一种可行的通信方案
但是 Context 的也是通过一个容器组件来管理状态的，但是 Consumer 和 Provider 是一一对应的，在项目复杂度高的时候，可能会出现多个 Provider 和Consumer ，甚至一个 Consumer 需要对应多个 Provider 的情况
当某个组件的业务逻辑变得非常复杂时，代码会越写越多，因为我们只能够在组件内部去控制数据流，这样导致 Model 和 View 都在 View 层，业务逻辑和 UI 实现都在一块，难以维护
所以这个时候需要真正的数据流管理工具，从 UI 层完全抽离出来，只负责管理数据，让 React 只专注于 View 层的绘制
Redux

Redux 是 JS应用 的状态容器，提供可预测的状态管理
Redux 的三大原则

• 单一数据源：整个应用的 state 都存储在一棵树上，并且这棵状态树只存在于唯一的 store 中
  
• state 是只读的：对 state 的修改只有触发 action
  
• 用纯函数执行修改：reducer 根据旧状态和传进来的 action 来生成一个新的 state (类似于 reduce 的思想，接受上一个 state 和当前项 action ，计算出来一个新值)
  

Redux工作流

不可变性( Immutability )
mutable 意为可改变的，immutability 意为用不可改变的
在JS的对象( object )和数组( array )默认都是 mutable，创建一个对象/数组都是可以改变内容
const obj = { name: 'FBB', age: 20 };obj.name = 'shuangxu';const arr = [1,2,3];arr[1] = 6;arr.push('change');改变对象或者数组，内存中的引用地址尚未改变，但是内容已经改变
如果想用不可变的方式来更新，代码必须复制原来的对象/数组，更新它的复制体
const obj = { info: { name: 'FBB', age: 20 }, phone: '177xxx' }const cloneObj = { ...obj, info: { name: 'shuangxu' } }//浅拷贝、深拷贝Redux期望所有的状态都采用不可变的方式。
react-redux

react-redux 是 Redux 提供的 react 绑定，辅助在 react 项目中使用 redux
它的 API 简单，包括一个组件 Provider 和一个高阶函数 connect
Provider

❓为什么 Provider 只传递一个 store ，被它包裹的组件都能够访问到 store 的数据呢？
Provider 做了些啥？

• 创建一个 contextValue 包含 redux 传入的 store 和根据 store 创建出的 subscription ，发布订阅均为 subscription 做的
  
• 通过 context 上下文把contextValue传递子组件
  

Connect

❓connect 做了什么事情讷？
使用容器组件通过 context 提供的 store ，并将 mapStateToProps 和 mapDispatchToProps 返回的 state 和 dispatch 传递给 UI 组件
组件依赖 redux 的 state ，映射到容器组件的 props 中，state 改变时触发容器组件的 props 的改变，触发容器组件组件更新视图
const enhancer = connect(mapStateToProps, mapDispatchToProps)enhancer(Component)react-redux丐版实现

Provider
export const Provider = (props) => {  const { store, children, context } = props;  const contextValue = { store };  const Context = context || ReactReduxContext;  return <Context.Provider value={contextValue}>{children}</Context.Provider>};connect
import { useContext, useReducer } from "react";import { ReactReduxContext } from "./ReactReduxContext";export const connect = (mapStateToProps, mapDispatchToProps) => (  WrappedComponent) => (props) => {  const { ...wrapperProps } = props;  const context = useContext(ReactReduxContext);  const { store } = context; // 解构出store  const state = store.getState(); // 拿到state  //使用useReducer得到一个强制更新函数  const [, forceComponentUpdateDispatch] = useReducer((count) => count + 1, 0);  // 订阅state的变化，当state变化的时候执行回调  store.subscribe(() => {    forceComponentUpdateDispatch();  });  // 执行mapStateToProps和mapDispatchToProps  const stateProps = mapStateToProps?.(state);  const dispatchProps = mapDispatchToProps?.(store.dispatch);  // 组装最终的props  const actualChildProps = Object.assign(    {},    stateProps,    dispatchProps,    wrapperProps  );  return <WrappedComponent {...actualChildProps} />;};redux Middleware

“It provides a third-party extension point between dispatching an action, and the moment it reaches the reducer.” – Dan Abramov

middleware 提供分类处理 action 的机会，在 middleware 中可以检查每一个 action ，挑选出特定类型的 action 做对应操作

middleware示例
打印日志
store.dispatch = (action) => {  console.log("this state", store.getState());  console.log(action);  next(action);  console.log("next state", store.getState());};监控错误
store.dispatch = (action) => {  try {    next(action);  } catch (err) {    console.log("catch---", err);  }};二者合二为一
store.dispatch = (action) => {  try {    console.log("this state", store.getState());    console.log(action);    next(action);    console.log("next state", store.getState());  } catch (err) {    console.log("catch---", err);  }};提取 loggerMiddleware/catchMiddleware
const loggerMiddleware = (action) => {  console.log("this state", store.getState());  console.log("action", action);  next(action);  console.log("next state", store.getState());};const catchMiddleware = (action) => {  try {    loggerMiddleware(action);  } catch (err) {    console.error("错误报告: ", err);  }};store.dispatch = catchMiddlewarecatchMiddleware 中都写死了，调用 loggerMiddleware ，loggerMiddleware 中写死了 next(store.dispatch) ，需要灵活运用，让 middleware 接受 dispatch 参数
const loggerMiddleware = (next) => (action) => {  console.log("this state", store.getState());  console.log("action", action);  next(action);  console.log("next state", store.getState());};const catchMiddleware = (next) => (action) => {  try {    /*loggerMiddleware(action);*/    next(action);  } catch (err) {    console.error("错误报告: ", err);  }};/*loggerMiddleware 变成参数传进去*/store.dispatch = catchMiddleware(loggerMiddleware(next));middleware中接受一个store，就能够把上面的方法提取到单独的函数文件中
export const catchMiddleware = (store) => (next) => (action) => {  try {    next(action);  } catch (err) {    console.error("错误报告: ", err);  }};export const loggerMiddleware = (store) => (next) => (action) => {  console.log("this state", store.getState());  console.log("action", action);  next(action);  console.log("next state", store.getState());};const logger = loggerMiddleware(store);const exception = catchMiddleware(store);store.dispatch = exception(logger(next));每个 middleware 都需要接受 store 参数，继续优化这个调用函数
export const applyMiddleware = (middlewares) => {  return (oldCreateStore) => {    return (reducer, initState) => {      //获得老的store      const store = oldCreateStore(reducer, initState);      //[catch, logger]      const chain = middlewares.map((middleware) => middleware(store));      let oldDispatch = store.dispatch;      chain        .reverse()        .forEach((middleware) => (oldDispatch = middleware(oldDispatch)));      store.dispatch = oldDispatch;      return store;    };  };};const newStore = applyMiddleware([catchMiddleware, loggerMiddleware])(  createStore)(rootReducer);Redux 提供了 applyMiddleware 来加载 middleware ，applyMiddleware 接受三个参数，middlewares 数组 / redux 的 createStore / reducer
export default function applyMiddleware(...middlewares) {  return createStore => (reducer, ...args) => {    //由createStore和reducer创建store    const store = createStore(reducer, ...args)     let dispatch = store.dispatch    var middlewareAPI = {      getState: store.getState,      dispatch: (action, ...args) => dispatch(action, ...args)    }    //把getState/dispatch传给middleware，    //map让每个middleware获得了middlewareAPI参数    //形成一个chain匿名函数数组[f1,f2,f3...fn]    const chain = middlewares.map(middleware => middleware(middlewareAPI))    //dispatch=f1(f2(f3(store.dispatch)))，把所有  的middleware串联起来    dispatch = compose(...chain)(store.dispatch)    return {      ...store,      dispatch    }  }}applyMiddleware 符合洋葱模型

总结

本文意在讲解 react 的数据流管理。从 react 本身的提供的数据流方式出发

• 基于 props 的单向数据流，串联父子和兄弟组件非常灵活，但是对于嵌套过深的组件，会使得中间组件都加上不需要的 props 数据
  
• 使用 Context 维护全局状态，介绍了 v16.3 之前、v16.3之后的hooks ，不同版本 context 的使用，以及 v16.3 之前版本的 context 的弊端。
  
• 引入 redux ，第三方的状态容器，以及 react-redux API ( Provider/connect )分析与丐版实现，最后介绍了 redux 强大的中间件是如何重写 dispatch 方法
  

参考连接

• 对 React 状态管理的理解及方案对比
  
• 聊一聊我对 React Context 的理解以及应用
  
• redux middleware 详解
  
• 手写 react-redux
  

最后

欢迎关注【袋鼠云数栈UED团队】~
袋鼠云数栈 UED 团队持续为广大开发者分享技术成果，相继参与开源了欢迎 star

• 大数据分布式任务调度系统——Taier
  
• 轻量级的 Web IDE UI 框架——Molecule
  
• 针对大数据领域的 SQL Parser 项目——dt-sql-parser
  
• 袋鼠云数栈前端团队代码评审工程实践文档——code-review-practices
  
• 一个速度更快、配置更灵活、使用更简单的模块打包器——ko
  
• 一个针对 antd 的组件测试工具库——ant-design-testing