Hook
沒有破壞性的改動
- 完全可選的绷落。 你無需重寫任何已有代碼就可以在一些組件中嘗試 Hook拨黔。
- 100% 向后兼容的。 Hook 不包含任何破壞性改動匾竿。
- 現(xiàn)在可用瓦宜。 Hook 已發(fā)布于 v16.8.0。
動機
- Hook 使你在無需修改組件結(jié)構(gòu)的情況下復(fù)用狀態(tài)邏輯岭妖。
- Hook 將組件中相互關(guān)聯(lián)的部分拆分成更小的函數(shù)（比如設(shè)置訂閱或請求數(shù)據(jù)）临庇。
- Hook 使你在非 class 的情況下可以使用更多的 React 特性。
相較于js額外的規(guī)則
- 只能在函數(shù)最外層調(diào)用 Hook昵慌。不要在循環(huán)假夺、條件判斷或者子函數(shù)中調(diào)用。
- 只能在 React 的函數(shù)組件中調(diào)用 Hook斋攀。不要在其他 JavaScript 函數(shù)中調(diào)用已卷。
useState Hook
- 通過useState的方式來定義一個state
const [count,setCount]=useState(0)后面（0）是設(shè)置默認為0
- 通過
setCount(count+1)來獲取數(shù)據(jù)和修改數(shù)據(jù)
Effect Hook
- 跟 class 組件中的
componentDidMount、componentDidUpdate和 componentWillUnmount具有相同的用途淳蔼。
- 可以通過返回一個函數(shù)來指定如何“清除”副作用侧蘸。例如
useEffect(() => {
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});
- Effect可以定義多個，可以按照代碼的用途分離他們實現(xiàn)關(guān)注點分離鹉梨，比如需要銷毀的可以放一起統(tǒng)一銷毀讳癌。
- 可以設(shè)置某些特定值在兩次重渲染之間沒有發(fā)生變化的情況下跳過Effrct
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]); // 僅在 count 更改時更新
