浅谈现代前端框架技术思想

原文作者：繁星

现代前端框架提供了可选的状态（数据）管理能力

之所以说是可选的，是因为你可能并不需要！这取决于你所面对系统的复杂度和现代框架所提供的状态管理能力所带来的优缺点。那么现代前端框架状态管理能力的设计借鉴了哪些思想呢？我们先来看看状态机。

状态机模型可以描述一切运转中的事物。拿宇宙来说，如果我们有一个可以记录宇宙所有状态的相机，那么按下一次快门所记录的就是宇宙的一个 State，下一刻就是一个 Transition，宇宙的运转就是一个无限状态机，除非哪一刻宇宙毁灭了：

image

一个 SPA 也可以用状态机模型来描述：State 代表了当前 SPA 本地内存中的数据 (由于页面渲染能力已经被抽象和封装了，这里不再关注数据所单向映射的 UI ) ，而网络事件、浏览器事件、setTimeout 等和他们触发的对本地内存中数据的更改可以抽象为 Transition。

image

现代前端框架提供的状态管理能力其实是一个更关注“操作”的状态机模型，但是实现的手段借鉴了 Event Sourcing 和 CQRS 。首先介绍一下Event Sourcing ，两个要点：

关注每一次引发 Transition 的 Event，并做持久化；
State 是只读的，每一次 Transition 后都基于变更生成一个新的 State ，并与引发的 Event 做映射后做持久化（Immutable Data）；

image

这种 Event First（Event-Driven vs Data-Driven）的思想好处很多，对于前端而言最大的益处是 Snapshoot 的能力，Event 描述了 SPA 内所发生的一切事情，在目前越来越复杂的系统中遇到问题时可以溯源，重现错误，准确发现 State 在什么时候，是由于什么原因，如何变化的，方便 debug 。同时，Event first 还给予我们很大的想象空间：如果有一个事件标准体系被前端和各种其他系统（比如 Log, Metric, BDI）实现了呢？是不是可以丰富数据采集，有利于大数据分析呢？

而CQRS又是什么呢？ Command Query Responsibility Segregation，命令查询职责分离，一种读写分离的模式。以 Redux 为例：

image

Commands: 不返回任何结果，但更改一个对象或整个系统的状态。在上图中指 dispatch 一个 action 而调用的 reducer 对 store 的处理产生一个新的 store；
Query : 返回结果但不会改变对象的状态，在上图中指 subscribe store 以及注册的 listener 里调用 getState 方法；

拿 Redux 的示例 Shopping Cart Example 来说明一下，这里只分析 Add to cart 一个 action，详细代码请到 sandbox 里查阅：

image

当用户点击 Add to cart 按钮时，对应 action 会 dispatch ADD_TO_CART，触发 Products 和 Cart 里对应的 reducer 去更改 state，即 command，操作过程是将 Products 里对应 product 的库存减 1，Cart 里对应 product 数量加 1。

// products reducer
// products 里对应 product 存货数量减 1
const products = (state, action) => {
  switch (action.type) {
    case ADD_TO_CART:
      return {
        ...state,
        inventory: state.inventory - 1
      }
    default:
      return state
  }
}

// cart reducer
// 如果 cart 里没有对应的 product，添加新的 product
const addedIds = (state = initialState.addedIds, action) => {
  switch (action.type) {
    case ADD_TO_CART:
      if (state.indexOf(action.productId) !== -1) {
        return state
      }
      return [ ...state, action.productId ]
    default:
      return state
  }
}

// cart 里对应的 product 数量加 1
const quantityById = (state = initialState.quantityById, action) => {
  switch (action.type) {
    case ADD_TO_CART:
      const { productId } = action
      return { ...state,
        [productId]: (state[productId] || 0) + 1
      }
    default:
      return state
  }
}

reducer 更改了 Store 里对应 state 后，会触发变更通知 view 去获取最新 state 并重新渲染，即 query。

const getAddedIds = state => fromCart.getAddedIds(state.cart)
const getQuantity = (state, id) => fromCart.getQuantity(state.cart, id)
const getProduct = (state, id) => fromProducts.getProduct(state.products, id)

export const getTotal = state =>
  getAddedIds(state)
    .reduce((total, id) =>
      total + getProduct(state, id).price * getQuantity(state, id),
      0
    )
    .toFixed(2)

export const getCartProducts = state =>
  getAddedIds(state).map(id => ({
    ...getProduct(state, id),
    quantity: getQuantity(state, id)
  }))

这样最新的商品列表、购物车商品列表和总价都会渲染刷新。此购物车例子比较简单，再复杂点可以减少购物车商品数量，购物车某个商品全选等，而我们只需要编写对应的 action 和 reducer 即可。从这个例子可以看出，对于前端而言，命令和查询职责分离所带来的优点主要有：

逻辑更加清晰，能够看到哪些行为或者操作导致了 state 的变化；
处理状态的方法更加原子化，提高复用性；
提供了一个标准的管理状态的模式，保证代码输出风格的一致性；
可扩展性强，合理添加 action 和对应的 reducer 即可；
关注于状态管理后，可以做针对性的优化，提高性能；
完美结合 Eventing Source 模式，记录下所有的事件，必要时用来对系统进行回退或者重放；
为不同层级的组件提供良好的获取共享 State 的能力；

但是这些优点是需要付出代价的：你需要写更多的代码，对于简单系统而言会降低开发效率！，所以要根据系统复杂度酌情选择使用。另外，嵌套层级深的组件之间获取共享 State 也有其他方案可选。

总结：现代前端框架技术的发展正是抽象和分层思想的实践。将前端问题分为数据状态管理和与数据状态保持同步的页面渲染能力封装。关注分离、松散耦合便可以分别针对性的优化，改善开发体验。封装好解决方案后，前端开发者就可以忽略其底层实现细节，把精力放在业务逻辑上。

资料参考

Introduction to CQRS

原文地址：https://zhuanlan.zhihu.com/p/55087591

浅谈现代前端框架技术思想

推荐序

现代前端框架提供了可选的状态（数据）管理能力

你可能感兴趣的:(浅谈现代前端框架技术思想)