TeleState 个性
1、hooks api的状态共享。
2、可在组件外，通过dispatch更改state.
3、无需provider，不必思考组件是否在provider作用域下。
4、体积仅4k.
5、typescript friendly.
毛病
暂不反对class组件，需本人应用函数式组件进行高阶来进行反对。
无奈部分状态共享。如menu组件menu-item共享menu的状态，因为多个menu实例的状态并不相同，则只能应用context+provider计划.
实现原理
通过 setState queue 来散发状态。
装置
npm i tele-state第一步，创立一个状态联动的 hooks "useTeleState"
src/moduleA/store.ts
import React, { useEffect } from 'react'import { createTeleState } from 'tele-state'const { useTeleState } = createTeleState(1)export { useTeleState}step2 - 在组件中应用该hooks，api与useState相似
src/moduleA/componentTest.tsx
import {useTeleState} from './store' function ComponentA(){ const [ count ] = useTeleState() console.log('B----------', count) return <>{count}</> } function ComponentB(){ const [ count, setCount ] = useTeleState() console.log('A----------', count) useEffect( () =>{ setCount(count+1) // ComponentA will update too. }, [] ) return <button onClick={() => setCount(count+1)}>add {count}</button> }组件外读取/更改状态
src/store.ts
const { useTeleState， dispatch， // 在组件外更改状态，状态同步更新，组件异步渲染. getState, // 在组件外获取以后状态 } = createTeleState(1) export const addCount = () => { // 在组件外更改状态，状态同步更新，组件异步渲染. dispatch( preCount => preCount+1 ) // 在组件外获取以后状态. const count = getState() fetch(`/api/bean?count=${count}`) } export { useTeleState }理论我的项目中，创立多个teleState，每个teleState在各自业务/功能模块下申明状态。后续在我的项目拆分时，也很容易
与当初支流计划的比照
hooks + context
基本原理是将state与dispatch都保留在context的Provider中，利用useContext api 获取provider中的state与dispatch. 在此基础上的封装则有easy-peasy等。
// 创立context const countContex = createContext({count: 1, setCount: (count: number) => {}}) // 将dispatch 与 state放入provider const StoreProvider = ({children}: {children:ReactElement}) => { const [count, setCount] = useState(1) return <countContex.Provider value={{count, setCount }}> {children} </countContex.Provider> } // 应用useContext const ComponentA = () => { const { count, setCount} = useContext(countContex) // .... }该计划绝对与teleState 毛病：
1、在组件外获取/更新状态不是很不便。
2、在应用状态时，须要思考Provider的作用域问题.
mobx
当初mobx 的api设计是面向对象的，大量应用装璜器模式。当初hooks使得拥抱函数式组件。显得略显难堪。在此也不做过多评估
redux
长处：redux标准了数据流。
毛病：对状态治理进行集中管理，不利于懒加载。