React纯Hooks状态管理探索
第一次发前端的文章，好紧张
React从16.8开始支持Hooks，社区也出现了大量好用的轮子
而我最看好的两个有关状态管理的轮子
jamiebuilds/unstated-next
diegohaz/constate
原因无他，他们最符合React审美和哲学，相信之前或多或少都听说过。两个轮子的设计思路和API都如出一辙
今天向大家推荐的是我个人写的方便组合以上轮子的工具，也可以用于别的context provider
hlhr202/React-Combine-Provider
源码很简单，不断reduce and combine providers就ojbk
使用也简单，只要创造了constate和unstated的context container，把他们的provider merge一下就好，这里就先用unstated-next做下示范好了
import React, { useState } from react;
import { createContainer } from unstated-next;
import { combineProviders } from react-combine-provider;
const useCounter1 = (initialState = 1) => {
const [count, setCount] = useState(initialState);
const decrement = () => setCount(count - 1);
const increment = () => setCount(count + 1);
return { count, decrement, increment };
};
const Counter1 = createContainer(useCounter1);
const useCounter2 = (initialState = 2) => {
const [count, setCount] = useState(initialState);
const decrement = () => setCount(count - 2);
const increment = () => setCount(count + 2);
return { count, decrement, increment };
};
const Counter2 = createContainer(useCounter2);
const StateProviders = combineProviders([
Counter1.Provider,
Counter2.Provider,
]);
const App = () => (
<StateProviders>
<YourComponentThatUseTheHooks/>
</StateProviders>
)
这里hooks的逻辑和状态都被全局共享，就这么简单
没有connect和reselect，没有显式的dispatch，没有字元串，要是你用了typescript推导和跳转都有效，而component会根据使用了哪一个context自动select那个context的状态，不会造成重复渲染
更多例子可以看
hlhr202/React-Combine-Provider
推荐阅读：
