useEffect：dom完成渲染后執(zhí)行

• 不傳參數(shù)，每次都會執(zhí)行
  傳空的依賴[]，只會執(zhí)行一次
  有依賴，依賴項(xiàng)變化會執(zhí)行

useEffect實(shí)現(xiàn)動畫效果

import { useEffect, useRef, useState } from "react"const App = () => {const [, setCount] = useState({})const refDiv = useRef()useEffect(() => {console.log('執(zhí)行useEffect')setTimeout(() => {refDiv.current.style.transform = 'translateX(150px)'refDiv.current.style.transition = 'all .9s'}, 1000)// 清理函數(shù) 要顯示返回的動畫，上面的函數(shù)應(yīng)延遲一段執(zhí)行// 否則太快回到150px位置，看不到效果return () => {console.log('執(zhí)行清理函數(shù)')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調(diào)用階段一致

import { useEffect, useLayoutEffect, useRef, useState } from "react"const App = () => {const [, setCount] = useState({})const refDiv = useRef()useLayoutEffect(() => {console.log('useLayoutEffect渲染前執(zhí)行')// 若不延遲 在useLayoutEffect看不到移動，而是初始就在150的位置setTimeout(() => {refDiv.current.style.transform = 'translateX(150px)'refDiv.current.style.transition = 'all .9s'}, 1000)return () => {console.log('執(zhí)行清理函數(shù)')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開發(fā)者工具中顯示自定義hook的標(biāo)簽

自定義hook

import { useEffect, useState } from 'react' // 自定義hook const useCount = params => {const [count, setCount] = useState(0)useEffect(() => {document.title = `第${count}次點(diǎn)擊`})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

增加提示效果

總結(jié)

以上是生活随笔為你收集整理的7 useLayoutEffect、useDebugValue的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。