React中useEffect的用法

最新推荐文章于 2025-07-01 09:00:00 发布

原创最新推荐文章于 2025-07-01 09:00:00 发布 · 320 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

useEffect(() => {
    // 这里的代码相当于 componentDidMount 和 componentDidUpdate
    console.log('副作用...');
    // 如果需要清理，可以返回一个函数
    return () => {
      // 这里的代码相当于 componentWillUnmount
      console.log('Cleaning up...');
    };
  }, [count]); // 依赖数组
//https://www.jb51.net/javascript/323113ndx.htm

副作用的执行：

useEffect 的第一个参数是一个函数，它在组件渲染后执行。可以在这个函数内进行副作用操作。
如果需要清理副作用，可以在这个函数中返回一个函数，这个返回的函数会在组件卸载或副作用重新执行前调用。

依赖数组：

useEffect 的第二个参数是一个依赖数组（可以依赖多个变量），表示副作用依赖的变量。当依赖数组中的任何一个变量发生变化时，副作用函数会重新执行。
如果依赖数组为空（[]），副作用函数只会在组件挂载和卸载时执行一次，类似于 componentDidMount 和 componentWillUnmount。
如果不传依赖数组，副作用函数会在每次组件渲染后执行，类似于 componentDidUpdate。