react hook是什么
react hook是react中引入新特性严嗜，它可以讓react函數(shù)組件也擁有狀態(tài)晋涣；
通過自定義hook可以實(shí)現(xiàn)在組件間公用狀態(tài)操作笨鸡；
react-hook的用法
react提供了useState扮叨、useEffect兩個(gè)hook函數(shù)來創(chuàng)建stack hook和effect hook
state hook
在函數(shù)組件內(nèi)使用useState可以給組件使用狀態(tài)唁情；
useState的入?yún)槌跏紶顟B(tài)，出參為當(dāng)前state以及更新state的函數(shù)甫匹；
function useState<S = undefined>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>];
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
useState第一次執(zhí)行時(shí)將創(chuàng)建一個(gè)狀態(tài)，之后執(zhí)行都是使用這個(gè)狀態(tài)惦费；
effect hook
使用useEffect可以給組件添加副作用邏輯兵迅；
所謂副作用個(gè)人理解是與react范圍外的世界產(chǎn)生的交互，如dom操作薪贫、網(wǎng)絡(luò)請求等(說實(shí)話，副作用具體是啥我還沒完全弄明白)；
useEffect入?yún)⒂袃蓚€(gè)第一個(gè)參數(shù)是副作用函數(shù)腰根、第二個(gè)參數(shù)是個(gè)用于判斷是否執(zhí)行副作用的數(shù)組累澡；
function useEffect(effect: EffectCallback, deps?: DependencyList): void;
type EffectCallback = () => (void | (() => void | undefined));
type DependencyList = ReadonlyArray<any>;
副作用有一個(gè)執(zhí)行過程和一個(gè)可選的清除過程，副作用函數(shù)定義了執(zhí)行過程鞍匾，它的返回值函數(shù)定義了清除過程交洗；
在組件函數(shù)中定義的副作用像是渲染結(jié)果的一部分，副作用在每次渲染后都會(huì)執(zhí)行橡淑，在渲染前构拳、組件銷毀前清除之前的副作用；這樣做使得我們的副作用可以讀到每次的props梁棠、state置森；
function FriendStatusWithCounter(props) {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});
// ...
}
如果不想每次渲染都執(zhí)行副作用，可以給useEffect第二個(gè)參數(shù)傳一數(shù)組符糊，當(dāng)數(shù)組中的元素沒有變化時(shí)凫海，不會(huì)觸發(fā)副作用；
自定義hook
自定義hook其實(shí)就是個(gè)內(nèi)部使用了useState男娄、useEffect的普通函數(shù)行贪，并且函數(shù)名以use開頭漾稀；
使用自定義hook可以將組件邏輯提取到可重用的函數(shù)中；
function useFriendStatus(friendID) {
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
};
});
return isOnline;
}
TODO
render props瓮顽、高階組件县好、effect性能優(yōu)化的注意事項(xiàng)
