阅读 hox对状态管理的思考

对于react 状态管理已经是老生畅谈的话题，官方没有给出最佳实践因此市面上关于状态管理的探索从未停止过。

本文就 hox库探索做一个总结，建议按本文顺序阅读。

开篇

组件状态定义

对于 hooks推出之后,对于状态定义也更加灵活，下面关于组件定义状态如下:

function Counter() {
 const [count, setCount] = useState(0)
 return (
   <div>
     <p>count:{count}</p>
     <button onClick={() => setCount(count + 1)}>add</button>
     <button onClick={() => setCount(count - 1)}>minus</button>
   </div>
 )
}

关于组件复用代码，我们可以抽离自定义hook

// src/useCount.ts

function useCount(){
  const [count, setCount] = useState(0);
  const add = () => setCount(count + 1);
  const minus = () => setCount(count - 1);

  return {
    count,
    add,
    minus
  }
}

那么一个Counter组件会变成如下形式:

import React from 'react';
import useCount from './model/count';

export default ()=> {
  const {count, add,minus}= useCount()
  return (
    <div>
      <p>count:{count}</p>
      <button onClick={add}>add</button>
      <button onClick={minus}>minus</button>
    </div>
  )
}

此时如果我们定义多个Counter组件，他们之间状态是相互独立的，因为每一个组件内部都调用了useCount,因此对于组件之间状态共享做法就是状态提升

组件共享状态

至此我们浏览过官网的都知道此时应该用context。

1. 定义 Context

import React from 'react';
export const CountContext=React.createContext(null);

2. 改造Counter

import React, { useContext } from 'react';
import { CountContext } from './model/countStore'

export default () => {
  const {add,minus}=useContext(CountContext);

  return (
    <div>
      <DisplayValue />
      <button onClick={add}>add</button>
      <button onClick={minus}>minus</button>
    </div>
  )
}

const DisplayValue = () => {
  const { count } = useContext(CountContext)

  return (
    <p>count:{count}</p>
  )
}

3. 改造 *组件App

export default function App() {
  const { count, add, minus } = useCount();
  return (
    <CountContext.Provider value={{ count, add, minus }}>
      <Counter />
      <Counter />
    </CountContext.Provider>
  )
}

社区也推出了基于它的状态管理库unstated-next

至此对于组件状态共享,也完结