原定標題你真的需要redux嗎-利用react hook來實現redux但好像無法擠一篇完成啊??
其實我個人只使用過redux的管理資料方式,關於利用hook達到跟redux相同功能也只看過前輩的code,並無自己實際去操作及撰寫過。今天就透過我這redux愛用者的角度去研究看看類似功用的hook吧。
參考文章:
React | 在 Hooks 中以 useContext 與 useReducer 實現 Redux
這篇文章解析得非常清楚,而且直接就有把redux與hook實際上操作放上比較,看完我的菜鳥解讀後還不了解的話,這篇文章非常值得參考,大推特推。
useContext
const value = useContext(MyContext);
能跨component傳遞props,讓所有子層或子子孫孫層取用 props,而不是一個一個向下傳遞 props。
React.createContext
const MyContext = React.createContext(defaultValue);
需要帶入一個初始值,以及創建一個Context object
<MyContext.Provider value={val}>
<MyContext.Provider>
的更新時,此 Hook 將觸發重新渲染,並將最新的value
傳遞給該MyContext
。即使上層使用React.memo
or shouldComponentUpdate
,仍會重新渲染。
當value
變化時,有調用useContext
的component會重新渲染。可以使用 memoization 對其進行優化。
類似Redux的<Provider store={store}>
,不過Redux中的store值有所改變時並不會導致重新渲染。
// createContext
const ThemeContext = React.createContext(themes.light);
function App() {
return (
<ThemeContext.Provider value={themes.dark}>
<Toolbar />
</ThemeContext.Provider>
);
}
// redux store
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { App } from './App'
import createStore from './createReduxStore'
const store = createStore()
// As of React 18
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
<Provider store={store}>
<App />
</Provider>
)
}
上個官網的demo code吧
const themes = {
light: {
foreground: "#000000",
background: "#eeeeee"
},
dark: {
foreground: "#ffffff",
background: "#222222"
}
};
// grandpa component賦予值
const ThemeContext = React.createContext(themes.light);
function App() {
return (
<ThemeContext.Provider value={themes.dark}>
<Toolbar />
</ThemeContext.Provider>
);
}
// parent component
function Toolbar(props) {
return (
<div>
<ThemedButton />
</div>
);
}
// children component可取用
function ThemedButton() {
const theme = useContext(ThemeContext);
return (
<button style={{ background: theme.background, color: theme.foreground }}>
I am styled by theme context!
</button>
);
}
參考文章:
https://dev.to/eswaraprakash/react-usecontext-and-usereducer-hooks-2pkm
內容不少剩下明天繼續吧:
帶您認識 useReducer, aka useContext好夥伴