標籤:mes todo amp sre 狀態 component 簡介 列表 www.
周五看見React v16.7.0-alpha Hooks,今早起來看見圈裡已經刷屏了Hooks,正好周末,正好IG和G2的比賽還沒開始,研究下。。。
剛剛接觸react時候非常喜歡用函數式組件,因為太簡潔了寫起來非常快,然後然後。。寫到後面發現很多自己以前寫的組件需要改。。為什麼呢,因為自己當時寫的時候考慮的不周到,後期發現很多地方都需要生命週期和狀態來進行渲染最佳化,然後就是大量修改函數式為classComponent。所以現在起手一般都是classComponent,只有極簡單的組件用函數式比如列表item啥的。
現在有了Hooks,"Hooks" 本意是”鉤子“的意思。在 React 裡,hooks 就是一系列特殊的函數,使函數組件 (functional component) 內部能夠”鉤住“ React 內部的 state 和 life-cycles。
?? Rules of Hooks
- 只能在頂層調用Hooks 。不要在迴圈,條件或嵌套函數中調用Hook
- 只能在functional component中使用
?? State Hook
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
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); // ...}
function Todos() { const [todos, dispatch] = useReducer(todosReducer); // ...
總結
以後可以更愉快的寫functional component了??????
參考
react官方Hooks簡介
Hooks例子
預言
等下比賽IG應該可以3:2拿下,為啥是3,因為想多看幾場呀
最後
大家好,這裡是「 TaoLand 」,這個部落客要用於記錄一個菜鳥程式猿的Growth之路。這也是自己第一次做部落格,希望和大家多多交流,一起成長!文章將會在下列地址同步更新……
個人部落格:www.yangyuetao.cn
小程式:TaoLand
新玩具,React v16.7.0-alpha Hooks