react函數(shù)組件與hooks
組件每次更新時(shí)都會(huì)重新執(zhí)行函數(shù)
HOOK介紹
每次渲染時(shí)它們的調(diào)用順序是不變的
你可以在一個(gè)組件中多次使用 State Hook:
- React 函數(shù)組件中
- React 自定義 Hook 中
- 只在最頂層使用 Hook：在 React 中要保證 hook 的執(zhí)行順序穆趴，組件前和更新后 hook 的執(zhí)行順序要保持一致
useState
接受初始狀態(tài)值锈麸，可以是任何數(shù)據(jù)類(lèi)型邮绿。返回一個(gè)數(shù)組炼杖，分別為狀態(tài)值和修改狀態(tài)值的方法卖鲤。
同樣會(huì)受到批處理影響甜熔，多次使用 setState 會(huì)被合并只執(zhí)行一次更新器腋。
初始 state 參數(shù)只有在第一次渲染時(shí)會(huì)被用到伏钠。
setState可以接受新值盗痒，也可以接受函數(shù)蚂蕴，入?yún)楦虑暗闹?返回新值。
function Counter({initialCount}) {
const [count, setCount] = useState(initialCount);
return (
<>
Count: {count}
<button onClick={() => setCount(initialCount)}>Reset</button>
<button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
<button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
</>
);
}
惰性初始 state：如果初始 state 需要通過(guò)復(fù)雜計(jì)算獲得俯邓，則可以傳入一個(gè)函數(shù)骡楼，在函數(shù)中計(jì)算并返回初始的 state，此函數(shù)只在初始渲染時(shí)被調(diào)用：
const [state, setState] = useState(() => {
const initialState = someExpensiveComputation(props);
return initialState;
});
需要解構(gòu)賦值
function App() {
const [person, setPerson] = useState({ name: 'le', age: 18 })
function handleCount() {
setCount(() => count + 1)
document.title = count//title是加1前的值
}
return (
<div>
{count}
{person.name + ':' + person.age}
<button onClick={() => setPerson({ ...person, age: person.age + 1 })} >年齡加1</button>
</div>
)
}
Effect Hook
一般用于處理副作用（數(shù)據(jù)獲取稽鞭、訂閱或者手動(dòng)修改過(guò) DOM等）。
掛載階段：
依次將 effect 函數(shù)，存儲(chǔ)到一個(gè)隊(duì)列中桂塞，當(dāng)組件掛載完成之后刊愚，依次執(zhí)行 effect 隊(duì)列，獲取 cleanup 函數(shù)吩抓，將 cleanup 函數(shù)存入一個(gè)隊(duì)列涉茧。
更新階段：
依次將 effect 函數(shù)，存儲(chǔ)到一個(gè)隊(duì)列中琴拧，當(dāng)組件更新完成之后降瞳，找到 cleanup 隊(duì)列，依次執(zhí)行蚓胸。按添加順序執(zhí)行 effect 隊(duì)列挣饥，獲取 cleanup 函數(shù)，將 cleanup 函數(shù)存入一個(gè)隊(duì)列沛膳。（useEffect 對(duì)應(yīng)的依賴(lài)數(shù)據(jù)如果沒(méi)變化扔枫，不執(zhí)行）
卸載階段：
依次執(zhí)行cleanup 隊(duì)列
依賴(lài)參數(shù)：
無(wú)依賴(lài)參數(shù), 組件有更新，就會(huì)執(zhí)行其 cleanup 函數(shù) 和 effect 函數(shù)
空數(shù)組依賴(lài)锹安，則組件更新時(shí)短荐，不會(huì)執(zhí)行其 cleanup 和 effect
有具體依賴(lài)參數(shù)倚舀，則組件更新時(shí)，其依賴(lài)參數(shù)有變化忍宋，會(huì)執(zhí)行其 cleanup 函數(shù) 和 effect 函數(shù)
useEffect(() => {
console.log("無(wú)依賴(lài)");
return () => {
console.log("cleanup-無(wú)依賴(lài)");
}
});
useEffect(() => {
console.log("依賴(lài)空數(shù)組");
return () => {
console.log("cleanup-依賴(lài)空數(shù)組");
}
}, []);
useEffect(() => {
console.log("依賴(lài)數(shù)據(jù)");
return () => {
console.log("cleanup-依賴(lài)數(shù)據(jù)");
}
}, [val, count]);
useContext
接受context痕貌，由距離當(dāng)前組件最近的 <MyContext.Provider> 的 value prop 決定。
//創(chuàng)建context文件
import {createContext} from "react";
const context = createContext();
//使用context函數(shù)
import {useContext} from "react";
const value = useContext(context);
useRef
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// `current` 指向已掛載到 DOM 上的文本輸入元素
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}
