日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React-hooks中的useEffect使用步驟_React

作者：前端卡卡西呀 ? 更新時間： 2022-06-30 編程語言

useEffect 永遠是在 DOM渲染完成之后執行

1.理解函數副作用

什么是副作用?

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

常見的副作用

  • 數據請求（發送ajax）
  • 手動修改 DOM
  • localstorage操作

useEffect 函數的作用就是為react函數組件提供副作用

2.基礎使用

使用步驟

  • 導入 useEffect 函數
  • 調用 useEffect 函數，并傳入回調函數
  • 在回調函數中編寫副作用處理
  • 修改數據狀態
  • 檢測副作用是否生效

示例代碼

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

3.依賴項控制

副作用執行時機

1.默認狀態(無依賴項)

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

2.依賴項 為空

useEffect 函數還可以接收第二個參數，作為該副作用的依賴項，當第二個參數 傳入一個空數組[] 時，表明只有 組件初始化的時候執行一次：
咱們對上邊的案例做下 微調

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

可以看到當點擊按鈕時，title 不再改變。

3.依賴特定項

當依賴項數組中傳入值時，那么該副作用會在 組件初始化的時候執行一次，依賴的特定項變化時會再次執行

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

如上，當我們點擊 “累計” 按鈕時，會console內容，title也會改變，但是我們點擊 “改名”時，不會發生變化，就是因為我們在依賴項數組中傳入了 “count” 而沒有 “name”。

4.注意事項

只要在 useEffect 回調函數中用到的數據狀態就應該出現在依賴項數組中聲明，否則可能會有bug。

5.清除副作用

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

語法如下：

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

示例：

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

6.發送網絡請求

不可以直接在 useEffect 的回調函數外層直接包裹await，因為異步會導致清理函數無法立即返回
?錯誤示例：

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

可在 useEffect 中定義一個請求數據方法，調用。

正確示例：

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

原文鏈接：https://blog.csdn.net/RedaTao/article/details/123899263

欄目分類
最近更新