一、useContext
useContext()的出現，方便了我們在組件之間的狀態共享。
1 import React, { useContext } from "react"; 2 import ReactDOM from "react-dom"; 3 const TestContext= React.createContext({}); 4 const Navbar = () => { 5 const { username } = useContext(TestContext) 6 return ( 7 <div className="navbar">
8 <p>{username}</p>
9 </div>
10 ) 11 } 12 const Messages = () => { 13 const { username } = useContext(TestContext) 14 return ( 15 <div className="messages">
16 <p>1 message for {username}</p>
17 </div>
18 ) 19 } 20 function App() { 21 return ( 22 <TestContext.Provider 23 value={{ 24 username: 'superawesome', 25 }} 26 >
27 <div className="test">
28 <Navbar />
29 <Messages />
30 </div>
31 <TestContext.Provider/>
32 ); 33 } 34 const rootElement = document.getElementById("root"); 35 ReactDOM.render(<App />, rootElement);
二、useReducer
useReducer 類似 redux 中的功能，相較於 useState，它更適合一些邏輯較復雜且包含多個子值，或者下一個 state 依賴於之前的 state 等等的特定場景， useReducer 總共有三個參數
- 第一個參數是 一個 reducer，就是一個函數類似 (state, action) => newState 的函數，傳入 上一個 state 和本次的 action
- 第二個參數是初始 state，也就是默認值，是比較簡單的方法
- 第三個參數是惰性初始化，這么做可以將用於計算 state 的邏輯提取到 reducer 外部，這也為將來對重置 state 的 action 做處理提供了便利
1 function reducer(state, action) { 2 switch (action.type) { 3 case 'increment': 4 return {count: state.count + 1}; 5 case 'decrement': 6 return {count: state.count - 1}; 7 default: 8 throw new Error(); 9 } 10 } 11 function App() { 12 const [state, dispatch] = useReducer(reducer, {count: 0}); 13 return ( 14 <>
15 點擊次數: {state.count} 16 <button onClick={() => dispatch({type: 'increment'})}>+</button>
17 <button onClick={() => dispatch({type: 'decrement'})}>-</button>
18 </>
19 ); 20 }