什麼是Hooks
“Hooks” 本意是”鉤子“的意思。在 React 裏,hooks 就是一系列特殊的函數,使函數組件 (functional component) 內部能夠”鉤住“ React 內部的 state 和 life-cycles。
爲什麼使用Hooks
剛剛接觸react時候非常喜歡用函數式組件,因爲太簡潔了寫起來非常快,然後然後。。寫到後面發現很多自己以前寫的組件需要改。。爲什麼呢,因爲自己當時寫的時候考慮的不周到,後期發現很多地方都需要生命週期和狀態來進行渲染優化,然後就是大量修改函數式爲classComponent。所以現在起手一般都是classComponent,只有極簡單的組件用函數式比如列表item啥的。
使用Hooks的規則
- 只能在頂層調用Hooks 。不要在循環,條件或嵌套函數中調用Hook
- 只能在functional component(函數式組件)中使用
Hooks
State Hook
- 即在函數式中使用state
import { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
//const [age, setAge] = useState(42);
//const [fruit, setFruit] = useState('banana');
//const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
useState
的參數就是以前state的初始值。useState
返回的值中第一個參數是以前的state,第二個參數是setState
,不過以前我們只有一個state,現在可以自由命名,更直觀了,比如上面的age
和setAge
,fruit
和setFruit
Effect Hook
- effect Hook使我們可以使用生命週期了
function FriendStatusWithCounter(props) {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
// ...
- 每當 React更新之後,就會觸發 useEffect(在第一次 render 和每次 update 後觸發)。
Custom Hooks
- 有時,我們希望在組件之間重用一些有狀態邏輯。
- 首先,我們將這個邏輯寫到useFriendStatus:返回朋友在線的狀態
isOnline
import { 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;
}
- 然後我們在其他組件中使用
function FriendListItem(props) {
const isOnline = useFriendStatus(props.friend.id);
return (
<li style={{ color: isOnline ? 'green' : 'black' }}>
{props.friend.name}
</li>
);
}
Other Hooks
- 你可能會發現一些不太常用的內置Hook很有用。
- useContext:
function Example() {
const locale = useContext(LocaleContext);
const theme = useContext(ThemeContext);
// ...
}
- useReducer
function Todos() {
const [todos, dispatch] = useReducer(todosReducer);
// ...
總結
以後可以更愉快的寫functional component(函數式組件)了
參考
最後
大家好,這裏是「 十年雪落 」,這個博客主要用於記錄一個菜鳥程序猿的成長之路。這也是自己第一次做博客,希望和大家多多交流,一起成長!文章將會在下列地址同步更新……
博客園:www.cnblogs.com/maopixin/