React（6）

一路向前的月光2025-02-14 0:07

useEffect的基础使用

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

javascript 复制代码

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;

javascript 复制代码

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清除定时器

javascript 复制代码

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;