這篇文章主要介紹“React Hook中useEffecfa函數(shù)如何使用”，在日常操作中，相信很多人在React Hook中useEffecfa函數(shù)如何使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”React Hook中useEffecfa函數(shù)如何使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
成都創(chuàng)新互聯(lián)公司主營磴口網(wǎng)站建設的網(wǎng)絡公司,主營網(wǎng)站建設方案,app開發(fā)定制,磴口h5重慶小程序開發(fā)搭建,磴口網(wǎng)站營銷推廣歡迎磴口等地區(qū)企業(yè)咨詢
我們知道在類組件中是可以有生命周期函數(shù)的, 那么如何在函數(shù)組件中定義類似于生命周期這些函數(shù)呢?
Effect Hook 可以讓你來完成一些類似于class中生命周期的功能;
事實上，類似于網(wǎng)絡請求、手動更新DOM、一些事件的監(jiān)聽，都是React更新DOM的一些副作用(Side Effects);
所以對于完成這些功能的Hook被稱之為 Effect Hook;
假如我們現(xiàn)在有一個需求:頁面中的title總是顯示counter的數(shù)字，分別使用class組件和Hook實現(xiàn):
類組件實現(xiàn)
import React, { PureComponent } from 'react'
export class App extends PureComponent {
constructor() {
super()
this.state = {
counter: 100
}
}
// 進入頁面時, 標題顯示counter
componentDidMount() {
document.title = this.state.counter
}
// 數(shù)據(jù)發(fā)生變化時, 讓標題一起變化
componentDidUpdate() {
document.title = this.state.counter
}
render() {
const { counter } = this.state
return (
{counter}
函數(shù)組件加Hook的實現(xiàn):
通過useEffect這個Hook，可以告訴React需要在渲染后執(zhí)行某些操作;
useEffect要求我們傳入一個回調(diào)函數(shù)，在React執(zhí)行完更新DOM操作之后(也就是組件被渲染完成后)，就會回調(diào)這個函數(shù);
默認情況下，無論是第一次渲染之后，還是每次更新之后，都會執(zhí)行這個回調(diào)函數(shù); 一般情況下我們在該回調(diào)函數(shù)中都是編寫副作用的操作(例如網(wǎng)絡請求, 操作DOM, 事件監(jiān)聽)因此需要注意的是, 有許多說法說useEffect就是用來模擬生命周期的, 其實并不是; useEffect可以做到模擬生命周期, 但是他主要的作用是用來執(zhí)行副作用的
import React, { memo, useEffect, useState } from 'react'
const App = memo(() => {
const [counter, setCounter] = useState(200)
// useEffect傳入一個回調(diào)函數(shù), 在頁面渲染完成后自動執(zhí)行
useEffect(() => {
// 一般在該回調(diào)函數(shù)在編寫副作用的代碼(網(wǎng)絡請求, 操作DOM, 事件監(jiān)聽)
document.title = counter
})
return (
{counter}
在class組件的編寫過程中，某些副作用的代碼，我們需要在componentWillUnmount中進行清除:
比如我們之前的事件總線或Redux中手動調(diào)用subscribe;
都需要在componentWillUnmount有對應的取消訂閱;
Effect Hook通過什么方式來模擬componentWillUnmount呢?
useEffect傳入的回調(diào)函數(shù)A本身可以有一個返回值，這個返回值是另外一個回調(diào)函數(shù)B:
type EffectCallback = () => (void | (() => void | undefined));
為什么要在 effect 中返回一個函數(shù)?
這是 effect 可選的清除機制。每個 effect 都可以返回一個清除函數(shù);
如此可以將
添加和移除訂閱的邏輯放在一起;它們都屬于 effect 的一部分;
React 何時清除 effect?
React 會在組件更新和卸載的時候執(zhí)行清除操作, 將上一次的監(jiān)聽取消掉, 只留下當前的監(jiān)聽 ;
正如之前學到的，effect 在每次渲染的時候都會執(zhí)行;
import React, { memo, useEffect } from 'react'
const App = memo(() => {
useEffect(() => {
// 監(jiān)聽store數(shù)據(jù)發(fā)生改變
const unsubscribe = store.subscribe(() => {
})
// 返回值是一個回調(diào)函數(shù), 該回調(diào)函數(shù)在組件重新渲染或者要卸載時執(zhí)行
return () => {
// 取消監(jiān)聽操作
unsubscribe()
}
})
return (
App
使用Hook的其中一個目的就是解決class中生命周期經(jīng)常將很多的邏輯放在一起的問題:
比如網(wǎng)絡請求、事件監(jiān)聽、手動修改DOM，這些往往都會放在componentDidMount中;
一個函數(shù)組件中可以使用多個Effect Hook，我們可以將邏輯分離到不同的useEffect中:
import React, { memo, useEffect } from 'react'
const App = memo(() => {
// 監(jiān)聽的useEffect
useEffect(() => {
console.log("監(jiān)聽的代碼邏輯")
return () => {
console.log("取消的監(jiān)聽代碼邏輯")
}
})
// 發(fā)送網(wǎng)絡請求的useEffect
useEffect(() => {
console.log("網(wǎng)絡請求的代碼邏輯")
})
// 操作DOM的useEffect
useEffect(() => {
console.log("操作DOM的代碼邏輯")
})
return (
Hook允許我們按照代碼的用途分離它們， 而不是像生命周期函數(shù)那樣, 將很多邏輯放在一起:
React將按照 effect 聲明的順序
依次調(diào)用組件中的每一個 effect;
默認情況下，useEffect的回調(diào)函數(shù)會在每次渲染時都重新執(zhí)行，但是這會導致兩個問題:
某些代碼我們只是希望執(zhí)行一次即可(比如網(wǎng)絡請求, 組件第一次渲染中執(zhí)行一次即可, 不需要執(zhí)行多次)，類似于類組件中的componentDidMount和componentWillUnmount中完成的事情;
另外，多次執(zhí)行也會導致一定的性能問題;
我們?nèi)绾螞Q定useEffect在什么時候應該執(zhí)行和什么時候不應該執(zhí)行呢?
useEffect實際上有兩個參數(shù):
參數(shù)一: 執(zhí)行的回調(diào)函數(shù), 這個參數(shù)我們已經(jīng)使用過了不再多說;
參數(shù)二: 是一個數(shù)組類型, 表示 該useEffect在哪些state發(fā)生變化時，才重新執(zhí)行;(受誰的影響才會重新執(zhí)行)
案例練習:
受count影響的Effect;
import React, { memo, useEffect, useState } from 'react'
const App = memo(() => {
const [counter, setCounter] = useState(100)
// 發(fā)送網(wǎng)絡請求的useEffect, 只有在counter發(fā)生改變時才會重新執(zhí)行
useEffect(() => {
console.log("網(wǎng)絡請求的代碼邏輯")
}, [counter])
return (
但是，如果一個函數(shù)我們不希望依賴任何的內(nèi)容時，也可以傳入一個空的數(shù)組 []:
那么這里的兩個回調(diào)函數(shù)分別對應的就是componentDidMount和componentWillUnmount生命周期函數(shù)了;
import React, { memo, useEffect, useState } from 'react'
const App = memo(() => {
const [counter, setCounter] = useState(100)
// 傳入空數(shù)組表示不受任何數(shù)據(jù)依賴
useEffect(() => {
// 此時傳入的參數(shù)一這個回調(diào)函數(shù): 相當于componentDidMount
console.log("監(jiān)聽的代碼邏輯")
// 參數(shù)一這個回調(diào)函數(shù)的返回值: 相當于componentWillUnmount
return () => {
console.log("取消的監(jiān)聽代碼邏輯")
}
}, [])
return (
總結(jié): useEffect可以模擬之前的class組件的生命周期(類似而不是相等), 并且它比原來的生命周期更加強大, 青出于藍而勝于藍
到此，關于“React Hook中useEffecfa函數(shù)如何使用”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
本文標題：ReactHook中useEffecfa函數(shù)如何使用
路徑分享：http://weahome.cn/article/gppeip.html
重慶分公司
重慶分公司
