useEffect与副作用

最新推荐文章于 2025-10-17 17:13:34 发布

原创最新推荐文章于 2025-10-17 17:13:34 发布 · 562 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #react.js

本文介绍了React中的useEffectHook，用于在函数组件中处理副作用操作，如网络请求、事件订阅等。它接受一个副作用执行函数和依赖项数组，控制何时执行。通过例子展示了如何在组件挂载、卸载以及状态变化时触发副作用操作。

useEffect是React中的一个Hook函数，用于在函数组件中执行副作用操作。

副作用是指对组件外部环境产生影响的操作，比如发送网络请求、订阅事件、操作DOM等。在函数组件中，我们通常将副作用操作放在useEffect函数中执行。

下面是一个使用useEffect的例子：

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 在组件挂载后执行副作用操作
    console.log('Component mounted');
    
    // 在组件卸载前执行清理操作
    return () => {
      console.log('Component unmounted');
    }
  }, []);

  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
}

在上面的例子中，我们使用了useEffect来执行两个副作用操作。第一个副作用操作是在组件挂载后执行，输出"Component mounted"。第二个副作用操作是在组件卸载前执行，输出"Component unmounted"。

useEffect接受两个参数：第一个参数是一个函数，用于执行副作用操作；第二个参数是一个数组，用于指定依赖项。

如果依赖项为空数组（[]），则副作用操作只在组件挂载和卸载时执行一次。如果依赖项不为空数组，则副作用操作会在依赖项发生变化时执行。

例如，如果我们想要在count发生变化时执行副作用操作，可以将count作为依赖项传入数组中：

import React, { useEffect, useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

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

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

在上面的例子中，每当点击按钮增加count的值时，副作用操作会执行，输出"Count changed"。