当前位置：首页 > article >正文

【React】useEffect的使用场景与作用

article 2024/11/15 15:28:17

useEffect 是 React 中的一个 Hook，用于在函数组件中执行副作用。副作用是指那些与渲染过程无关的操作，比如数据获取、订阅事件、手动操作 DOM、日志记录等。useEffect 允许你在函数组件中引入这些副作用，而不必依赖于类组件的生命周期方法（如 componentDidMount、componentDidUpdate 和 componentWillUnmount）。

useEffect 的使用场景和作用：

数据获取（Fetching Data）：

1.当组件加载时，通过 API 请求获取数据。

示例：

useEffect(() => {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => setData(data));
}, []); // 空依赖数组表示只在组件挂载时执行

2.订阅和取消订阅（Subscriptions）：

你可以在组件挂载时订阅某些事件，并在组件卸载时取消订阅。
示例：

useEffect(() => {
  const handleResize = () => console.log('Window resized');
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize); // 清除副作用
}, []); // 空依赖数组表示只在组件挂载和卸载时执行

3.DOM 操作：

当你需要手动操作 DOM 元素时，可以使用 useEffect。
示例：

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // 依赖于 count，每次 count 改变时执行

4.清除副作用（Cleanup Effects）：

在组件卸载或副作用更新之前清除副作用，以避免内存泄漏或不必要的操作。
例如：清除定时器、取消网络请求或移除事件监听器。
示例:

useEffect(() => {
  const timer = setTimeout(() => {
    console.log('This will run after 1 second');
  }, 1000);
  return () => clearTimeout(timer); // 在组件卸载时清除定时器
}, []); // 依赖数组为空，只在组件挂载和卸载时执行

useEffect 的依赖数组：

useEffect 接受两个参数：一个副作用函数和一个可选的依赖数组。
副作用函数：在组件渲染后执行。这个函数可以返回一个清除副作用的函数。

依赖数组：定义副作用何时重新执行。只有当数组中的依赖项发生变化时，副作用函数才会执行。

空数组 []：仅在组件挂载和卸载时执行副作用。

无数组：每次组件重新渲染时都会执行副作用。

带有依赖项的数组：当依赖项发生变化时才会重新执行副作用。

useEffect(() => {
  // 这段代码在组件挂载后运行
  console.log('Component mounted');
  
  // 返回的函数将在组件卸载时运行
  return () => {
    console.log('Component unmounted');
  };
}, []); // 空依赖数组意味着只在挂载和卸载时执行