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

发布于：2025-03-12 ⋅ 阅读:(16) ⋅ 点赞:(0)

一、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)

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布