課程目標(biāo)
- 掌握函數(shù)組件的創(chuàng)建與使用琅豆；
- 掌握 React 常見 Hooks 使用洋丐；
- 掌握如何自定義 Hook。
課程內(nèi)容
函數(shù)式組件
- 函數(shù)式組件，本質(zhì)就是一個(gè)常規(guī)函數(shù)捕仔，接收一個(gè)參數(shù) props 并返回一個(gè) reactNodes，即 return 該組件需要輸出的視圖盈罐；
- 函數(shù)式組件中沒有 this 和生命周期函數(shù)榜跌；
- 使用函數(shù)式組件時(shí)，應(yīng)該盡量減少在函數(shù)中聲明子函數(shù)盅粪，否則組件每次更新時(shí)都會(huì)重新創(chuàng)建這個(gè)函數(shù)钓葫。
React Hooks（鉤子）
-- React Hooks 是 React 16.8 中的新增功能，它們使您無需編寫類即可使用狀態(tài)和其它 React 功能票顾。
常用 Hook
useState
const [state, setState] = useState(initialState);- const [狀態(tài)础浮，修改該狀態(tài)的方法] = useState(初始值);
- 在同一組件中可以使用 useState 定義多個(gè)狀態(tài)；
- 注意 useState 返回的 setState 方法不會(huì)進(jìn)行對(duì)象的淺合并奠骄，即 setState 方法只接收一個(gè)參數(shù)豆同，該參數(shù)代表的就是更新完之后的新狀態(tài)；
- 會(huì)受到批處理影響含鳞，多次調(diào)用 setState 會(huì)被合并只執(zhí)行一次影锈；
- 注意 useState 返回的 setState 方法同樣是異步方法。
import { useState } from "react"; function Child(props) { const [count, setCount] = useState(5); const [num, setNum] = useState(0) console.log('render'); return ( <> <h3>Child：{props.info}</h3> <h3>Count: {count}</h3> <h3>Num: {num}</h3> <button onClick={ () => { setCount(count+1); setCount(count+1); setCount(count+1); setCount(count+1); setCount(count+1); console.log('setCount'); // 先打印 setCount蝉绷，然后打印 render鸭廷，count只加1 }} >Count遞增</button> <button onClick={ () => { setTimeout(() => { setNum(num+1) setNum(num+1) setNum(num+1) setNum(num+1) setNum(num+1) console.log('setNum'); // 先打印兩次 render，再打印 setNum潜必，num只加1 }, 0); }} >Num遞增</button> </> ); } export default Child; - 只在 React 函數(shù)中調(diào)用 Hook：
- React 函數(shù)組件中靴姿；
- React 自定義 Hook 中；
- 只在最頂層使用 Hook：在 React 中要保證 hook 的執(zhí)行順序在組件更新前后一致磁滚，否則會(huì)報(bào)錯(cuò)
React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render，原因且看下面 hook 實(shí)現(xiàn)原理：// useState 實(shí)現(xiàn)原理初版 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="root"></div> <script> let state=null; function useState(init){ let nowState = state === null?init:state; return [nowState,(newState)=>{ state=newState; render(); }]; } function render(){ let root = document.querySelector("#root"); let p = document.createElement("p"); let btn = document.createElement("button"); let [count,setCount] = useState(10); p.innerHTML = "count:" + count; btn.innerHTML = "遞增"; root.innerHTML = ""; btn.onclick=()=>{ setCount(count+1); } root.appendChild(p); root.appendChild(btn) } render(); </script> </body> </html>// hook 為什么要保持調(diào)用順序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="root"></div> </body> <script> let state = []; let index = 0; function useState(init) { let nowIndex = index++; if(state[nowIndex] === undefined) { state[nowIndex] = init; } return [state[nowIndex], val => { state[nowIndex] = val; console.log(nowIndex, val) render(); }] } function render() { index = 0; const div = document.createElement('div'); const button = document.createElement('button'); const root = document.querySelector('#root'); const [count, setCount] = useState(10); div.innerHTML = 'Count: ' + count; button.innerHTML = '遞增'; button.onclick = function() { setCount(count + 1); } root.innerHTML = ''; root.appendChild(div); root.appendChild(button); const div2 = document.createElement('div'); const button2 = document.createElement('button'); const [num, setNum] = useState(20); div2.innerHTML = 'Count2: ' + num; button2.innerHTML = '遞增2'; button2.onclick = function() { setNum(num + 1); } root.appendChild(div2); root.appendChild(button2); } render(); </script> </html>
useEffect
- 可以完成的作用等同于類組件中的生命周期函數(shù)：componentDidMount、componentDidUpdate 和 componentWillUnmount垂攘；
- 需要清除的副作用维雇。
// 基本使用 import { useEffect, useState } from "react"; function Effect() { /** * useEffect 副作用鉤子：用于在 React 函數(shù)中來處理副作用【數(shù)據(jù)請求、DOM 操作】 useEffect( () => { // effect 函數(shù) return () => { // cleanUp 函數(shù)晒他， 可選 } }, [依賴數(shù)據(jù)]) // 依賴函數(shù)也是可選的 掛載階段： 從上向下一行行執(zhí)行代碼吱型，如果碰到 useEffect，則將對(duì)應(yīng)的 effect陨仅、cleanUp 函數(shù)分別存儲(chǔ)到一個(gè)隊(duì)列中津滞，當(dāng)組件掛在完成后，按添加順序執(zhí)行 effect 函數(shù)灼伤；cleanUp 函數(shù)不執(zhí)行触徐； 更新階段： 從上向下一行行執(zhí)行代碼，如果碰到 useEffect狐赡，則將對(duì)應(yīng)的 effect 函數(shù)存儲(chǔ)到一個(gè)隊(duì)列中撞鹉；當(dāng)組件更新完成之后，找到之前存儲(chǔ)的 cleanUp 隊(duì)列颖侄，依次執(zhí)行鸟雏；然后再按照添加順序依次執(zhí)行 effect 隊(duì)列、獲取 cleanUp 函數(shù)并存儲(chǔ)到一個(gè)隊(duì)列中览祖；如果有依賴參數(shù)孝鹊，則對(duì)應(yīng)的依賴參數(shù)發(fā)生變化才會(huì)執(zhí)行更新階段的代碼；如果沒有依賴參數(shù)展蒂，則只要組件有更新就會(huì)執(zhí)行更新階段代碼惶室； 卸載階段： 找到對(duì)應(yīng)的 cleanUp 隊(duì)列，依次執(zhí)行玄货。 依賴參數(shù)：（只對(duì)更新階段有影響） 1皇钞、不寫依賴參數(shù) useEffect(()=>{})，組件有更新松捉，就會(huì)執(zhí)行 cleanUp 函數(shù) 和 effect 函數(shù)夹界； 2、有具體依賴參數(shù)（1-多個(gè)）useEffect(()=>{},[a[,b,...])隘世，則組件更新時(shí)可柿，其依賴參數(shù)有變化，會(huì)執(zhí)行其 cleanUp 函數(shù)和 effect 函數(shù)丙者； 3复斥、有具體依賴參數(shù)（0個(gè)）useEffect(()=>{},[])，則組建更新時(shí)械媒，不會(huì)執(zhí)行其 cleanUp 和 effect 函數(shù)目锭，只有加載完成和卸載階段會(huì)執(zhí)行這里的代碼评汰。 */ const [count, setCount] = useState(5); useEffect( () => { console.log('effect-1'); return () => { console.log('cleanUp-1'); } }); useEffect( () => { console.log('effect-2'); return () => { console.log('cleanUp-2'); } }); console.log('render'); return ( <> <h3>Count: {count}</h3> <button onClick={()=>setCount(count+1)}>遞增</button> </> ); } export default Effect; - 和類組件的生命周期進(jìn)行對(duì)應(yīng)：能對(duì)應(yīng)到的生命周期如下
- 掛在完成之后，做某事痢虹；
- 更新完成之后被去，做某事；
- 掛載完成和更新完成之后奖唯，做某事惨缆；
- 即將卸載時(shí)，做某事丰捷。
import { useEffect, useRef } from "react"; function EffectLife() { useEffect( () => { console.log('2--掛載完成之后'); return () => { console.log('即將卸載時(shí)做某事'); } }, []); useEffect( () => { console.log('3--更新坯墨、掛載完成之后都會(huì)做某事'); }); // 只在更新階段做某事【需要使用到 useRef】 const isMount = useRef(false); useEffect( () => { if(isMount.current) { console.log('更新階段做某事'); } else { isMount.current = true; } }) console.log('1--render'); return ( <> <h3>Effect Life</h3> </> ); } export default EffectLife;
useRef
- 用戶關(guān)聯(lián)原生 DOM 節(jié)點(diǎn)；
- 或者用來記錄組件更新前的一些數(shù)據(jù)病往。
import { useEffect, useRef, useState } from "react"; function RefTest() { // const ref = useRef(init); // 1.關(guān)聯(lián)節(jié)點(diǎn)實(shí)例 // 2.傳遞組件更新前的一些數(shù)據(jù)捣染，當(dāng) useRef 中存儲(chǔ)的是某項(xiàng)數(shù)據(jù)時(shí)，該數(shù)據(jù)并不會(huì)隨著組件的更新而自動(dòng)更新 const [count, setCount] = useState(5888); const ref = useRef(count); const countRef = useRef(); useEffect( () => { ref.current = count; console.log(ref, countRef.current.innerHTML); }) return ( <> <div ref={countRef}>Count: {count}</div> <button onClick={()=> { setCount(count+1); }} >遞增</button> </> ); } export default RefTest;
useMemo
- const data = useMemo(cb, []); 類似于 useState荣恐，有一個(gè)依賴參數(shù)液斜。
// 發(fā)現(xiàn)做任何操作，都會(huì)執(zhí)行 maxValue 函數(shù) import { useState } from "react"; function MemoTest() { const [count, setCount] = useState(1); const [num, setNum] = useState(5); const [val, setVal] = useState(''); const plusCount = () => { console.log('plusCount'); setCount(count+1); }; const minusCount = () => { console.log('minusCount'); setCount(count-1); }; const plusNum = () => { console.log('plusNum'); setNum(num+1); }; const minusNum = () => { console.log('minusNum'); setNum(num-1) }; const valueChange = ({target}) => { console.log('valueChange'); setVal(target.value) }; const maxValue = () => { console.log('maxValue'); return count>num?"count":"num"; }; return ( <> <h3>MemoTest</h3> <div>Count: {count}; <button onClick={plusCount}>+</button>, <button onClick={minusCount}>-</button></div> <div>Num: {num}; <button onClick={plusNum}>+</button>, <button onClick={minusNum}>-</button></div> <p>當(dāng)前比較大的值為：{maxValue()}</p> <div><input value={val} onChange={valueChange} /></div> <p>{val}</p> </> ); } export default MemoTest;import { useMemo, useState } from "react"; /** * useMemo(cb, []) * 不是函數(shù)叠穆，直接等于 cb 的返回值少漆。 * 發(fā)現(xiàn)只有修改 count、num 的值才會(huì)打印 maxValue硼被，在輸入框中輸入內(nèi)容時(shí)不再打印 */ function MemoTest() { const [count, setCount] = useState(1); const [num, setNum] = useState(5); const [val, setVal] = useState(''); const plusCount = () => { console.log('plusCount'); setCount(count+1); }; const minusCount = () => { console.log('minusCount'); setCount(count-1); }; const plusNum = () => { console.log('plusNum'); setNum(num+1); }; const minusNum = () => { console.log('minusNum'); setNum(num-1) }; const valueChange = ({target}) => { console.log('valueChange'); setVal(target.value) }; const maxValue = useMemo(() => { console.log('maxValue'); return count>num?"count":"num"; }, [num, count]); return ( <> <h3>MemoTest</h3> <div>Count: {count}; <button onClick={plusCount}>+</button>, <button onClick={minusCount}>-</button></div> <div>Num: {num}; <button onClick={plusNum}>+</button>, <button onClick={minusNum}>-</button></div> <p>當(dāng)前比較大的值為：{maxValue}</p> <div><input value={val} onChange={valueChange} /></div> <p>{val}</p> </> ); } export default MemoTest;
useCallback
- 是 useMemo 的一個(gè)進(jìn)化體示损；
- 當(dāng) useMemo 返回一個(gè)函數(shù)時(shí)，可以使用 useCallback 來改進(jìn)嚷硫；
- 將上面的代碼進(jìn)行改進(jìn)检访，修改 plusCount，只有在 count 進(jìn)行更新時(shí)才會(huì)進(jìn)行聲明子函數(shù)：
import { useCallback, useMemo, useState } from "react"; /** * useMemo(cb, []) * 當(dāng) useMemo 返回值是一個(gè)函數(shù)時(shí)仔掸，可以使用 useCallback 來優(yōu)化 */ function CallbackTest() { const [count, setCount] = useState(1); const [num, setNum] = useState(5); const [val, setVal] = useState(''); const plusCount = useCallback( () => { console.log('plusCount'); setCount(count+1); }, [count]); const minusCount = useCallback(() => { console.log('minusCount'); setCount(count-1); }, [count]); const plusNum = useCallback(() => { console.log('plusNum'); setNum(num+1); }, [num]); const minusNum = useCallback(() => { console.log('minusNum'); setNum(num-1) }, [num]); const valueChange = useCallback(({target}) => { console.log('valueChange'); setVal(target.value) }, [val]); const maxValue = useMemo(() => { console.log('maxValue'); return count>num?"count":"num"; }, [num, count]); return ( <> <h3>MemoTest</h3> <div>Count: {count}; <button onClick={plusCount}>+</button>, <button onClick={minusCount}>-</button></div> <div>Num: {num}; <button onClick={plusNum}>+</button>, <button onClick={minusNum}>-</button></div> <p>當(dāng)前比較大的值為：{maxValue}</p> <div><input value={val} onChange={valueChange} /></div> <p>{val}</p> </> ); } export default CallbackTest; - 使用 useCallback脆贵、useMemo，會(huì)更麻煩一點(diǎn)起暮，但是性能會(huì)有很大提升卖氨。
Memo
- React.memo(Component, [areEqual(prevProps, nextProps]);
Hook 使用規(guī)則
- 只在 React 函數(shù)中調(diào)用 Hook；
- React 函數(shù)組件中负懦；
- React 自定義 Hook 中筒捺；
- 只在最頂層使用 Hook。
自定義 Hook
- 常用來解決（與狀態(tài)相關(guān)的）邏輯復(fù)用問題纸厉；
- 自定義 hook 就是一個(gè)普通函數(shù)系吭，但是該函數(shù)必須以 use 開始命名；
import { useCallback, useMemo, useState } from "react"; function useCount(init) { const [count, setCount] = useState(init); const plusCount = useCallback(() => { setCount(count + 1); }, [count]); const minusCount = useCallback(() => { setCount(count - 1); }, [count]); return [count, plusCount, minusCount]; } function HookTest() { const [count, plusCount, minusCount] = useCount(1); const [num, plusNum, minusNum] = useCount(5); const [val, setVal] = useState(''); const valueChange = useCallback(({target}) => { console.log('valueChange'); setVal(target.value) }, [val]); const maxValue = useMemo(() => { console.log('maxValue'); return count>num?"count":"num"; }, [num, count]); return ( <> <h3>MemoTest</h3> <div>Count: {count}; <button onClick={plusCount}>+</button>, <button onClick={minusCount}>-</button></div> <div>Num: {num}; <button onClick={plusNum}>+</button>, <button onClick={minusNum}>-</button></div> <p>當(dāng)前比較大的值為：{maxValue}</p> <div><input value={val} onChange={valueChange} /></div> <p>{val}</p> </> ); } export default HookTest;
