useEffect：dom完成渲染后执行

不传参数，每次都会执行
传空的依赖[]，只会执行一次
有依赖，依赖项变化会执行

useEffect实现动画效果

import { useEffect, useRef, useState } from "react"const App = () => {const [, setCount] = useState({})const refDiv = useRef()useEffect(() => {console.log('执行useEffect')setTimeout(() => {refDiv.current.style.transform = 'translateX(150px)'refDiv.current.style.transition = 'all .9s'}, 1000)// 清理函数 要显示返回的动画，上面的函数应延迟一段执行// 否则太快回到150px位置，看不到效果return () => {console.log('执行清理函数')refDiv.current.style.transform = 'translateX(0px)'refDiv.current.style.transition = 'all .9s'}})const styleObj = {width: '50px',height: '50px',background: 'skyblue'}return (<><div style={styleObj} ref={refDiv}></div><button onClick={() => setCount({})}>click</button></>)
}
export default App

useLayoutEffect

和componentDidMount 和 componentDidUpdate调用阶段一致

import { useEffect, useLayoutEffect, useRef, useState } from "react"const App = () => {const [, setCount] = useState({})const refDiv = useRef()useLayoutEffect(() => {console.log('useLayoutEffect渲染前执行')// 若不延迟 在useLayoutEffect看不到移动，而是初始就在150的位置setTimeout(() => {refDiv.current.style.transform = 'translateX(150px)'refDiv.current.style.transition = 'all .9s'}, 1000)return () => {console.log('执行清理函数')refDiv.current.style.transform = 'translateX(0px)'refDiv.current.style.transition = 'all .9s'}})const styleObj = {width: '50px',height: '50px',background: 'skyblue'}return (<><div style={styleObj} ref={refDiv}></div><button onClick={() => setCount({})}>click</button></>)
}
export default App

useDebugValue

用于在React开发者工具中显示自定义hook的标签

自定义hook

import { useEffect, useState } from 'react'
// 自定义hook
const useCount = params => {const [count, setCount] = useState(0)useEffect(() => {document.title = `第${count}次点击`})return [count, setCount]
}
const Foo = () => {const [count, setCount] = useCount(0)useEffect(() => {console.log('Foo useEffect')})return (<><h1>{count}</h1><button onClick={() => setCount(count + 1)}>click</button></>)
}
const App = () => {return <Foo />
}
export default App

增加提示效果

7 useLayoutEffect、useDebugValue相关推荐

Hooks的基本介绍
1 什么是Hooks Hook 是 React 16.8 的新增特性, 它可以让函数式组件拥有类组件特性[如:保存自己的状态,有自己的生命周期方法] 基础的Hook:useState.useEffec ...
React学习笔记（八）--- HooK
一.简介在之前的学习中,我们了解到只有类组件中才能使用 state,函数组件是无法使用的.但Hook的出现,改变这种情况,Hook是React 16.8 版本的新增特性,可以让我们在函数组件中使 ...
视频教程-React Hooks 案例详解（React 进阶必备）-其他
React Hooks 案例详解(React 进阶必备) Leo 1978年8月生,河北石家庄人. 曾任职中软股份. 计算科学导师: 刘坤起博士. 开发的<电商分销系统>获得淘宝Top10 ...
20210226某体育公司前端面试总结
目录讲下react生命周期 js的数据类型什么是闭包 Vue和react的区别性能优化输入URL到页面渲染的整个流程如何处理跨域问题谈谈你对原型链的理解重排和重绘你做过一些什么基础的搭 ...
react全家桶实战（千峰教育）
说明:本笔记为本人基于千锋教育2022版React全家桶教程_react零基础入门到项目实战完整版的学习笔记,知识点不清或不全,可以到视频教程中学习文章目录一.安装create-react-app ...
专利审查指南（2010）
专利审查指南(2010) http://www.chinalaw.gov.cn/article/fgkd/xfg/gwybmgz/201004/20100400253035.shtml来源国务院法制办 ...
湖南省中职学业水平测试试题信息技术
试题: 1.按照指法要求,击打空格键,应使用( ). A.左手和右手的食指,因食指最灵活 B.左手或右手的拇指 C.左手或右手的中指 D.左手或右手的无名指 2.显示器的清晰度是由( )决定的. A. ...
Photoshop入门与进阶实例:1.4 图层的概念和基本操作
1.认识图层图层功能被誉为Photoshop的灵魂,这个比喻一点也不夸张!图层在我们使用Photoshop进行图像处理中,具有十分重要的地位,也是最常用到的功能之一.掌握图层的概念是我们学习Phot ...
2023年你最值得了解的信息技术-AI篇（二）
20688 北京朗阁信息技术有限公司企业服务前沿技术北京市 mailkey 专注云企业邮件领域的产品,随云服务而生. 未融资 MailKey 是北京朗阁信息技术有限公司(以下简称"朗 ...

7 useLayoutEffect、useDebugValue

useEffect实现动画效果

useLayoutEffect

useDebugValue

自定义hook

增加提示效果

7 useLayoutEffect、useDebugValue相关推荐

最新文章

热门文章