React-useEffect

FOREVER-Q2024-03-06 9:57

1.概念

说明：用于在React组件中创建不是由事件引起而是由渲染本身引起的操作，比如发送

A列AX请求，更改DOM等。

2.案例

javascript 复制代码

// useEffect用于组件不是由事件引起的而是由渲染本身引起的操作，如ajax,更改Dom等。
import { useEffect, useState } from "react";

const URL=`https://st2msh.laf.run/react_get_list`
function App() {
  // 创建一个状态数据
  const [list, setList]=useState([])
  useEffect(()=>{
    // 额外操作，获取频道列表
   async function getList(){
    const res= await fetch(URL)
    const list=await res.json()
    console.log(list);
     setList(list)

    }
    getList()
  },[

  ])
  return (
    <div>
      <ul>
        {list.map(item=><li key={item.id}>{item.name}</li>)}
      </ul>
    </div>
  );
}

export default App;

3.useEffect依赖项参数说明

4.useEffect-清除副作用

说明：在useEf什ect中编写的由渲染本身引起的对接组件外部的操作，社区也经常把它叫做副作用操作，比如在useEffect中开启了一个定时器，我们想在组件卸载时把这个定时器再清理掉，这个过程就是清理副作用。

javascript 复制代码

function Son() {
  useEffect(()=>{
  const timer=setInterval(()=>{
      console.log("定时器执行中");
    },1000)
    return ()=>{
      // 清除副作用(组件卸载时)
      clearInterval(timer)
    }
  },[])
  return <div>this is son</div>;
}

5.源代码

javascript 复制代码

import { useEffect, useState } from "react";

function Son() {
  useEffect(()=>{
  const timer=setInterval(()=>{
      console.log("定时器执行中");
    },1000)
    return ()=>{
      // 清除副作用(组件卸载时)
      clearInterval(timer)
    }
  },[])
  return <div>this is son</div>;
}
function App() {
  // 通过条件渲染模拟组件卸载
  const [show,setShow]=useState(true)
  return (
    <div>
      {show &&<Son></Son>}
      <button onClick={()=>setShow(false)}>卸载Son组件</button>
    </div>
  );
}

export default App;