This site runs best with JavaScript enabled.

📦 实现一个简单朴素的 react 数据管理层 NOVUS


[原创]  最后编辑于：2020-02-07 22:50:20@code#整理#思考#功能#NOVUS#状态管理

!本篇文章过于久远，其中观点和内容可能已经不准确，请见谅!~

PS: 仓库和代码在最下面；
PS2: 后续出现了一些问题和痛点，做了很多的改进： 📦 改进一个简单朴素的 react 数据管理层 NOVUS，包括同步触发、初始化、自动依赖收集、“喘息机制”、Novus 版 Fiber 和测试，本篇重点说需求、基础功能和初步实现。
PS3: 前端项目中的数据层被造轮子无数，有很多优秀的库，大厂更不用说内部成熟的解决方案。这只是我在项目中实践的一个解决方案，仅供参考。
novus 单向数据流

一、为什么

在现代前端开发中，组件化、模块化的引入，状态与界面的分离，导致状态数据的共享和流转部分变得很重要，稍微复杂点的项目都需要抽象出一个数据层来负责数据的管理、变更和分发。
我在 talks 栏目中也简单说过： 数据层
尤其是 React、Vue 这类组件化开发框架，数据驱动的思想是基因里带的，但是自带的都是组件内部和之间的状态流转，如果需要全局的状态、跨组件的变更、多层级的状态共享，还是需要额外的状态管理，React 并没有在这个地方提供开箱即用的内置方案。
我们接触的概念比较多的有 Redux，Flux 的概念在前端开发的演进中占据着很重要的一个位置，另外还有 MobX，用不同的思路来处理数据和变更。
这类全局状态管理的理念能够将很复杂的应用架构拆分，在前面 🌋 WebIDE 的开发记录其二（核心架构） 文章中也说了这个事情，相比之前的状态管理分散的概念，将数据的流转拆分为全局的：触发动作、修改数据、变更通知。这样的独立的数据管理层控制的单向数据流转，保证每个节点都是接受数据更新，而不是一级一级传递，或者回调函数等，让动作、数据和界面拆分，方便更大型的架构扩展，而不用操心数据从哪来、怎么变更、怎么重绘组件的问题。
redux 的数据流转
redux 的数据流转
这种数据的管理模式在大型项目中非常有效，反正我目前在较大型的项目中都需要一个数据层的东西来管理数据的驱动、变更和分发。
然后索性一想，不如我也来造个轮子，一方面满足这个项目最后一块优雅的拼图，另一方面这块确实有些想法，也是时候将这些想法变成产出了。

二、Redux 非常优秀，但是...

redux 在前端开发中非常有效，而且 react、redux、react-redux 全家桶也很好用，一般的公司都会使用这个工具来管理前端的数据中心。这里也轮不到我来对这个优秀的工具评头品足的，真的非常优秀。
但是优秀的意思并不是适合每一个人和每一个项目，很多吐槽和讨论也充斥各大社区，比如比较多的：
  1. 概念太多
  • 加上副作用和胶水中间件处理就会有 store、states、action、reducer、dispatch、payload、immutable、take、put、call、connect、mapStateToProps、mapDispatchToProps 这些概念门槛会有劝退效应，想入门必须花时间学习和实践，虽然在数据管理中只要深入抽象，这些都会涉及，但是每个项目或者新人都会有很多的学习和适应成本。
  1. 模式代码
  • 洁癖的开发形式，每个状态的管理都要拆分到不同的文件或者逻辑中，函数式、不可变性的代价是繁琐的模式代码，状态小改一下都要改好几个文件，也因此几乎大型项目都会对这块进行封装，因为确实维护起来会很困难。好处是逻辑清晰，像是机房的数据线整理，绕了很多圈但是看起来很干净。
  1. 逻辑拆分
  • 编程很多人更喜欢的是相似的逻辑会放到一起聚合，而不是按照流程或者功能拆分，比如学生信息直觉应该放到一个抽象中，而不是查询和更改分开。逻辑上的抽象每个团队偏好不同，这里应该有不同的实践。
当然需求的取舍是一门艺术，不可能有一个版本能满足每一个项目需求，甲之蜜糖，乙之砒霜也是很自然的事情。比如上面的不方便的这种范式，对于调试、对于数据的同步和管理、对于服务端渲染、对于测试、对于项目数据初始化等却是相对优雅的实现。
Mobx 使用装饰器的语法实现了更加清爽的功能，也是很多人推崇的一个方案，我也很感兴趣，不过我可能对装饰器不太感冒，而且也没咋用过。
当然 redux 或者 mobx 也并没有一个官方的开发模式，更多的是一种理念，每个人都可以根据这个理念实现自己的工具，当然也包括我~~
技术发展到现在更是百花齐放，很早之前这些讨论就有很多： 阿里早期的讨论：MobX 和 Redux 的比较 对 antd 框架里的吐槽：忍不住吐槽一下Flux和Redux

三、目标和取舍

当时那个项目开发的时候直接用了封装比较好的 DvaJS 来做开发，很多方面已经改善了开发体验，可能自己用的是比较早期的版本，没有 TS 支持，仅考虑 DvaJS 有一些不顺手的地方：
  1. react-router 和 fetch 的内置并不需要
  2. redux 和 redux-saga 很多概念特性，put、call、payload、action、dispatch 等逻辑一个没少，而且没办法推断；
  3. action type 字符串或者常量类型，没办法代码提示，没办法推断；
  4. payload 作为参数，没办法代码提示，没办法推断；
  5. 继承自 redux-saga 的 Generator Iterator 的 effects，用到 yield * 异步处理方式。不习惯、不喜欢；
  6. 还想要一次数据结构定义关联的地方都能立刻反映出来而不是运行时连接。
因为这些原因，在后期全面转向 TypeScript 时，一直想把这块替换掉。
数据层的需求一般也很简单，还是类似 dva 集中组织数据的方式，但是不使用 redux 字符串模板的形式。就是能储存、能改变、能响应基本上就可以了，甚至可以简单理解为一个发布订阅系统。最基本的需求有：
  1. Model 数据源 state 按照逻辑集中数据，能定义 ts type
  2. 不追求绝对干净的方法改变 state，但是提供方便的习惯约定
  3. 不需要 devtool 管理历史，没有时间漫游的需求，也不刻意强调修改状态逻辑的干净、简单，所以不特意设置 reducer 概念，避免语法啰嗦（不强调协作+重放等场景）
  4. 不特意设置 reducer，但是仍然可以封装 setState 为纯函数的处理来实现 reducer 相似的功能，这里因为对数据的流转不刻意强调，所以不预设
  5. 不特意强调副作用，而强调 状态本身 和 修改状态的行为，纯函数会更好，但是我希望这是可选的，而不是用很奇怪的代码组织来区分和限制。
  6. 改动能订阅，状态本身 + 修改状态的行为 + 状态能被订阅
  7. 能通过 connect 或者 useHooks 方法使用和订阅数据的变化通知，从而渲染组件。
  8. 最大的驱动是能够用 ts 的类型限制和推断，自动提示数据的访问和 action 的参数和返回。
不特意强调副作用，而强调 状态本身、修改状态的行为 和 状态能被订阅，没有副作用的纯函数会更好，但是我希望这是可选的，而不是用很奇怪的代码组织来区分和限制。

四、实现

实现的时候甚至没有花太多精力，也很方便的替换掉了原来的数据管理层，现在用起来感觉清爽很多，也完全满足较大项目的使用，比如 🌋 WebIDE 的开发记录其一。
使用 novus 之后，状态的引入、动作的调用都有完整的代码提示，而且很自然的将 【数据状态】 和 【状态的改变行为】 区分，异步和同步的强调变为方法和赋值。
核心代码也就几十行，也可以看作是一个带有状态数据的订阅通知工具，主要是实现了完整的 TypeScript 支持，在具体使用的地方比较方便。
novus.tsx
class Novus {
  // 提供一个集中的聚合地方，这块可以不使用
  models: TModelsPool = {}
  // 用订阅通知的模式，简单实现数据变更通知，外部可以不关心
  private listeners: Map<string, [Function, string[]]> = new Map()
  // 绑定数据模型，集中管理数据模型
  bindModel(model: NovusBaseModel<any>): IDisposable {
    this.models[model.namespace] = model
    // ...
  }
  // 订阅器，订阅对应 model 改变的函数，外部可以不关心
  subscribe = (func: Function, deps: string[] = []): IDisposable => {
    // ...
    this.listeners.set(id, [func, deps])
    // ...
  }
  // 触发器，更新完数据仓之后必须触发才能通知 UI 变更
  notifyChangesListeners = (namespace?: string) => {
    this.listeners.forEach(v => {
      if (v[1].length === 0 || v[1].includes(namespace)) v[0]()
    })
  }
}
export const novus = new Novus()
/**
 * 一个基础的数据模型。用户可以继承此类后自己添加更新函数
 */
export class NovusBaseModel<S, A = {}> {
  // 唯一的命名空间
  namespace: string
  novus: Novus = novus
  // 数据仓由于继承后会 state 覆盖，所以子组件要显式指定类型
  state: Readonly<S>
  // 纯函数的数据更新函数，同步执行
  protected setState = <K extends keyof S>(state: Pick<S, K> | ((states: S) => Pick<S, K>)) => {
    if (typeof state === 'function') {
      const newState = state(this.state)
      this.state = {...this.state, ...newState}
    } else this.state = {...this.state, ...state}
    this.notifyChanges()
  }
  // 通知上层触发订阅的 connect 转换函数，每次修改 state 必须触发！！！
  protected notifyChanges = () => {
    novus.notifyChangesListeners(this.namespace)
  }
  // 数据更新的函数，相当于 effects 或者 reducers 的概念集合
  readonly actions: A
}
// 提供 hook 函数，在函数组件中非常简洁的使用
export const useNovus = function<T>(
  mapStatetoHooks: (models: TModelsPool, app: Novus) => T,
  deps?: string[],
): T {
  let [state, setState] = useState<T>(mapStatetoHooks(novus.models, novus))
  useEffect(() => {
    const dispose = novus.subscribe(() => {
      setState(mapStatetoHooks(novus.models, novus))
    }, deps)
    return dispose
  }, [])
  return state
}
Copy

五、代码和实例

源码：
NOVUS

📦 实现一个简单朴素的 react 数据管理层

或者直接在本文看，全部代码和实例如下：
实例



Hide Code
// novus.tsx
import React, {
  Component,
  ComponentClass,
  FunctionComponent,
  useState,
  useEffect,
  useRef,
} from 'react'
interface TModelsPool {
  [ind: string]: NovusBaseModel<any, any>
}
type IDisposable = () => void
type TElement<T> = string | ComponentClass<T, any> | FunctionComponent<T>
export type TConnectProps = {
  getModel: <K extends keyof TModelsPool>(name: K) => TModelsPool[K]
  getModels: () => TModelsPool
}
// simple polyfill for requestIdleCallback
const _requestIdleCallback =
  (window || (global as any)).requestIdleCallback || ((cb: Function) => setTimeout(cb, 1))
const _cancelIdleCallback =
  (window || (global as any)).cancelIdleCallback || ((id: number) => clearTimeout(id))
let subscribeIndex = 0
let idleHandler: number
class Novus {
  // 提供一个集中的聚合地方，这块可以不使用
  models: TModelsPool = {}
  // 用订阅通知的模式，简单实现数据变更通知，外部可以不关心
  listeners: Map<string, [Function, string[]]> = new Map() // private
  /**
   * 绑定数据模型，集中管理数据模型
   *
   * @param model 数据模型 NovusBaseModel
   */
  bindModel(model: NovusBaseModel<any>): IDisposable {
    if (this.models[model.namespace]) {
      console.error('sorry, you should bind with unque namespace!!')
      delete this.models[model.namespace]
    }
    model.novus = this
    this.models[model.namespace] = model
    return () => {
      delete this.models[model.namespace]
    }
  }
  /**
   * 订阅器，订阅对应 model 改变的函数，外部可以不关心
   *
   * @param func 订阅触发函数
   * @param deps 订阅的 model，仅订阅的 model 改变后才会触发函数
   *
   * @returns 返回取消订阅的函数
   */
  subscribe = (func: Function, deps: string[] = []): IDisposable => {
    if (deps.length == 0 || typeof deps === 'undefined')
      console.warn(
        "you didn't specify the dependency list, it works, but we recommend you fill a list to get a better performance",
      )
    const id = (subscribeIndex++).toString()
    this.listeners.set(id, [func, deps])
    return () => {
      this.listeners.delete(id)
    }
  }
  /**
   * 触发器，更新完数据仓之后必须触发才能通知 UI 变更
   *
   * @param namespace model 的命名空间 id，只会触发订阅对应 model 的 mapStatetoProps 函数。留空表示触发全部
   */
  notifyChangesListeners = (namespace?: string) => {
    this.listeners.forEach((v, key) => {
      if (typeof namespace === 'undefined' || v[1].length === 0 || v[1].includes(namespace)) {
        // 将需要通知的函数放进队列等待通知
        this.needNotifiedListeners.add(key)
      }
    })
    // 需要通知各个订阅了
    this.startNotifies()
  }
  needNotifiedListeners = new Set<string>([])
  startNotiTime: number
  startNotifies = () => {
    if (idleHandler) _cancelIdleCallback(idleHandler)
    // 执行之前先标记下时间
    this.startNotiTime = new Date().getTime()
    this.doTheNotifies()
  }
  /**
   * 确实去通知订阅的部分，根据不同的执行可能再不同的宏任务队列被执行
   */
  doTheNotifies = () => {
    if (this.needNotifiedListeners.size > 0) {
      const nextId = this.needNotifiedListeners.values().next().value
      this.needNotifiedListeners.delete(nextId)
      this.listeners.get(nextId)[0]()
      // 如果当前渲染的递归还有时间，继续，否则等待下一次宏任务
      if (new Date().getTime() - this.startNotiTime < 16) {
        this.doTheNotifies()
      } else {
        idleHandler = _requestIdleCallback(this.startNotifies)
      }
    }
  }
  connectProps = {
    getModel: <K extends keyof TModelsPool>(name: K): TModelsPool[K] => {
      return this.models[name]
    },
    getModels: (): TModelsPool => this.models,
  }
  /**
   * 将 models state 数据转换挂载到组件上，类似 react-redux 的 connect 功能，不推荐，但是支持
   *
   * @param Comp 要挂载的组件，props 需求有基础的和被 connected 的
   * @param mapStatetoProps 数据转换函数
   * @param deps 依赖的 models，不在这个数组的 models 改变不会执行 mapStatetoProps 函数
   *
   * @returns NewComponent 返回新的组件，props 提示只有基础的
   */
  connect = <OriginProps, ConnectedProps>(
    Comp: TElement<OriginProps & ConnectedProps & TConnectProps>,
    mapStatetoProps: (models: TModelsPool, app: Novus, props: OriginProps) => ConnectedProps,
    deps: string[] = [],
  ): React.ComponentClass<OriginProps> => {
    class OutputCom extends Component<OriginProps, ConnectedProps> {
      constructor(props: OriginProps) {
        super(props)
        this.state = mapStatetoProps(novus.models, novus, props)
      }
      dispose: Function
      componentDidMount() {
        this.dispose = novus.subscribe(() => {
          let newState = mapStatetoProps(novus.models, novus, this.props)
          this.setState(newState)
        }, deps)
      }
      componentWillUnmount() {
        if (typeof this.dispose !== 'undefined') {
          this.dispose()
        }
      }
      render() {
        const allProps = {
          ...this.props,
          ...this.state,
          ...novus.connectProps,
        }
        return <Comp {...allProps} />
      }
    }
    return OutputCom
  }
  /**
   * 删除全部模型
   */
  clean = () => {
    for (let m in this.models) delete this.models[m]
    this.listeners.clear()
    this.needNotifiedListeners.clear()
  }
}
export const novus = new Novus()
/**
 * 一个基础的数据模型。用户可以继承此类后自己添加更新函数
 *
 * - namespace 作为唯一的 id
 * - state 作为数据储存仓
 * - setState 同步更新 state 的函数
 * - actions 用户的数据模型的更新函数，支持异步函数
 */
export class NovusBaseModel<S, A = {}> {
  /**
   * 唯一的命名空间
   */
  namespace: string
  novus: Novus = novus
  /**
   * 数据仓
   *
   * 由于继承后会 state 覆盖，所以子组件要显式指定类型
   */
  state: Readonly<S>
  /**
   * 纯函数的数据更新函数，同步执行
   *
   * @param state 要更新的属性或者函数
   */
  protected setState = <K extends keyof S>(state: Pick<S, K> | ((states: S) => Pick<S, K>)) => {
    if (typeof state === 'function') {
      const newState = state(this.state)
      this.state = {...this.state, ...newState}
    } else {
      this.state = {...this.state, ...state}
    }
    this.notifyChanges()
  }
  protected getModel = <K extends keyof TModelsPool>(modelName: K): TModelsPool[K] => {
    return novus.models[modelName]
  }
  /**
   * 通过标志变量控制多次的事件通知在一个 EventLoop 中只触发一次
   */
  protected waitingNotify = false
  /**
   * 通知上层触发订阅的 connect 转换函数，每次修改 state 必须触发！！！
   */
  protected notifyChanges = () => {
    // setState 是同步的，但是事件通知不是同步
    if (this.waitingNotify) return
    this.waitingNotify = true
    new Promise(r => r()).then(() => {
      novus.notifyChangesListeners(this.namespace)
      this.waitingNotify = false
    })
  }
  /**
   * 数据更新的函数，相当于 effects 或者 reducers 的概念集合
   */
  readonly actions: A
}
/**
 * 提供 hook 函数，在函数组件中非常简洁的使用
 *
 * @template T
 * @param {(models: TModelsPool, app: Novus) => T} mapStatetoHooks 怎么从 models 中拿到状态
 * @param {string[]} [deps] 依赖哪些 models 的变更通知
 * @returns {T}
 */
export const useNovus = function<T>(
  mapStatetoHooks: (models: TModelsPool, app: Novus) => T,
  deps?: string[],
): T {
  // don't run deps collect after first render
  const initState = useRef<T | null>(null)
  let _deps = deps
  if (initState.current === null) {
    if (typeof deps === 'undefined') {
      const autoDeps = new Set([])
      const handler = {
        get(target: TModelsPool, key: string) {
          if (typeof target[key] !== 'undefined') {
            autoDeps.add(key)
          }
          return target[key]
        },
      }
      const autoModels = new Proxy(novus.models, handler)
      initState.current = mapStatetoHooks(autoModels, novus)
      _deps = Array.from(autoDeps)
    } else {
      initState.current = mapStatetoHooks(novus.models, novus)
    }
  }
  let [state, setState] = useState<T>(initState.current)
  useEffect(() => {
    const dispose = novus.subscribe(() => {
      setState(oldState => {
        let newState = mapStatetoHooks(novus.models, novus)
        // ↓ 浅比较一下判断是否需要更新 state，触发订阅
        for (const key in oldState) {
          if (oldState[key] !== newState[key]) {
            return newState
          }
        }
        return oldState
      })
    }, _deps)
    return () => {
      dispose()
    }
  }, [])
  return state
}
/**
 * 封装一个组件，默认携带 novus 属性，方便引用
 *
 * @export
 * @class NovusComponent
 * @extends {(Component<P, S, SS>)}
 * @template P
 * @template S
 * @template SS
 */
export class NovusComponent<P, S = {}, SS = any> extends Component<P, S, SS> {
  novus = novus
}
export default Novus
Copy
// todoModel.ts
import {NovusBaseModel, novus} from './novus'
const todoDto = {
  sync: async newTodo => {
    await new Promise(r => setTimeout(r, 1000))
  },
}
export enum TodoStatus {
  Normal,
  Completed,
  Deleted,
}
export type TTodo = {
  status: TodoStatus
  tags: string[]
  content: string
}
export interface ITodoState {
  loading: boolean
  groups: string[]
  list: TTodo[]
  filters: {
    tags: string[]
    statuses: TodoStatus[]
  }
}
// 使用继承类的形式限制属性和方法
class TodoModel extends NovusBaseModel<ITodoState> {
  namespace = 'todoModel'
  constructor() {
    super()
    this.state = {
      loading: false,
      groups: [],
      list: [],
      filters: {
        tags: [],
        statuses: [],
      },
    }
  }
  // 自定义状态更新函数
  syncData = async list => {
    this.setState({loading: true})
    await todoDto.sync(list)
    this.setState({list, loading: false})
  }
  // actions 集合，可以调用异步函数，约定为修改状态的逻辑，提供数据操作方法
  actions = {
    create: async (content: string, tags: string[] = []) => {
      const newTodo = {
        tags,
        content,
        status: TodoStatus.Normal,
      }
      await this.syncData([newTodo, ...this.state.list])
    },
    update: async (index: number, todo: TTodo) => {
      const newTodo = {
        ...this.state.list[index],
        ...todo,
      }
      await this.syncData([
        ...this.state.list.slice(0, index - 1),
        newTodo,
        ...this.state.list.slice(index + 1),
      ])
    },
    delete: async (index: number) => {
      await this.syncData([...this.state.list.slice(0, index), ...this.state.list.slice(index + 1)])
    },
  }
}
export const model = new TodoModel()
novus.bindModel(model)
Copy
// TodoExample.tsx
import React, {useCallback} from 'react'
import {useNovus} from './novus'
import {model as todoModel, TTodo} from './todoModel'
export const ExampleTodoExample = props => {
  let [list, loading] = useNovus<[TTodo[], boolean]>(
    models => {
      return [models.todoModel.state.list, models.todoModel.state.loading]
    },
    ['todoModel'],
  )
  const deleter = useCallback(async (index: number) => {
    await todoModel.actions.delete(index)
  }, [])
  const adder = useCallback(async () => {
    await todoModel.actions.create(new Date().toTimeString())
  }, [])
  return (
    <div>
      <button disabled={loading} onClick={adder}>
        {loading ? 'loading' : 'ADD'}
      </button>
      <table>
        <tbody>
          {list.map((todo, index) => {
            return (
              <tr key={todo.content}>
                <td>{todo.content}</td>
                <td>
                  <button onClick={deleter.bind(null, index)}>关闭</button>
                </td>
              </tr>
            )
          })}
        </tbody>
      </table>
    </div>
  )
}
Copy

感谢您的阅读，本文由 Ubug 版权所有。如若转载，请注明出处：Ubug（https://ubug.io/blog/novus）

🔝
🎈 分享·🧧 打赏
🚧 本文结束

🔥 推荐阅读

Ubug
Ubug 一个开发工程师，现居北京，全栈偏前端开发，工作目标是用高质量的技术和代码改变世界。兴趣广泛、想法多、喜欢折腾。

🐞 关于

有时间就会分享一些技术文章、专业内容、经典问题、系列功能等。

｛⛔ 未标注内容均为原创，请勿转载 ©️｝
Ubug