Hook

• 是React16.8一個新增項,它可以讓你在不編寫class的情況下使用state以及其他的React特性
• 特點:
  1. 無需修改組件結構的情況下復用狀態邏輯
  2. 將組件相互關聯的部分拆分成更小的函數,復雜組件將變得更容易理解
  3. 更簡潔、更易理解的代碼

使用Hook的栗子

import React, { useState } from 'react'export default function HookTest() {// useState(initState)const [count, setCount] = useState(0)// 多個狀態const [age] = useState(20)const [fruit, setFruit] = useState('banana')const [input, setInput] = useState('')const [fruits, setFruits] = useState(['apple', 'banana'])return (<div><p>點擊了 {count} 次</p>// 每點擊一次按鈕,次數+1<button onClick={() => setCount(count + 1)}>點擊</button><p>年齡: {age}</p><p>選擇的水果: {fruit}</p><p>//  每點當input框輸入改變時,更新input的值<input type="text" value={input} onChange={e => setInput(e.target.value)} />// 將水果放入水果列表中.然后清空input<button onClick={()=>{setFruits([...fruits, input]);setInput('')}}>新增水果</button></p><ul>{fruits.map(f => (<li key={f} onClick={() => setFruit(f)}>{f}</li>))}</ul></div>)
}

副作用鉤子 - Effect Hook

• useEffect就是一個Effect Hook,給函數組件增加了操作副作用的能力.
• 它跟class組件中的componentDidMount、componentDidUpdate和componentwillUnmount具有相同作用(只不過是合并了)
• 栗子: 更新 HooksTest.js

import React, {useState, useEffect } from 'react';
useEffect(() => {// Update the document title using the browser APIdocument.title = `您點擊了 ${count}次`
})// 監聽count的變化
useEffect(() => {console.log('count依賴');document.title = `您點擊了${count}次`
},[count]);
// 此時只有count發生改變時才觸發這個副作用鉤子

• 注:
  1. 相當于是觀察數據,當觀察的數據發生變化時執行
  2. 第二個參數用于收集觀察的數據

自定義鉤子 - Custom Hook

• 自定義Hook是一個函數,其名稱以"use"開頭,函數內部可以調用其他的Hook.

function useAge() {const [age, setAge] = useState(0);useEffect(() => {setTimeout(() =>{setAge(20)}, 2000)});return age;
}// 使用
const age = useAge();
<p>年齡 {age? age: 'loading...' }</p>