关于javascript:react-hooks下状态管理实现新思路

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 标准了数据流。
毛病：对状态治理进行集中管理，不利于懒加载。