前端：从状态管理到有限状态机的思考

View = ViewModel(Model); 
// 视图 =  状态 + 管理 
复制代码 
1.
2.
3.

const stateTool = { 
  // 当前状态 
  currentState: '1', 
   
  // 状态转变函数 
  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; 
    } 
  } 
} 
复制代码 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.

// 以下代码就实现了一个能够穿透组件的状态管理 
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; 
复制代码 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.

// 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, // 修改函数add 
  onDesc, // 修改函数desc 
}); 
</script> 
 
复制代码 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

// Son.vue 
<template> 
  <Counter /> 
</template> 
 
<script setup> 
import Counter from "./Counter.vue"; 
</script> 
复制代码 
1.
2.
3.
4.
5.
6.
7.
8.
9.

// 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> 
复制代码 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

import { Machine } from 'xstate'; 
 
// 创建状态机 
const promiseMachine = Machine({ 
  id: 'promise', // 唯一id 
  initial: 'pending', // 初始化状态 
  states: { // 状态集合 
    pending: { 
      on: { 
        RESOLVE: 'resolved', 
        REJECT: 'rejected', 
   } 
    }, 
    resolved: { 
      type: 'final', 
    }, 
    rejected: { 
      type: 'final' 
    } 
  } 
}) 
复制代码 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

import { interpret } from 'xstate' 
const promiseService = interpret(promiseMachine).onTransition(state =>  
  console.log(state.value) 
) // 创建服务，指定状态转移时回调函数 
promiseService.start() // 启动服务 
promiseService.send('RESOLVE'); // 通知服务转移状态，并执行回调函数 
复制代码 
1.
2.
3.
4.
5.
6.
7.

import { action, autorun, observable } from 'mobx' 
import { observer } from 'mobx-react' 
import React from 'react' 
 
const appStore = observable({ // 建立store 
  count: 0, 
  age: 18, 
}) 
 
// autorun 只会观察依赖的相关数据 
// 使用当appStore.age更新时，才会触发该函数 
autorun(() => { 
  // doSomething(); 
  console.log('autorun', appStore.age); 
}) 
 
const Counter = observer(() => { 
  const { count } = appStore; 
  const onAdd = action(() => { // 使用action更新store数据 
    appStore.count++; 
  }) 
  const onDesc = action(() => { 
    appStore.count--; 
  }) 
  return ( 
    <div> 
      <button onClick={onDesc}>-</button> 
      {count} 
      <button onClick={onAdd}>+</button> 
    </div> 
  ) 
}) 
 
export default Counter; 
复制代码 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.