[React]Hook初探
- 2020 年 4 月 4 日
- 筆記
Hook是什麼
Hook是React從16.8開始支持的特性，使用Hook可以在不使用class時使用state
Hook支持在不需要修改組件狀態的情況下復用邏輯狀態，從而解決使用render prop和高階組件產生的代碼結構複雜的問題
Hook可以解決在class中因為組件在生命周期函數內分散處理導致的邏輯混亂。
Hook可以解決在class中this的複雜問題。
Hook的結構
State Hook
在通過state進行狀態管理時，我們會使用contructor()構造器來初始化state,使用setState()更新state的狀態
在Hook里，不再使用以上的兩種方法，將會使用
const [name,setName]=useState(defaultValue); 這樣的方法進行對狀態進行管理。
UseState將會被調用來為函數組件添加state，一個useState方法將會返回一對值（一個數組），一個當前狀態和更新這個當前狀態的函數，可以在組件的其他地方調用這個更新函數。
這對返回值使用數組解構。
一個useState語句將會創造一個狀態。
Effect Hook
我們可以把useEffect看作是componentDidMount，componentDidUpdate 和 componentWillUnmount 這三個函數的組合。
useEffect的第二個可選參數是判斷是否執行該函數，如果第二個參數在重渲染的時候沒有發生改變，將會跳過這個當前的useEffect。
如果第二個參數是一個空數組([])，effect將只會在組件掛載和卸載時執行,然而這種操作存在風險，具體的見文檔中的Hook/FAQ:在依賴列表中省略函數是否安全？
一個簡單的例子
import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); // 相當於 componentDidMount 和 componentDidUpdate: useEffect(() => { // 使用瀏覽器的 API 更新頁面標題 document.title = `You clicked ${count} times`; }); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } 在這個例子中，聲明了一個名為count的狀態，在每次點擊button時，通過事件處理將會使count+1，在useEffect函數中，使用瀏覽器的API將count顯示。
