当前位置: 首页 > news >正文

1分钟看懂React的那些Hook‘s

一、useEffect的五指山

1.执行时机:组件初始化,组件更新(组件内state变化)
useEffect(() => {
    
}) 
2.执行时机:组件初始化
useEffect(() => {
    
},[]) 
3.执行时机:组件初始化,依赖的状态发生变化(X可多个)
useEffect(() => {
    
},[X]) 
4.执行时机:组件卸载
useEffect(() => {
    
    return ()=>{
		console.log(组件卸载)
	}
}) 
5.执行时机:组件卸载,依赖的状态发生变化(X可多个)
useEffect(() => {
    //这里的X是新值
    return ()=>{
		console.log(组件卸载)
		//这里的X是旧值(上一次状态)
	}
},[X]) 

二、useLayoutEffect

0. react的commit意在把更新提交给浏览器,commit阶段: js修改DOM前,JS开始修改DOM,JS修改DOM后。commit阶段是同步的
1.浏览器会在JS修改DOM后开始渲染。
2.浏览器渲染完毕useEffect执行,但是useEffect是在JS操作DOM前调用。
3.JS修改DOM之后useLayoutEffect执行。

使用场景: 在一些页面或样式需要默认值的时候,因为useEffect在页面渲染后执行,会导致页面重新渲染,此刻需要搬出useLayoutEffect,因为他在JS修改完DOM就开始执行了,然后再渲染页面的时候,就会给用户更好的体验。

三、useState

const [count,setCount] = useState(0)
const [count,setCount] = useState( ()=>{ return('张三')} )

//使用 展示
<>{count}</>

//修改
() => {
    setCount(count + 1)
    console.log(count) //函数执行后,打印依然是0 (因为组件更新是异步的)
}

四、useMemo

场景:父子组件,子组件包含大量计算或费时活动时。
原因:在react中,父组件更新,会导致子组件重新render
解决:使用useMemo监听子组件是否有更新或是否需要重新计算,达到一个类似缓存的功能,来实现性能优化。
缺点:代码易读性差不好维护,useMemo本身也会消耗性能

五、React.memo

原因:只要父组件进行了setState的操作,子组件就会重新进行Render的操作。
解决:子组件使用 memo
缺点:React.memo是对比子组件的props引用是否一致。(传入 new的对象或function,因为每次父组件会重新创建,会导致memo失效,!!!但可使用useMemo、useCallback破解!!!

六、useMemo和useCallback区别

缓存数据(useMemo)
缓存函数(useCallback)

六、useRef

获取Dom实例

七、useContext

场景,父子孙都需要用到state和setState,层层传递会很费时,需要频繁props存取
使用,1.
1.父组件 createContext(XXX)
2.使用<Context.Provider>{子组件}</Context.Provider>包裹子组件
3. 子组件 const XX=useContest(Context)

相关文章:

  • GaussDB安全配置指南:从认证到防御的全方面防护
  • 深入剖析顺序存储二叉树与线索化二叉树:数据结构的灵活转换与优化
  • 常用的gpt
  • 通过大视觉模型实现的多维方向性增强分割|文献速递-医学影像人工智能进展
  • Hive函数、外部表和分区表
  • 培训讲师管理系统(源码+文档+讲解+演示)
  • 【面试】Java 多线程
  • 【Javascript网页设计】在线测验案例
  • 知识增强篇:RAG技术
  • Qt从入门到入土(九) -model/view(模型/视图)框架
  • DirectX12(D3D12)基础教程四 入门指南
  • C#实现高性能异步文件下载器(支持进度显示/断点续传)
  • 基于PyTorch的深度学习——机器学习3
  • 为什么Dex2C会影响性能?(面试题)
  • gitsubtree怎么添加新的子仓库
  • 超分之DeSRA
  • 侯捷 C++ 课程学习笔记:STL标准库与泛型编程
  • Vue主流的状态保存框架对比
  • 下载以后各个软件或者服务器的启动与关闭
  • C#常用的循环语句
  • 网站建设 前后台目录结构/免费发布网站seo外链
  • 邹城建设银行网站/广告牌
  • 济南市建设局网站/深圳百度推广公司
  • 可以做哪些网站有哪些/百度权重怎么提高
  • 装修网站建设方案书/长春免费网上推广
  • 怎么把淘宝店放到自己做的网站去/seoul是什么国家