男人天堂99,一区二区免费高清视频,最新日韩在线

「React進(jìn)階」只用兩個(gè)自定義 Hooks 就能替代 React-Redux ?

前言

之前有朋友問我，React Hooks 能否解決 React 項(xiàng)目狀態(tài)管理的問題。這個(gè)問題讓我思索了很久，最后得出的結(jié)論是：能，不過需要兩個(gè)自定義 hooks 去實(shí)現(xiàn)。那么具體如何實(shí)現(xiàn)的呢?那就是今天要講的內(nèi)容了。

通過本文，你能夠?qū)W習(xí)以下內(nèi)容：

useContext ，useRef ，useMemo，useEffect 的基本用法。
如何將不同組件的自定義 hooks 建立通信，共享狀態(tài)。
合理編寫自定義 hooks ，分析 hooks 之間的依賴關(guān)系。
自定義 hooks 編寫過程中一些細(xì)節(jié)問題。

帶著如上的知識(shí)點(diǎn)，開啟閱讀之旅吧～

一設(shè)計(jì)思路

首先，看一下要實(shí)現(xiàn)的兩個(gè)自定義 hooks 具體功能。

useCreateStore 用于產(chǎn)生一個(gè)狀態(tài) Store ，通過 context 上下文傳遞，為了讓每一個(gè)自定義 hooks useConnect 都能獲取 context 里面的狀態(tài)屬性。
useConnect 使用這個(gè)自定義 hooks 的組件，可以獲取改變狀態(tài)的 dispatch 方法，還可以訂閱 state ，被訂閱的 state 發(fā)生變化，組件更新。

如何讓不同組件的自定義 hooks 共享狀態(tài)并實(shí)現(xiàn)通信呢?

首先不同組件的自定義 hooks ，可以通過 useContext 獲得共有狀態(tài)，而且還需要實(shí)現(xiàn)狀態(tài)管理和組件通信，那么就需要一個(gè)狀態(tài)調(diào)度中心來統(tǒng)一做這些事，可以稱之為 ReduxHooksStore ，它具體做的事情如下：

全局管理 state， state 變化，通知對應(yīng)組件更新。
收集使用 useConnect 組件的信息。組件銷毀還要清除這些信息。
維護(hù)并傳遞負(fù)責(zé)更新的 dispatch 方法。
一些重要 api 要暴露給 context 上下文，傳遞給每一個(gè) useConnect。

1 useCreateStore 設(shè)計(jì)

首先 useCreateStore 是在靠近根部組件的位置的，而且全局只需要一個(gè)，目的就是創(chuàng)建一個(gè) Store ，并通過 Provider 傳遞下去。

使用：

const store = useCreateStore( reducer , initState )

參數(shù)：

reducer ：全局 reducer，純函數(shù)，傳入 state 和 action ，返回新的 state 。
initState ：初始化 state 。

返回值：為 store 暴露的主要功能函數(shù)。

2 Store設(shè)計(jì)

Store 為上述所說的調(diào)度中心，接收全局 reducer ，內(nèi)部維護(hù)狀態(tài) state ，負(fù)責(zé)通知更新，收集用 useConnect 的組件。

const Store = new ReduxHooksStore(reducer,initState).exportStore()

參數(shù)：接收兩個(gè)參數(shù)，透傳 useCreateStore 的參數(shù)。

3 useConnect設(shè)計(jì)

使用 useConnect 的組件，將獲得 dispatch 函數(shù)，用于更新 state ，還可以通過第一個(gè)參數(shù)訂閱 state ，被訂閱的 state 改變，會(huì)讓組件更新。

// 訂閱 state 中的 number
const mapStoreToState = (state)=>({ number: state.number })
const [ state , dispatch ] = useConnect(mapStoreToState)

參數(shù)：

mapStoreToState：將 Store 中 state ，映射到組件的 state 中，可以做視圖渲染使用。
如果沒有第一個(gè)參數(shù)，那么只提供 dispatch 函數(shù)，不會(huì)訂閱 state 變化帶來的更新。

返回值：返回值是一個(gè)數(shù)組。

數(shù)組第一項(xiàng)：為映射的 state 的值。
數(shù)組第二項(xiàng)：為改變 state 的 dispatch 函數(shù)。

4 原理圖

「React進(jìn)階」只用兩個(gè)自定義 Hooks 就能替代 React-Redux ?

二 useCreateStore

export const ReduxContext = React.createContext(null)
/* 用于產(chǎn)生 reduxHooks 的 store */
export function useCreateStore(reducer,initState){
const store = React.useRef(null)
/* 如果存在——不需要重新實(shí)例化 Store */
if(!store.current){
store.current = new ReduxHooksStore(reducer,initState).exportStore()
}
return store.current
}

useCreateStore 主要做的是：

接收 reducer 和 initState ，通過 ReduxHooksStore 產(chǎn)生一個(gè) store ，不期望把 store 全部暴露給使用者，只需要暴露核心的方法，所以調(diào)用實(shí)例下的 exportStore抽離出核心方法。
使用一個(gè) useRef 保存核心方法，傳遞給 Provider 。

三狀態(tài)管理者 —— ReduxHooksStore

接下來看一下核心狀態(tài) ReduxHooksStore 。

import { unstable_batchedUpdates } from 'react-dom'
class ReduxHooksStore {
constructor(reducer,initState){
this.name = '__ReduxHooksStore__'
this.id = 0
this.reducer = reducer
this.state = initState
this.mapConnects = {}
}
/* 需要對外傳遞的接口 */
exportStore=()=>{
return {
dispatch:this.dispatch.bind(this),
subscribe:this.subscribe.bind(this),
unSubscribe:this.unSubscribe.bind(this),
getInitState:this.getInitState.bind(this)
}
}
/* 獲取初始化 state */
getInitState=(mapStoreToState)=>{
return mapStoreToState(this.state)
}
/* 更新需要更新的組件 */
publicRender=()=>{
unstable_batchedUpdates(()=>{ /* 批量更新 */
Object.keys(this.mapConnects).forEach(name=>{
const { update } = this.mapConnects[name]
update(this.state)
})
})
}
/* 更新 state */
dispatch=(action)=>{
this.state = this.reducer(this.state,action)
// 批量更新
this.publicRender()
}
/* 注冊每個(gè) connect */
subscribe=(connectCurrent)=>{
const connectName = this.name + (++this.id)
this.mapConnects[connectName] = connectCurrent
return connectName
}
/* 解除綁定 */
unSubscribe=(connectName)=>{
delete this.mapConnects[connectName]
}
}

狀態(tài)

reducer：這個(gè) reducer 為全局的 reducer ，由 useCreateStore 傳入。
state：全局保存的狀態(tài) state ，每次執(zhí)行 reducer 會(huì)得到新的 state 。
mapConnects：里面保存每一個(gè) useConnect 組件的更新函數(shù)。用于派發(fā) state 改變帶來的更新。

方法

負(fù)責(zé)初始化：

getInitState：這個(gè)方法給自定義 hooks 的 useConnect 使用，用于獲取初始化的 state 。
exportStore：這個(gè)方法用于把 ReduxHooksStore 提供的核心方法傳遞給每一個(gè) useConnect 。

負(fù)責(zé)綁定|解綁：

subscribe：綁定每一個(gè)自定義 hooks useConnect 。
unSubscribe：解除綁定每一個(gè) hooks 。

負(fù)責(zé)更新：

dispatch：這個(gè)方法提供給業(yè)務(wù)組件層，每一個(gè)使用 useConnect 的組件可以通過 dispatch 方法改變 state ，內(nèi)部原理是通過調(diào)用 reducer 產(chǎn)生一個(gè)新的 state 。
publicRender：當(dāng) state 改變需要通知每一個(gè)使用 useConnect 的組件，這個(gè)方法就是通知更新，至于組件需不需要更新，那是 useConnect 內(nèi)部需要處理的事情，這里還有一個(gè)細(xì)節(jié)，就是考慮到 dispatch 的觸發(fā)場景可以是異步狀態(tài)下，所以用 React-DOM 中 unstable_batchedUpdates 開啟批量更新原則。

四 useConnect

useConnect 是整個(gè)功能的核心部分，它要做的事情是獲取最新的 state ，然后通過訂閱函數(shù) mapStoreToState 得到訂閱的 state ，判斷訂閱的 state 是否發(fā)生變化。如果發(fā)生變化渲染最新的 state 。

export function useConnect(mapStoreToState=()=>{}){
/* 獲取 Store 內(nèi)部的重要函數(shù) */
const contextValue = React.useContext(ReduxContext)
const { getInitState , subscribe ,unSubscribe , dispatch } = contextValue
/* 用于傳遞給業(yè)務(wù)組件的 state */
const stateValue = React.useRef(getInitState(mapStoreToState))
/* 渲染函數(shù) */
const [ , forceUpdate ] = React.useState()
/* 產(chǎn)生 */
const connectValue = React.useMemo(()=>{
const state = {
/* 用于比較一次 dispatch 中，新的 state 和之前的state 是否發(fā)生變化 */
cacheState: stateValue.current,
/* 更新函數(shù) */
update:function (newState) {
/* 獲取訂閱的 state */
const selectState = mapStoreToState(newState)
/* 淺比較 state 是否發(fā)生變化，如果發(fā)生變化， */
const isEqual = shallowEqual(state.cacheState,selectState)
state.cacheState = selectState
stateValue.current = selectState
if(!isEqual){
/* 更新 */
forceUpdate({})
}
}
}
return state
},[ contextValue ]) // 將 contextValue 作為依賴項(xiàng)。
React.useEffect(()=>{
/* 組件掛載——注冊 connect */
const name = subscribe(connectValue)
return function (){
/* 組件卸載 —— 解綁 connect */
unSubscribe(name)
}
},[ connectValue ]) /* 將 connectValue 作為 useEffect 的依賴項(xiàng) */
return [ stateValue.current , dispatch ]
}

初始化

用 useContext 獲取上下文中， ReduxHooksStore 提供的核心函數(shù)。
用 useRef 來保存得到的最新的 state 。
用 useState 產(chǎn)生一個(gè)更新函數(shù) forceUpdate ，這個(gè)函數(shù)只是更新組件。

注冊|解綁流程

注冊：通過 useEffect 來向 ReduxHooksStore 中注冊當(dāng)前 useConnect 產(chǎn)生的 connectValue ，connectValue 是什么馬上會(huì)講到。subscribe 用于注冊，會(huì)返回當(dāng)前 connectValue 的唯一標(biāo)識(shí) name 。
解綁：在 useEffect 的銷毀函數(shù)中，可以用調(diào)用 unSubscribe 傳入 name 來解綁當(dāng)前的 connectValue

connectValue是否更新組件

connectValue ：真正地向 ReduxHooksStore 注冊的狀態(tài)，首先用 useMemo 來對 connectValue 做緩存，connectValue 為一個(gè)對象，里面的 cacheState 保留了上一次的 mapStoreToState 產(chǎn)生的 state ，還有一個(gè)負(fù)責(zé)更新的 update 函數(shù)。
更新流程：當(dāng)觸發(fā) dispatch 在 ReduxHooksStore 中，會(huì)讓每一個(gè) connectValue 的 update 都執(zhí)行， update 會(huì)觸發(fā)映射函數(shù) mapStoreToState 來得到當(dāng)前組件想要的 state 內(nèi)容。然后通過 shallowEqual 淺比較新老 state 是否發(fā)生變化，如果發(fā)生變化，那么更新組件。完成整個(gè)流程。
shallowEqual ：這個(gè)淺比較就是 React 里面的淺比較，在第 11 章已經(jīng)講了其流程，這里就不講了。

分清依賴關(guān)系

首先自定義 hooks useConnect 的依賴關(guān)系是上下文 contextValue 改變，那么說明 store 發(fā)生變化，所以重新通過 useMemo 產(chǎn)生新的 connectValue 。所以 useMemo 依賴 contextValue。
connectValue 改變，那么需要解除原來的綁定關(guān)系，重新綁定。useEffect 依賴 connectValue。

局限性

整個(gè) useConnect 有一些局限性，比如：

沒有考慮 mapStoreToState 可變性，無法動(dòng)態(tài)傳入 mapStoreToState 。
淺比較，不能深層次比較引用數(shù)據(jù)類型。

五使用與驗(yàn)證效果

接下來就是驗(yàn)證效果環(huán)節(jié)，我模擬了組件通信的場景。

根部組件注入 Store

import { ReduxContext , useConnect , useCreateStore } from './hooks/useRedux'
function Index(){
const [ isShow , setShow ] = React.useState(true)
console.log('index 渲染')
return <div>
<CompA />
<CompB />
<CompC />
{isShow && <CompD />}
<button onClick={() => setShow(!isShow)} >點(diǎn)擊</button>
</div>
}
function Root(){
const store = useCreateStore(function(state,action){
const { type , payload } =action
if(type === 'setA' ){
return {
...state,
mesA:payload
}
}else if(type === 'setB'){
return {
...state,
mesB:payload
}
}else if(type === 'clear'){ //清空
return { mesA:'',mesB:'' }
}
else{
return state
}
},
{ mesA:'111',mesB:'111' })
return <div>
<ReduxContext.Provider value={store} >
<Index/>
</ReduxContext.Provider>
</div>
}

Root根組件

通過 useCreateStore 創(chuàng)建一個(gè) store ，傳入 reducer 和初始化的值 { mesA:'111',mesB:'111' }
用 Provider 傳遞 store。

Index組件

有四個(gè)子組件 CompA ， CompB ，CompC ，CompD 。其中 CompD 是動(dòng)態(tài)掛載的。

業(yè)務(wù)組件使用

function CompA(){
const [ value ,setValue ] = useState('')
const [state ,dispatch ] = useConnect((state)=> ({ mesB : state.mesB }) )
return <div className="component_box" >
<p> 組件A</p>
<p>組件B對我說： {state.mesB} </p>
<input onChange={(e)=>setValue(e.target.value)}
placeholder="對B組件說"
/>
<button onClick={()=> dispatch({ type:'setA' ,payload:value })} >確定</button>
</div>
}
function CompB(){
const [ value ,setValue ] = useState('')
const [state ,dispatch ] = useConnect((state)=> ({ mesA : state.mesA }) )
return <div className="component_box" >
<p> 組件B</p>
<p>組件A對我說： {state.mesA} </p>
<input onChange={(e)=>setValue(e.target.value)}
placeholder="對A組件說"
/>
<button onClick={()=> dispatch({ type:'setB' ,payload:value })} >確定</button>
</div>
}
function CompC(){
const [state ] = useConnect((state)=> ({ mes1 : state.mesA,mes2 : state.mesB }) )
return <div className="component_box" >
<p>組件A ： {state.mes1} </p>
<p>組件B ： {state.mes2} </p>
</div>
}
function CompD(){
const [ ,dispatch ] = useConnect( )
console.log('D 組件更新')
return <div className="component_box" >
<button onClick={()=> dispatch({ type:'clear' })} > 清空 </button>
</div>
}

CompA 和 CompB 模擬組件雙向通信。
CompC 組件接收 CompA 和 CompB 通信內(nèi)容，并映射到 mes1 ，mes2 屬性上。
CompD 沒有 mapStoreToState ，沒有訂閱 state ，state 變化組件不會(huì)更新，只是用 dispatch 清空狀態(tài)。

效果

「React進(jìn)階」只用兩個(gè)自定義 Hooks 就能替代 React-Redux ?

六總結(jié)

本文通過兩個(gè)自定義 hooks 實(shí)現(xiàn)了 React-Redux 的基本功能，這個(gè)模式在真實(shí)項(xiàng)目中可以使用嗎?我覺得如果是小型項(xiàng)目，是完全可以使用的，對于大型項(xiàng)目還是用 React Redux 或者其他成熟的狀態(tài)管理工具。

原文地址：https://mp.weixin.qq.com/s/SFmTiV6yEgjQpltb07Q5Xw