前端开发React18 - useEffect（前端开发工程师是干什么的）

useEffect 理解：

• 是一个hook函数
• 渲染引起的操作

什么是副作用：

副作用是相对于主作用来说的，一个函数除了主作用，其他的作用就是副作用。对于 React 组件来说，主作用就是根据数据（state/props）渲染 UI，除此之外都是副作用（比如，手动修改 DOM）

常见的副作用：

1. 数据请求 ajax发送
2. 手动修改dom
3. localstorage操作

useEffect函数的作用就是为react函数组件提供副作用处理的！

使用步骤：

1. 导入 useEffect 函数
2. 调用 useEffect 函数，并传入回调函数
3. 在回调函数中编写副作用处理（dom操作）
4. 修改数据状态
5. 检测副作用是否生效

语法：useEffect(()=>{},[])

import { useEffect, useState } from 'react'

function App() {

const [count, setCount] = useState(0)

useEffect(()=>{document.title = `当前已点击了${count}次`})

return (<button onClick={() => { setCount(count + 1) }}>{count}</button>)

}

export default App

import { useState, useEffect } from 'react'

function App() {

const [arr, setArr] = useState([])

useEffect(()=>{

async function fn(){

const res = await fetch('')

const data = await res.json()

setArr(data.data.channels)

}

fn()

},[])

return (

<div className="App">

<ol>

{arr.map((item)=><li key={item.id}>{item.name}</li>)}

</ol>

</div>

);

}

export default App;

依赖项控制执行时机：

1. 不添加依赖项

组件首次渲染执行一次，以及不管是哪个状态更改引起组件更新时都会重新执行

1. 组件初始渲染
2. 组件更新 （不管是哪个状态引起的更新）

2. 添加空数组

组件只在首次渲染时执行一次

3. 添加特定依赖项

副作用函数在首次渲染时执行，在依赖项发生变化时重新执行

注意事项

useEffect 回调函数中用到的数据（比如，count）就是依赖数据，就应该出现在依赖项数组中，如果不添加依赖项就会有bug出现

4. 清理副作用

如果想要清理副作用 可以在副作用函数中的末尾return一个新的函数，在新的函数中编写清理副作用的逻辑

注意执行时机为：

1. 组件卸载时自动执行
2. 组件更新时，下一个useEffect副作用函数执行之前自动执行

import { useEffect, useState } from "react"

const App = () => {

const [count, setCount] = useState(0)

useEffect(() => {

const timerId = setInterval(() => {

setCount(count + 1)

}, 1000)

return () => {

// 用来清理副作用的事情

clearInterval(timerId)

}

}, [count])

return (

<div>

{count}

</div>

)

}

export default App