新玩具，React v16.7.0-alpha Hooks

摘要： 週五看見React v16.7.0-alpha Hooks，今早起來看見圈裡已經刷屏了Hooks，正好週末，正好IG和G2的比賽還沒開始，研究下。。。 剛剛接觸react時候非常喜歡用函式式元件，因為太簡潔了寫起來非常快，然後然後。。寫到後面發現很多自己以前寫的元件需要改。。為什麼呢，因為...

週五看見React v16.7.0-alpha Hooks，今早起來看見圈裡已經刷屏了Hooks，正好週末，正好IG和G2的比賽還沒開始，研究下。。。

剛剛接觸react時候非常喜歡用函式式元件，因為太簡潔了寫起來非常快，然後然後。。寫到後面發現很多自己以前寫的元件需要改。。為什麼呢，因為自己當時寫的時候考慮的不周到，後期發現很多地方都需要生命週期和狀態來進行渲染優化，然後就是大量修改函式式為classComponent。所以現在起手一般都是classComponent，只有極簡單的元件用函式式比如列表item啥的。

現在有了Hooks,"Hooks" 本意是”鉤子“的意思。在 React 裡，hooks 就是一系列特殊的函式，使函式元件 (functional component) 內部能夠”鉤住“ React 內部的 state 和 life-cycles。

:v: Rules of Hooks

• 只能在頂層呼叫Hooks 。不要在迴圈，條件或巢狀函式中呼叫Hook
• 只能在functional component中使用

:pushpin: 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

:zap:️ 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 後觸發）。

:bulb: Custom Hooks

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>
);
}

:electric_plug: Other Hooks

• 你可能會發現一些不太常用的內建Hook很有用。
• useContext：

function Example() {
const locale = useContext(LocaleContext);
const theme = useContext(ThemeContext);
// ...
}

• useReducer

function Todos() {
const [todos, dispatch] = useReducer(todosReducer);
// ...

總結

以後可以更愉快的寫functional component了:smiley::smiley::smiley:

參考

預言

等下比賽IG應該可以3：2拿下，為啥是3，因為想多看幾場呀

最後

大家好，這裡是「 TaoLand 」，這個部落格主要用於記錄一個菜鳥程式猿的Growth之路。這也是自己第一次做部落格，希望和大家多多交流，一起成長！文章將會在下列地址同步更新……

個人部落格：www.yangyuetao.cn

小程式：TaoLand