?在使用 React 編寫組件的時候,我們常常會碰到兩個不同的組件之間需要共享狀態情況,而通常的做法就是提升狀態到父組件。但是這樣做會有一個問題,就是盡管只有兩個組件需要這個狀態,但是因為把狀態提到了父組件,那么在狀態變化的時候,父組件以及其下面的所有子組件都會重新 render,如果你的父組件比較復雜,包含了其他很多子組件的話,就有可能引起性能問題。
Redux 通過把狀態放在全局的 store 里,然后組件去訂閱各自需要的狀態,當狀態發生變化的時候,只有那些訂閱的狀態發生變化的組件才重新 render,這樣就避免了上面說的提升狀態所帶來的副作用。但是,當我們在寫一個 React 組件庫的時候,redux 加 react-redux 的組合可能就有點太重了。所以我們可以自己寫一個簡單的 store,來實現類似 Redux 的訂閱模式。
參考 Redux 的實現來寫一個簡版的 createStore:
我們的 createStore 非常簡單,算上空行也只有 33 行,總共暴露了 3 個方法,沒有 Redux 里的 dispatch 和 reducer,直接通過 setState 方法改變狀態。下面我們來用它一個計數器的例子。
例子中 Buttons 里通過 store.setState 來改變 store 中的狀態,并不會引起整個 Counter 的重新 render,但是因為 Result 中訂閱了 store 的變化,所以當 count 有變化的時候就可以通過改變自己組件內的狀態來重新 render,這樣就巧妙地避免了不必須要的 render。
最后,上面的 createStore 雖然只有幾十行代碼,我還是把它寫成了一個叫 mini-store 庫放在 GitHub 上,并且提供了類似 Redux 的 Provider 和 connect 方法,總共加起來也就 100 多行代碼。如果你也在寫 React 組件庫,需要管理一個復雜組件的狀態,不妨試試這個優化方式。
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com