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