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
推薦閱讀：
