欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React-hooks中的useEffect使用步驟

 更新時間：2022年05月06日 17:19:28   作者：前端卡卡西呀  
這篇文章主要介紹了React-hooks中的useEffect,對于React組件來說，主作用是根據(jù)數(shù)據(jù)(state/props)渲染UI，除此之外都是副作用（比如手動修改DOM、發(fā)送ajax請求），本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧

useEffect 永遠(yuǎn)是在 DOM渲染完成之后執(zhí)行

1.理解函數(shù)副作用

什么是副作用?

對于React組件來說，主作用是根據(jù)數(shù)據(jù)(state/props)渲染UI，除此之外都是副作用（比如手動修改DOM、發(fā)送ajax請求）。

常見的副作用

  • 數(shù)據(jù)請求（發(fā)送ajax）
  • 手動修改 DOM
  • localstorage操作

useEffect 函數(shù)的作用就是為react函數(shù)組件提供副作用

2.基礎(chǔ)使用

使用步驟

  • 導(dǎo)入 useEffect 函數(shù)
  • 調(diào)用 useEffect 函數(shù)，并傳入回調(diào)函數(shù)
  • 在回調(diào)函數(shù)中編寫副作用處理
  • 修改數(shù)據(jù)狀態(tài)
  • 檢測副作用是否生效

示例代碼

import {useState, useEffect} from 'react';
function App() {
	const [count, setCount] = useState(0);
	useEffect(() => {
		console.log("觸發(fā)副作用");
		document.title = `點(diǎn)擊了${count}次`;
	});
	return (
		<div>
			<button onClick={() => setCount(count + 1)}>點(diǎn)擊{count}次</button>
		</div>
	)
}

3.依賴項(xiàng)控制

副作用執(zhí)行時機(jī)

1.默認(rèn)狀態(tài)(無依賴項(xiàng))

上邊的示例中，組件初始化時先觸發(fā)一次(console出內(nèi)容)，之后每次點(diǎn)擊按鈕，都會觸發(fā) 副作用。
useEffect 可執(zhí)行多次。

2.依賴項(xiàng) 為空

useEffect 函數(shù)還可以接收第二個參數(shù)，作為該副作用的依賴項(xiàng)，當(dāng)?shù)诙€參數(shù) 傳入一個空數(shù)組[] 時，表明只有 組件初始化的時候執(zhí)行一次：
咱們對上邊的案例做下 微調(diào)

function App() {
	const [count, setCount] = useState(0);
	useEffect(() => {
		console.log("觸發(fā)副作用");
		document.title = `點(diǎn)擊了${count}次`;
	}, []); // 注意這里，傳入 []
	return (
		<div>
			<button onClick={() => setCount(count + 1)}>點(diǎn)擊{count}次</button>
		</div>
	)
}

可以看到當(dāng)點(diǎn)擊按鈕時，title 不再改變。

3.依賴特定項(xiàng)

當(dāng)依賴項(xiàng)數(shù)組中傳入值時，那么該副作用會在 組件初始化的時候執(zhí)行一次，依賴的特定項(xiàng)變化時會再次執(zhí)行

function App() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('李白');
  useEffect(() => {
    console.log('觸發(fā)渲染')
    document.title = `clicked ${count} times`;
    console.log('name: ', {name});
  },[count]) // 這里我們傳入 count，不傳name
  return (
    <>
      <p>當(dāng)前次數(shù)：{count}</p>
      <p><button onClick={() => setCount(count + 1)}>累計(jì)</button></p>
      <p><button onClick={() => setName("杜甫")}>改名{name}</button></p>
    </>
  )
}

如上，當(dāng)我們點(diǎn)擊 “累計(jì)” 按鈕時，會console內(nèi)容，title也會改變，但是我們點(diǎn)擊 “改名”時，不會發(fā)生變化，就是因?yàn)槲覀冊谝蕾図?xiàng)數(shù)組中傳入了 “count” 而沒有 “name”。

4.注意事項(xiàng)

只要在 useEffect 回調(diào)函數(shù)中用到的數(shù)據(jù)狀態(tài)就應(yīng)該出現(xiàn)在依賴項(xiàng)數(shù)組中聲明，否則可能會有bug。

5.清除副作用

在組件被銷毀時，如果有些副作用操作需要被清理，比如常見的定時器等，可通過useEffect return回調(diào)函數(shù) 的方式清理副作用。

語法如下：

useEffect(() => {
	console.log('副作用函數(shù)執(zhí)行');
	return () => {
		console.log('清理副作用的函數(shù)執(zhí)行');
		// 這里執(zhí)行 清理副作用的代碼
	}
})

示例：

function Test() {
  useEffect(() => {
    let timer = setInterval(() => {
      console.log('this is effect');
    }, 1000)
    // 這里return 一個回調(diào)函數(shù)，在函數(shù)中清除副作用
    return () => {
      clearInterval(timer);
    }
  })
  return (
    <div>Test</div>
  )
}
function App() {
  const [flag, setFlag] = useState(true);
  return (
    <div>
      {flag ? <Test/> : null}
      <div>
        <button onClick={() => setFlag(!flag)}>點(diǎn)擊</button>
      </div>
    </div>
  )
}

6.發(fā)送網(wǎng)絡(luò)請求

不可以直接在 useEffect 的回調(diào)函數(shù)外層直接包裹await，因?yàn)?strong>異步會導(dǎo)致清理函數(shù)無法立即返回
?錯誤示例：

useEffect(async () => {
	const res = await getData('url');
	console.log(res);
})

可在 useEffect 中定義一個請求數(shù)據(jù)方法，調(diào)用。

正確示例：

useEffect(() => {
	async function initData() {
		const res = await getData('url');
		console.log(res);
	}
	initData()
}, []) // 僅組件初始化時調(diào)用

到此這篇關(guān)于React-hooks中的useEffect的文章就介紹到這了,更多相關(guān)React-hooks useEffect內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • React報錯Type '() => JSX.Element[]' is not assignable to type FunctionComponent

    React報錯Type '() => JSX.Element[]&apos

    這篇文章主要為大家介紹了React報錯Type '() => JSX.Element[]' is not assignable to type FunctionComponent解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-12-12
  • 詳解使用React全家桶搭建一個后臺管理系統(tǒng)

    詳解使用React全家桶搭建一個后臺管理系統(tǒng)

    本篇文章主要介紹了使用React全家桶搭建一個后臺管理系統(tǒng)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-11-11
  • React Native 混合開發(fā)多入口加載方式詳解

    React Native 混合開發(fā)多入口加載方式詳解

    這篇文章主要介紹了React Native 混合開發(fā)多入口加載方式詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-09-09
  • 詳解一個基于react+webpack的多頁面應(yīng)用配置

    詳解一個基于react+webpack的多頁面應(yīng)用配置

    這篇文章主要介紹了詳解一個基于react+webpack的多頁面應(yīng)用配置，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2019-01-01
  • 使用React實(shí)現(xiàn)一個簡單的待辦事項(xiàng)列表的示例代碼

    使用React實(shí)現(xiàn)一個簡單的待辦事項(xiàng)列表的示例代碼

    這篇文章我們將詳細(xì)講解如何建立一個這樣簡單的列表,文章通過代碼示例介紹的非常詳細(xì),對我們的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
    2023-08-08
  • 在Create React App中使用CSS Modules的方法示例

    在Create React App中使用CSS Modules的方法示例

    本文介紹了如何在 Create React App 腳手架中使用 CSS Modules 的兩種方式。有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
    2019-01-01
  • 無廢話快速上手React路由開發(fā)

    無廢話快速上手React路由開發(fā)

    本文以簡潔為目標(biāo)，幫助快速上手react-router-dom默認(rèn)你接觸過路由相關(guān)的開發(fā)，通過實(shí)例代碼講解的很詳細(xì)，對React路由相關(guān)知識感興趣的朋友一起看看吧
    2021-05-05
  • React類組件和函數(shù)組件對比-Hooks的簡介

    React類組件和函數(shù)組件對比-Hooks的簡介

    Hook?是?React?16.8?的新增特性，它可以讓我們在不編寫class的情況下,?使用state以及其他的React特性(比如生命周期，這篇文章主要介紹了React類組件和函數(shù)組件對比-Hooks的介紹及初體驗(yàn),需要的朋友可以參考下
    2022-11-11
  • 使用react context 實(shí)現(xiàn)vue插槽slot功能

    使用react context 實(shí)現(xiàn)vue插槽slot功能

    這篇文章主要介紹了使用react context 實(shí)現(xiàn)vue插槽slot功能，文中給大家介紹了vue的slot的實(shí)現(xiàn)方法,需要的朋友可以參考下
    2019-07-07
  • React router基礎(chǔ)使用方法詳解

    React router基礎(chǔ)使用方法詳解

    這篇文章主要介紹了React router基礎(chǔ)使用方法，React Router是React生態(tài)系統(tǒng)中最受歡迎的第三方庫之一，近一半的React項(xiàng)目中使用了React Router，下面就來看看如何在React項(xiàng)目中使用
    2023-04-04

最新評論