useEffect使用方法_useeffect用法-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46797477/article/details/120811199

本文介绍了React Hooks中的useEffect，它替代了类组件的生命周期方法。重点讲述了useEffect的三种使用方式，强调其用于代码分类和简化重复代码的功能。此外，文章还探讨了如何通过控制useEffect的依赖项来实现精准渲染，确保只有特定变量变化时才会触发组件重新渲染。

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

useEffect使用方法

useEffect 替代了原来的类组件生命周期，有三种使用方式，我们可以针对不同的业务使用useEffect；

import React, {useEffect, useState} from "react";
import reactDom from "react-dom";
function Effect (){
    const [count, setCount] = useState(0)
    // 1. 第一种使用方法：componentDidMount, componentDidUpdate
    // useEffect(() => {
    //     console.log('useEffect')
    // })
    
    // 2. 第二种使用方法： componentDidMount
    // useEffect(() => {
    //     console.log('useEffect')
    // }, [])

    // 3. 第三种使用方法： componentDidMount， componentWillUnMount
    useEffect(() => {
        console.log('useEffect')
        return () => {
            console.log('useEffect卸载')
        }
    }, [])
    return (
        <div>
            <div>{count}</div>
            <button onClick={() => setCount(count + 1)}>+1</button>
            <button onClick={() => reactDom.unmountComponentAtNode(document.getElementById('root'))}>卸载组件</button>
        </div>
    )
}

export default Effect;

使用useEffect的好处是什么？

在函数式组件useEffect 可以被多测调用，所以我们把不同的代码放在不同的useEffect当中，这样的话就是按照用途将代码进行分类；
简化重复代码，使组件内部代码更加清晰，这点体现在之前使用类组件执行某个功能，在挂载时要做的事情和更新时要做的事情基本上时一致的，现在使用useEffect将原有需要使用两个API完成的事情，用一个API就完成了；

到这里其实还有个问题，当组件中的变量改变时，当前组件会重新渲染，那么问题就来了，如果在一个组件中有多个变量时，我们只想让变量a改变时重新渲染，其他变量改变不想让他重新渲染，如何实现哪？

useEffect(() => {
        console.log('useEffect')
}, [count])

在这里我们只需要给useEffect的第二个参数传入你想要改变的值，useEffect就会根据这个值去渲染组件，其他的值改变不会引起重新渲染的；