1. 狀態(tài)管理

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

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

首先是不是，在問(wèn)為什么？

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

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

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

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

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

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

我們來(lái)理解一下上面這段話。

• 一種對(duì)象行為建模工具

  我們用來(lái)描述對(duì)象行為，狀態(tài)隨著時(shí)間轉(zhuǎn)變過(guò)渡行為的工具?？梢阅M世界上大部分事物。

• 生命周期

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

• 響應(yīng)外界事件

  外界事件能夠影響對(duì)象內(nèi)部狀態(tài)。對(duì)象能夠?qū)ν獠渴录鞒鲰憫?yīng)。

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

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

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

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

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

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

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

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

const stateTool = { 
  // 當(dāng)前狀態(tài) 
  currentState: '1', 
   
  // 狀態(tài)轉(zhuǎn)變函數(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; 
    } 
  } 
} 
復(fù)制代碼 

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

3. Flux思想

Flux是什么？Flux是一個(gè)Facebook開(kāi)發(fā)的、利用單向數(shù)據(jù)流實(shí)現(xiàn)的應(yīng)用架構(gòu)

簡(jiǎn)單說(shuō)，F(xiàn)lux 是一種架構(gòu)思想，專(zhuān)門(mén)解決軟件的結(jié)構(gòu)問(wèn)題?？梢哉f(shuō)他是有限狀態(tài)機(jī)的另外一種形式。

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

• View：視圖層

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

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

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

• 初始狀態(tài)

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

通過(guò)store的初始化數(shù)據(jù)，來(lái)構(gòu)建初始化的視圖層。

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

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

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

store通過(guò)判斷事件的類(lèi)型 和 payload，來(lái)修改內(nèi)部存儲(chǔ)狀態(tài)。達(dá)到狀態(tài)轉(zhuǎn)移的目的，并統(tǒng)一提醒view層更新頁(yè)面；

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

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

一個(gè)大型應(yīng)用，我們也會(huì)使用Vuex 或 Redux來(lái)進(jìn)行一整個(gè)應(yīng)用的管理。

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

如果我們頻繁的更新?tīng)顟B(tài)，那么我們需要為每一個(gè)局部模塊編寫(xiě)大量dispatch函數(shù)來(lái)間接修改全局狀態(tài)。隨著應(yīng)用的擴(kuò)充，dispatch文件會(huì)越來(lái)越臃腫。

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

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

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

React Hooks + React.createContext

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

// 以下代碼就實(shí)現(xiàn)了一個(gè)能夠穿透組件的狀態(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; 
復(fù)制代碼 

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

使用vue響應(yīng)式系統(tǒng) + provide/inject API來(lái)實(shí)現(xiàn)一個(gè)具有穿透性的局部狀態(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> 
 
復(fù)制代碼 

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

// 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> 
復(fù)制代碼 

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

Xstate是一個(gè)很有趣的類(lèi)似有限狀態(tài)機(jī)的狀態(tài)管理， Xstate 著重點(diǎn)在于 管理狀態(tài) ，通過(guò) 狀態(tài)轉(zhuǎn)換去維護(hù)數(shù)據(jù) 。

我們來(lái)定義一個(gè)簡(jiǎn)單的promise狀態(tài)機(jī)，使用官方提供的工具進(jìn)行可視化 

import { Machine } from 'xstate'; 
 
// 創(chuàng)建狀態(tài)機(jī) 
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' 
    } 
  } 
}) 
復(fù)制代碼 

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

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

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

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

就我個(gè)人的看法，狀態(tài)機(jī)思想非常適合狀態(tài)轉(zhuǎn)移相對(duì)線形的場(chǎng)景，在某些狀態(tài)多循環(huán)的場(chǎng)景轉(zhuǎn)移會(huì)相對(duì)復(fù)雜些

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

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

相同的，我們舉個(gè)例子

import { action, autorun, observable } from 'mobx' 
import { observer } from 'mobx-react' 
import React from 'react' 
 
const appStore = observable({ // 建立store 
  count: 0, 
  age: 18, 
}) 
 
// autorun 只會(huì)觀察依賴(lài)的相關(guān)數(shù)據(jù) 
// 使用當(dāng)appStore.age更新時(shí)，才會(huì)觸發(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; 
復(fù)制代碼 

5. 總結(jié)

現(xiàn)在前端主流使用數(shù)據(jù)驅(qū)動(dòng)視圖的形式，來(lái)實(shí)現(xiàn)業(yè)務(wù)。希望給大家?guī)?lái)兩點(diǎn)啟發(fā)

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

2. 在之前的業(yè)務(wù)開(kāi)發(fā)的時(shí)候，就會(huì)出現(xiàn)一個(gè)痛點(diǎn)，應(yīng)用全局狀態(tài)管理非常臃腫。

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

   思考如何解決這個(gè)問(wèn)題的時(shí)，偶然看到了有限狀態(tài)機(jī)相關(guān)文章，思考到應(yīng)用的功能模塊在某一個(gè)時(shí)刻是相互獨(dú)立的，我們?cè)诰植繉?shù)據(jù)進(jìn)行更新，之后用一個(gè)全局函數(shù)對(duì)數(shù)據(jù)進(jìn)行統(tǒng)一替換。

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