1. 狀態(tài)管理

在我們前端開發(fā)中，一定會接觸現(xiàn)在最熱門的幾大框架(Vue, React等等)，在使用框架的過程中，我們一定會接觸某些狀態(tài)管理工具。

Vue我們會使用Vuex來管理全局狀態(tài)， React會使用Redux來管理。

首先是不是，在問為什么？

在使用類似Vue,React框架時，我們一定會使用狀態(tài)管理嗎？這個答案是肯定的。或許我不會主動去使用Vuex, Redux，但我們編寫每一個組件的時候就已經(jīng)在管理狀態(tài)，Vuex, Redux只是更方便我們進行全局的狀態(tài)管理。

為什么一定會使用狀態(tài)管理？這是因為現(xiàn)代前端框架使用數(shù)據(jù)驅動視圖的形式來描述頁面。比如，Vue、 React組件會有一個自己內部，外部的狀態(tài)來共同決定組件的如何顯示的，用戶與組件交互導致數(shù)據(jù)變更，進而改變視圖。

框架	內部狀態(tài)	外部狀態(tài)
Vue	data	props
React	state, useState	props

所以我們所寫大部分業(yè)務邏輯，是在管理狀態(tài)，框架會幫我們狀態(tài)映射成視圖，這可以說是很經(jīng)典的MVVM模式。

View = ViewModel(Model); 
// 視圖 =  狀態(tài) + 管理 
復制代碼 

2. 有限狀態(tài)機：計算機中一種用來進行對象行為建模的工具

其作用主要是描述對象在它的生命周期內所經(jīng)歷的狀態(tài)序列，以及如何響應來自外界的各種事件。

我們來理解一下上面這段話。

• 一種對象行為建模工具

  我們用來描述對象行為，狀態(tài)隨著時間轉變過渡行為的工具。可以模擬世界上大部分事物。

• 生命周期

  我們通過抽象對象所經(jīng)歷的狀態(tài)序列，來確定對象一系列可能的生命周期和轉變。

• 響應外界事件

  外界事件能夠影響對象內部狀態(tài)。對象能夠對外部事件作出響應。

狀態(tài)機有基本幾個要素：

1. 當前所處狀態(tài)

   在各個時刻只處于一種狀態(tài)

2. 狀態(tài)轉移函數(shù)

   在某種條件下，會從一種狀態(tài)轉移到另外一種狀態(tài)。

3. 有限狀態(tài)序列

   擁有有限，可枚舉的狀態(tài)數(shù)

 

 

 

 上面這張圖所描述的狀態(tài)機，我們使用js對象來進行描述

const stateTool = { 
  // 當前狀態(tài) 
  currentState: '1', 
   
  // 狀態(tài)轉變函數(shù) 
  transition: (event) => { 
  switch(event.type) { 
      case '1': { 
        this.currentState = event.status; 
        doSomething1(); 
        break; 
      } 
      case '2': { 
        this.currentState = event.status; 
        doSomething2(); 
        break; 
      } 
      case '3': { 
        this.currentState = event.status; 
        doSomething3(); 
        break; 
      } 
      default:  
        console.log('Invalid State!'); 
        break; 
    } 
  } 
} 
復制代碼 

使用有限自動機是一種狀態(tài)管理的思考方式，我們可以列舉組件狀態(tài)列表，設計觸發(fā)狀態(tài)函數(shù)。通過外部或內部交互行為，觸發(fā)函數(shù)改變狀態(tài)，根據(jù)狀態(tài)改變視圖

3. Flux思想

Flux是什么？Flux是一個Facebook開發(fā)的、利用單向數(shù)據(jù)流實現(xiàn)的應用架構

簡單說，F(xiàn)lux 是一種架構思想，專門解決軟件的結構問題。可以說他是有限狀態(tài)機的另外一種形式。

一個Flux管理分為4個狀態(tài)：

• View：視圖層

• Action（動作）：視圖層觸發(fā)的動作 or 行為

• Dispatcher（派發(fā)器）：收集觸發(fā)行為，進行統(tǒng)一管理，統(tǒng)一分發(fā)給store層。

• Store（數(shù)據(jù)層）：用來存放應用的狀態(tài)，根據(jù)dispatcher觸發(fā)行為，就提醒Views要更新頁面

 

 

 

 

 

要是同學了解flux的的工作流程，那么很容易就發(fā)現(xiàn)這是一種工程化的狀態(tài)機。

 

• 初始狀態(tài)

我們通過store 存放的是初始化狀態(tài)，這種初始化狀態(tài)數(shù)據(jù)可以頁面初始化時設定 或 頁面加載時請求后端接口數(shù)據(jù)，來初始化store數(shù)據(jù)。

通過store的初始化數(shù)據(jù)，來構建初始化的視圖層。

• 狀態(tài)轉移事件

根據(jù)視圖層的行為會觸發(fā)action,我們通過統(tǒng)一的dispatcher來收集action, dispatcher將行為派發(fā)給store。

• 狀態(tài)轉移函數(shù)

store通過判斷事件的類型 和 payload，來修改內部存儲狀態(tài)。達到狀態(tài)轉移的目的，并統(tǒng)一提醒view層更新頁面；

4. 全局到局部的狀態(tài)管理

既然我們是通過數(shù)據(jù)狀態(tài)來管理視圖的，那么在設計初期我們就可以從有限的狀態(tài)轉移來思考業(yè)務邏輯。通過思考每個狀態(tài)對應的數(shù)據(jù)，狀態(tài)轉移函數(shù)，我們可以很清晰的羅列出數(shù)據(jù)更變邏輯。從數(shù)據(jù)去控制視圖也是現(xiàn)代前端所接觸到的MVVM模式。

一個大型應用，我們也會使用Vuex 或 Redux來進行一整個應用的管理。

在平時的業(yè)務中，我們會遇到一個痛點是：Vuex,Redux是一個全局狀態(tài)管理，但我們現(xiàn)在需要在局部需要一個局部狀態(tài)管理變更，只能使用 mutation 或 dispatch 去提交更改。

如果我們頻繁的更新狀態(tài)，那么我們需要為每一個局部模塊編寫大量dispatch函數(shù)來間接修改全局狀態(tài)。隨著應用的擴充，dispatch文件會越來越臃腫。

那么我們是不是可以使用不同的狀態(tài)管理工具，來實現(xiàn)局部狀態(tài)的管理。在局部狀態(tài)更新完之后，再去用局部更新去更新全局呢？

注：但這也會有一個缺點，局部管理相對獨立。有些高度復用的提交函數(shù)需要放在全局狀態(tài)管理上

a. 框架原生組件狀態(tài)管理

React Hooks + React.createContext

React Hooks提供了useReducer + useContext + Context 可以實現(xiàn)一個小型的狀態(tài)管理

// 以下代碼就實現(xiàn)了一個能夠穿透組件的狀態(tài)管理 
import React, { useReducer, useContext } from 'react'; 
 
const reducer = (state = 0, { type, ...payload }) => { 
  switch (type) { 
    case 'add': 
      return state + 1; 
    case 'desc': 
      return state - 1; 
    default: 
      return state; 
  } 
} 
 
const Context = React.createContext(); 
const Parent = () => { 
  const [state, dispatch] = useReducer(reducer, 0); 
  return ( 
    <> 
      <Context.Provider value={{ state, dispatch }}> 
        <Son /> 
      </Context.Provider> 
    </> 
  ) 
} 
 
function Son() { 
  return <Counter /> 
} 
 
function Counter() { 
  const { state, dispatch } = useContext(Context); 
  return ( 
    <div> 
      <button onClick={() => dispatch({ type: 'desc' })}>-</button> 
      {state} 
      <button onClick={() => dispatch({ type: 'add' })}>+</button> 
    </div> 
  ) 
} 
export default Parent; 
復制代碼 

Vue響應式數(shù)據(jù) + vue.Provide/inject

使用vue響應式系統(tǒng) + provide/inject API來實現(xiàn)一個具有穿透性的局部狀態(tài)管理

// Parent.vue 
<template> 
  <Son /> 
</template> 
 
<script setup> 
import { provide, reactive, readonly } from "vue"; 
import Son from "./Son.vue"; 
const data = reactive({ 
  count: 0, 
}); 
const onAdd = () => { 
  data.count++; 
}; 
const onDesc = () => { 
  data.count--; 
}; 
provide("store", { 
  data: readonly(data), // 只讀屬性 
  onAdd, // 修改函數(shù)add 
  onDesc, // 修改函數(shù)desc 
}); 
</script> 
 
復制代碼 

// Son.vue 
<template> 
  <Counter /> 
</template> 
 
<script setup> 
import Counter from "./Counter.vue"; 
</script> 
復制代碼 

// Counter.vue 
<template> 
  <div> 
    <button @click="store.onDesc">-</button> 
    {{ store.data.count }} 
    <button @click="store.onAdd">+</button> 
  </div> 
</template> 
 
<script setup> 
import { inject } from "vue"; 
const store = inject("store", {}); // 穿透讀取store 
</script> 
復制代碼 

b. 線性狀態(tài)管理：Xstate

 

 

Xstate是一個很有趣的類似有限狀態(tài)機的狀態(tài)管理， Xstate 著重點在于 管理狀態(tài) ，通過 狀態(tài)轉換去維護數(shù)據(jù) 。

我們來定義一個簡單的promise狀態(tài)機，使用官方提供的工具進行可視化 

 

 

 

import { Machine } from 'xstate'; 
 
// 創(chuàng)建狀態(tài)機 
const promiseMachine = Machine({ 
  id: 'promise', // 唯一id 
  initial: 'pending', // 初始化狀態(tài) 
  states: { // 狀態(tài)集合 
    pending: { 
      on: { 
        RESOLVE: 'resolved', 
        REJECT: 'rejected', 
   } 
    }, 
    resolved: { 
      type: 'final', 
    }, 
    rejected: { 
      type: 'final' 
    } 
  } 
}) 
復制代碼 

注意:warning::狀態(tài)機不擁有狀態(tài)，他只是定義狀態(tài)和定義狀態(tài)轉移

Xstate有提供函數(shù)來實現(xiàn)狀態(tài)機服務，實現(xiàn)擁有狀態(tài)的實體

import { interpret } from 'xstate' 
const promiseService = interpret(promiseMachine).onTransition(state =>  
  console.log(state.value) 
) // 創(chuàng)建服務，指定狀態(tài)轉移時回調函數(shù) 
promiseService.start() // 啟動服務 
promiseService.send('RESOLVE'); // 通知服務轉移狀態(tài)，并執(zhí)行回調函數(shù) 
復制代碼 

這樣子我們就實現(xiàn)了一個簡單的Promise狀態(tài)機。他有很多應用，可以結合Vue,結合React進行使用。更加深入的內容就需要到官方文檔中自行探索了！

就我個人的看法，狀態(tài)機思想非常適合狀態(tài)轉移相對線形的場景，在某些狀態(tài)多循環(huán)的場景轉移會相對復雜些

c. 可響應式的狀態(tài)管理器：Mobx

mobx是一種響應式的狀態(tài)管理，他所提倡的是拆分store做數(shù)據(jù)管理。這就很適合做局部的狀態(tài)管理，根據(jù)局部狀態(tài)管理來更新全局狀態(tài)。

相同的，我們舉個例子

import { action, autorun, observable } from 'mobx' 
import { observer } from 'mobx-react' 
import React from 'react' 
 
const appStore = observable({ // 建立store 
  count: 0, 
  age: 18, 
}) 
 
// autorun 只會觀察依賴的相關數(shù)據(jù) 
// 使用當appStore.age更新時，才會觸發(fā)該函數(shù) 
autorun(() => { 
  // doSomething(); 
  console.log('autorun', appStore.age); 
}) 
 
const Counter = observer(() => { 
  const { count } = appStore; 
  const onAdd = action(() => { // 使用action更新store數(shù)據(jù) 
    appStore.count++; 
  }) 
  const onDesc = action(() => { 
    appStore.count--; 
  }) 
  return ( 
    <div> 
      <button onClick={onDesc}>-</button> 
      {count} 
      <button onClick={onAdd}>+</button> 
    </div> 
  ) 
}) 
 
export default Counter; 
復制代碼 

5. 總結

現(xiàn)在前端主流使用數(shù)據(jù)驅動視圖的形式，來實現(xiàn)業(yè)務。希望給大家?guī)韮牲c啟發(fā)

1. 用有限狀態(tài)機去思考某些線性狀態(tài)場景的數(shù)據(jù)管理。

2. 在之前的業(yè)務開發(fā)的時候，就會出現(xiàn)一個痛點，應用全局狀態(tài)管理非常臃腫。

   在不斷功能迭代的過程中，需要做不同的狀態(tài)管理，雖然都是對同一份數(shù)據(jù)進行維護，但維護的方式不同，進行一次狀態(tài)更新就需要編寫一個不同的dispatch函數(shù)。隨著業(yè)務需求的增加，dispatch函數(shù)越來越多，難以管理和復用。

   思考如何解決這個問題的時，偶然看到了有限狀態(tài)機相關文章，思考到應用的功能模塊在某一個時刻是相互獨立的，我們在局部將數(shù)據(jù)進行更新，之后用一個全局函數(shù)對數(shù)據(jù)進行統(tǒng)一替換。

注：本文為探索性質，使用原生組件進行局部管理不需要引入依賴。但使用第三方工具造成包體積大小的增加，是否會增加性能消耗有待討論