importReact, { useState, useRef, useEffect, useLayoutEffect } from‘react’ import‘./App.css’ functionHome() { const oP = useRef() // useEffect(() => { // oP.current.style.left = ‘0px’ // oP.current.style.left = ‘600px’ // console.log(‘挂载|更新, useEffect’) // return () => { // console.log(‘卸载, useEffect’) // } // }) //useLayoutEffect挂载|更新,卸载都先于useEffect执行， 元素没有渲染到界面上就可以执行，更适合做布局操作 useLayoutEffect(() => { oP.current.style.left = ‘0px’ oP.current.style.left = ‘600px’ console.log(‘挂载|更新, , useLayoutEffect’) return () => { console.log(‘卸载, useLayoutEffect’) } }) return ( <div> home组件 <pref={oP}>Home组件中的 P元素</p> </div> ) } functionApp() { const [isShow, setIsShow] = useState(true) return ( <div> {isShow && <Home/>} <buttononClick={() => { setIsShow(!isShow) }}> 切换</button> </div> ) } exportdefaultApp