useState語法講解
語法定義
const [state, dispatch] = useState(initData)
- state：定義的數據源，可視作一個函數組件內部的變量，但只在首次渲染被創造。
- dispatch：改變state的函數，推動函數渲染的渲染函數。dispatch有兩種情況-非函數和函數。
- initData：state的初始值，initData有兩種情況-非函數和函數。
案例演示
- 變量定義
const [count, setCount] = useState('河畔一角');// 更新count
setCount('zhangsan')
- 對象定義
const [user, setUser] = useState({ name: '河畔一角', age: 30 });// 更新對象
setUser({...user, age:20})
- 數組定義
const [list, setList] = useState(['Tom', 'Jack']);// 更新數組
setList([...list, 'zhangsan'])
- 異步執行
const [count, setCount] = useState(0);// 點擊按鈕，執行三次// 1
setCount(count + 1)
setCount(count + 1)
setCount(count + 1)// 點擊按鈕，異步執行
setTimeout(()=>{setCount(count + 1)
})
- 函數執行
const [count, setCount] = useState(0);// 使用函數更新
setCount(count => count + 1)
Hook開發規則
https://zh-hans.reactjs.org/docs/hooks-rules.html
只在最頂層使用 Hook
不要在循環，條件或嵌套函數中調用 Hook， 確保總是在你的 React 函數的最頂層以及任何 return 之前調用他們。遵守這條規則，你就能確保 Hook 在每一次渲染中都按照同樣的順序被調用。這讓 React 能夠在多次的 useState 和 useEffect 調用之間保持 hook 狀態的正確。(如果你對此感到好奇，我們在下面會有更深入的解釋。)
只在 React 函數中調用 Hook
不要在普通的 JavaScript 函數中調用 Hook
- ? 在 React 的函數組件中調用 Hook
- ? 在自定義 Hook 中調用其他 Hook
遵循此規則，確保組件的狀態邏輯在代碼中清晰可見。
