日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

 1. 狀態(tài)管理

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

撫順縣網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、APP開發(fā)、成都響應式網(wǎng)站建設等網(wǎng)站項目制作，到程序開發(fā)，運營維護。成都創(chuàng)新互聯(lián)公司于2013年開始到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設就選成都創(chuàng)新互聯(lián)公司。

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

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

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

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

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

 
 
 

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

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

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

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

• 一種對象行為建模工具

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

• 生命周期

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

• 響應外界事件

  外界事件能夠影響對象內(nèi)部狀態(tài)。對象能夠?qū)ν獠渴录鞒鲰憫?/p>

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

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

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

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

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

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

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

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

 
 
 

  
  
  
const stateTool = { 
  
  
  
  // 當前狀態(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; 
  
  
  
    } 
  
  
  
  } 
  
  
  
} 
  
  
  
復制代碼 
 
 
 

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

3. Flux思想

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

簡單說，F(xiàn)lux 是一種架構(gòu)思想，專門解決軟件的結(jié)構(gòu)問題?？梢哉f他是有限狀態(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ù)，來構(gòu)建初始化的視圖層。

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

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

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

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

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

既然我們是通過數(shù)據(jù)狀態(tài)來管理視圖的，那么在設計初期我們就可以從有限的狀態(tài)轉(zhuǎn)移來思考業(yè)務邏輯。通過思考每個狀態(tài)對應的數(shù)據(jù)，狀態(tài)轉(zhuǎn)移函數(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 ( 
  
  
  
    <> 
  
  
  
       
  
  
  
         
  
  
  
       
  
  
  
     
  
  
  
  ) 
  
  
  
} 
  
  
  
 
  
  
  
function Son() { 
  
  
  
  return  
  
  
  
} 
  
  
  
 
  
  
  
function Counter() { 
  
  
  
  const { state, dispatch } = useContext(Context); 
  
  
  
  return ( 
  
  
  
    
 
  
  
  
       dispatch({ type: 'desc' })}>- 
  
  
  
      {state} 
  
  
  
       dispatch({ type: 'add' })}>+