React（6）useEffect的基础使用

原创已于 2025-02-24 15:39:18 修改 · 487 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2025-02-12 15:57:15 首次发布

useEffect是一个React Hook函数，用于在React组件中创建不是由事件引起而是由渲染本身引起的操作,比如发送AJAX请求，更改DOM等等

import { useEffect, useState } from "react";
// 是用于组件创建不是由时间引起  而是渲染本身引起的操作 比如发送请求  
// 页面加载完成获取数据
const URL='http://geek.itheima.net/v1_0/channels'
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.data.channels)
    }
    getList()//立即执行函数
  },[])
  return (
    <div className="App">
     <ul>
      {list.map(item=><li key={item.id}>{item.name}</li>)}
     </ul>
    </div>
  );
}

export default App;

import { useEffect, useState } from "react";
// 是用于组件创建不是由时间引起  而是渲染本身引起的操作 比如发送请求  
// 页面加载完成获取数据
// 不设置配置项时候
function App() {
  const [number,setNumber]=useState(0)
   // useEffect(()=>{
  //   console.log('组件第一次挂载和组件更新触发');
  // })
  // useEffect(()=>{
  //   console.log('空数组时候只会初始化加载');
  // },[])
  useEffect(()=>{
    console.log('初始化加载,依赖项变化');
  },[number])
  const addNum=()=>{
    setNumber(number+1)
  }
  return (
    <div className="App">
      <button onClick={addNum}>{number}</button>
    </div>
  );
}

export default App;

清除副作用的使用

子组件定时任务打印在子组件的useEffect中进行return清除定时器

import { useEffect, useState } from "react";
function Son() {
  useEffect(() => {
    const Inter = setInterval(() => {
      console.log("定时器");
    }, 1000);

    return () => {
      clearInterval(Inter);
    };
  }, []);
  return <div>son组件</div>;
}
function App() {
  const [Show, setShow] = useState(true);

  return (
    <div className="App">
      {Show && <Son></Son>}
      <button onClick={() => setShow(false)}>卸载组件</button>
    </div>
  );
}

export default App;