React学习-hooks

官方文档:https://zh-hans.react.dev/reference/react/useActionState

1.useEffect(setup, dependencies?)

1.1 基础使用

js 复制代码
//hooks
import { useEffect } from "react";
import "./App.css";

function App(){

  useEffect(()=>{
    console.log('useEffect loading');
  })

  return ( <h1>app</h1>)
}

export default App;

执行时机:

1,组件初始化

2,组件更新后执行(在dom更新之后执行)

1.2 传入依赖项时 []

js 复制代码
  //第一个参数回调函数,组件初始化执行,组件更新后也会执行
  useEffect(()=>{
    console.log('useEffect loading');
  },[])

执行时机:

组件初始化、挂载

1.3 传入依赖项时 [a]

useEffect可以监听到useState的状态变化

(如果依赖项中传入多个值[a,b,c],只有有其中之一变化都会执行useEffect。或的关系)

js 复制代码
import { useEffect, useState } from "react";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);

  //第一个参数回调函数,组件初始化执行,组件更新后也会执行
  useEffect(() => {
    console.log("useEffect loading");
    console.log(count);

    // return () => {
    //   console.log('return 的函数在卸载的时候执行');
    // }
  }, [count]);

  const btn = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>hooks</h1>
      <h1>{count}</h1>
      <button onClick={btn}>add</button>
    </div>
  );
}

export default App;

执行时机:

1,组件初始化、挂载

2,依赖项的状态变化时

1.4 第二个参数不传

第二个参数不传,会将所有定义的state值收集起来,只有有一个值变化了就会执行useEffect

1.5 返回的函数 ☆

执行时机:

1,组件卸载的时候

2,状态发生变化时

js 复制代码
  useEffect(() => {
    console.log("useEffect loading",count);//变化后的数据
    
    return(()=>{//return 中的值是变化之前的数据
      console.log('return!!',count);
    })
  });

应用场景:用于聊天的卸载

用户我跟多个人聊天的场景:

伪代码:

跟用户A

js 复制代码
function Bpp(){

  useEffect(() => {
	//userA
	connect(userA)
	
    return(()=>{
      console.log('return!!');
    })
    
  },[userA]);
}

离开A页面,到用户B

js 复制代码
function Bpp(){

  useEffect(() => {
	//userB
	connect(userB)
	
    return(()=>{
    	//userA
      console.log('return!!');
      //断开A的连接
      disconnect(userA)
    })
    
  },[userB]);//A-->B
}

2.useState

const [state, setState] = useState(initialState)

js 复制代码
import {  useState } from "react";
import "./App.css";

function App() {
  const [count, setCount] = useState(0)
  
  const btn=()=>{
    setCount(count+1)
  }

  return ( 
  <div>
    <h1>hooks</h1>
    <h1>{count}</h1>
    <button onClick={btn} >add</button>
  </div>
  )
}
export default App;

面试题

react的更新是同步还是异步的?为什么?

异步,因为react更新底层的(微任务)异步队列,会将短时间内js对组件的更新合并,1次渲染完成更新。

useEffect的执行时机?

看第一点

useEffect的返回函数执行时机

1,组件卸载的时候

2,状态发生变化时

应用场景:用于聊天的卸载

相关推荐
Magnetic_h41 分钟前
【iOS】设计模式复习
笔记·学习·ios·设计模式·objective-c·cocoa
研梦非凡1 小时前
ICCV 2025|从粗到细:用于高效3D高斯溅射的可学习离散小波变换
人工智能·深度学习·学习·3d
前端君1 小时前
实现最大异步并发执行队列
javascript
limengshi1383922 小时前
机器学习面试:请介绍几种常用的学习率衰减方式
人工智能·学习·机器学习
知识分享小能手3 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队4 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
周周记笔记4 小时前
学习笔记:第一个Python程序
笔记·学习
萌萌哒草头将军4 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
优雅鹅4 小时前
ARM、AArch64、amd64、x86_64、x86有什么区别?
arm开发·学习
..过云雨4 小时前
05.【Linux系统编程】进程(冯诺依曼体系结构、进程概念、进程状态(注意僵尸和孤儿)、进程优先级、进程切换和调度)
linux·笔记·学习