Hook

• 是React16.8一個(gè)新增項(xiàng),它可以讓你在不編寫class的情況下使用state以及其他的React特性
• 特點(diǎn):
• 無需修改組件結(jié)構(gòu)的情況下復(fù)用狀態(tài)邏輯
• 將組件相互關(guān)聯(lián)的部分拆分成更小的函數(shù),復(fù)雜組件將變得更容易理解
• 更簡潔、更易理解的代碼

使用Hook的栗子

import React, { useState } from 'react'export default function HookTest() {// useState(initState)const [count, setCount] = useState(0)// 多個(gè)狀態(tài)const [age] = useState(20)const [fruit, setFruit] = useState('banana')const [input, setInput] = useState('')const [fruits, setFruits] = useState(['apple', 'banana'])return (<div><p>點(diǎn)擊了 {count} 次</p>// 每點(diǎn)擊一次按鈕,次數(shù)+1<button onClick={() => setCount(count + 1)}>點(diǎn)擊</button><p>年齡: {age}</p><p>選擇的水果: {fruit}</p><p>// 每點(diǎn)當(dāng)input框輸入改變時(shí),更新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就是一個(gè)Effect Hook,給函數(shù)組件增加了操作副作用的能力.
• 它跟class組件中的componentDidMount、componentDidUpdate和componentwillUnmount具有相同作用(只不過是合并了)
• 栗子: 更新 HooksTest.js

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

• 注:
• 相當(dāng)于是觀察數(shù)據(jù),當(dāng)觀察的數(shù)據(jù)發(fā)生變化時(shí)執(zhí)行
• 第二個(gè)參數(shù)用于收集觀察的數(shù)據(jù)

自定義鉤子 - Custom Hook

• 自定義Hook是一個(gè)函數(shù),其名稱以"use"開頭,函數(shù)內(nèi)部可以調(diào)用其他的Hook.

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

總結(jié)

以上是生活随笔為你收集整理的react --- Hook的使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。