Hooks之useEffect

最新推荐文章于 2023-08-05 23:32:22 发布

小曾小肉

最新推荐文章于 2023-08-05 23:32:22 发布

阅读量389

点赞数

CC 4.0 BY-SA版权

分类专栏： React js 前端

本文链接：https://blog.csdn.net/weixin_41559882/article/details/106563706

前端同时被 3 个专栏收录

12 篇文章

订阅专栏

9 篇文章

订阅专栏

React

7 篇文章

订阅专栏

本文详细解析了React中useEffect钩子的使用方法及注意事项，包括如何利用useEffect进行副作用处理，掌握不同场景下的调用时机，以及如何通过选项参数实现更精细的控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

语法

useEffect(callBack, option)

callBack

useEffect(() => {
	// 每次渲染的操作
	...

	// 可返回一个函数, 每次渲染时做一些清除操作
	return () => { // 操作 }
})

option

第二个参数可选，需传一个数组

const [value, setValue] = setState('');
const [value2, setValue2] = setState('');

// 每次渲染都调用
useEffect(() => {})

// value或者value2变化时才调用
useEffect(() => {}, [value, value2])

如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（[]）作为第二个参数。

useEffect(() => {
    
    // mounted时操作
    
    return () => {
        // unmount时操作
    }
    
}, [])

执行顺序演示

// 代码片段
const [value, setValue] = useState('');
const [otherValue, setOtherValue] = useState('');

useEffect(() => {
    console.log('mounted');
    return () => console.log('unmount');
}, [])

useEffect(() => {
    console.log('update');
    return () => console.log('clear');
})

useEffect(() => {
    console.log('updateValue');
    return () => console.log('clearValue');
}, [value])

// ---初次进入组件----------
// mounted
// update
// updateValue

// ---改变value----------
// clear
// clearValue
// update
// updateValue

// ---改变otherValue--------
// clear
// update

// 卸载组件
// unmount
// clear
// clearValue