react Hook useEffect的基本使用及注解

一、概述

useEffect是React提供的一个Hook，用于在函数组件中执行副作用操作。副作用操作通常包括数据获取、订阅事件、手动操作DOM等。useEffect可以让我们在函数组件中模拟类组件的生命周期方法（如componentDidMount、componentDidUpdate、componentWillUnmount）。

二、useEffect的基本用法和常见场景

1、基本用法：

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 在组件渲染后执行副作用操作
    console.log('Component did mount');

    return () => {
      // 在组件卸载前执行清理操作
      console.log('Component will unmount');
    };
  }, []); // 第二个参数是依赖数组，当依赖发生变化时才会重新执行effect

  return <div>My Component</div>;
}

2、数据获取：

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

function DataFetchingComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('请求接口地址')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // 只在组件挂载时获取数据

  return (
    <div>
      {data ? <p>{data}</p> : <p>Loading...</p>}
    </div>
  );
}

3、监听状态变化：

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

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

  useEffect(() => {
    console.log('Count has changed:', count);
  }, [count]); // 监听count的变化，变化则useEffect重新执行

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

4、清理副作用：

import React, { useEffect } from 'react';

function TimerComponent() {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('Tick');
    }, 1000);

    return () => {
      clearInterval(timer); // 清除定时器
    };
  }, []); // 只在组件挂载时设置定时器

  return <div>Timer Component</div>;
}

通过useEffect，我们可以在函数组件中处理各种副作用操作。