Tip: hook使用規(guī)則：
1.只能在函數(shù)最外層調(diào)用 Hook个初。不要在循環(huán)企巢、條件判斷或者子函數(shù)中調(diào)用
2.只能在 React 的函數(shù)組件中調(diào)用 Hook。不要在其他 JavaScript 函數(shù)中調(diào)用综慎。(或者自定義hook)
1.useState : [count,setCount] = useState(0);
更新state沒次都是合并上一次的數(shù)據(jù)（ 不會(huì)自動(dòng)合并）窗宦，class類組件中的this.setState更新是替換上一次的數(shù)據(jù)
改變時(shí)不會(huì)同步的拿到改變的數(shù)據(jù)，解決辦法：使用useRef（const countRef = useRef(count)）取值是獲取countRef.current;
定義的state數(shù)據(jù)如果渲染了一次組件之后就不會(huì)重新渲染咏闪，可以給組件加key解決
useState使用時(shí)可以結(jié)合useImmer一起使用效果更佳曙搬！
2.useEffect:三種使用方法
useEffect 類似 componentDidMount，componentDidUpdate 和 componentWillUnmount 這三個(gè)函數(shù)的組合鸽嫂。
而useLayoutEffect更加類似componentDidMount
可以通過return清除操作纵装，每次實(shí)行新的Effect的時(shí)候會(huì)先處理上一次的Effect。
1.useEffect(()=>{})
每次渲染組件或者更新組件都會(huì)執(zhí)行
2.useEffect(()=>{},['變量'])
監(jiān)聽參數(shù)變化据某，有變化執(zhí)行
3.useEffect(()=>{},[])
組件初次加載執(zhí)行一次
3.自定義hook:
import React, { useState, useEffect } from 'react';
function useFriendStatus(friendID) { const [isOnline, setIsOnline] = useState(null);
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
useEffect(() => {
ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
};
});
return isOnline;
}
將friendID作為參數(shù)返回isOnline
在兩個(gè)獨(dú)立的組件中分別使用橡娄，兩個(gè)組件的state是獨(dú)立的：
function FriendStatus(props) {
const isOnline = useFriendStatus(props.friend.id);
if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
}
function FriendListItem(props) {
const isOnline = useFriendStatus(props.friend.id);
return (
<li style={{ color: isOnline ? 'green' : 'black' }}>
{props.friend.name}
</li>
);
}
一般使用名字使用“use”開頭并調(diào)用其他hook，我們就說這是一個(gè)自定義hook
4.useMemo 計(jì)算結(jié)果是return返回的值癣籽， 會(huì)緩存結(jié)果值 在組件渲染是執(zhí)行的函數(shù)類似 shouldComponentUpdate挽唉，不要在里面寫更改state和一些副作用（Effect）操作扳还，可能會(huì)死循環(huán)。
const name_new = useMemo((
return name;
)=>{},[name])
5.useCallBack 計(jì)算結(jié)果是 func 主要用于緩存函數(shù)（同useMemo類似）
const name_new = useCallback((
console.log("name發(fā)生變化我才會(huì)變")
)=>{},[name])
