React中的addEventListener和useEffect实现

在React中，我们可以通过addEventListener来添加事件监听器，以监听DOM元素的各种事件，比如click、scroll等等，而通过useEffect来处理组件的副作用，比如发送网络请求、添加事件监听器等等。本篇文章将介绍如何在React中使用addEventListener和useEffect。

addEventListener

要在React中添加事件监听器，我们可以使用React提供的on事件处理器，比如onClick、onScroll等等。不过，在某些情况下，我们可能需要使用addEventListener方法。

使用addEventListener方法添加事件监听器的基本流程如下：

1. 获取目标元素
2. 使用addEventListener()方法添加事件监听器
3. 在事件监听器中编写处理函数

举例来说，比如我们想要监听窗口的滚动事件，可以这样实现：

import React, { useEffect } from 'react';

const ScrollExample = () => {
  useEffect(() => {
    const handleScroll = () => {
      console.log('window scrolled');
    };
        
    window.addEventListener('scroll', handleScroll);
        
    // 清除监听器
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <div>
      Scroll Example
    </div>
  );
};

export default ScrollExample;

这里我们使用了useEffect钩子函数来添加滚动监听器。在useEffect内部，我们先定义了一个处理函数handleScroll，然后使用addEventListener方法在window对象上添加了scroll事件监听器。

在useEffect的返回函数中，我们使用removeEventListener方法来清除监听器，以避免内存泄漏。

useEffect

useEffect是React提供的一种处理组件副作用的机制。通过useEffect可以执行一些副作用操作，比如发送网络请求、订阅事件等等。useEffect还可以在组件状态变化、组件挂载/卸载时触发。

使用useEffect的基本流程如下：

1. 编写副作用代码（比如发送网络请求）
2. 在useEffect函数内部添加副作用代码
3. 在useEffect函数的第二个参数中添加依赖项

下面是一个使用useEffect发送网络请求的例子：

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

const NetworkRequestExample = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        'https://jsonplaceholder.typicode.com/posts/1'
      );
      setData(result.data);
    };
    fetchData();
  }, []);

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

export default NetworkRequestExample;

这里我们使用了useEffect钩子函数来发送网络请求。在useEffect内部，我们使用useState钩子函数来设置组件状态data，然后在useEffect的回调函数中使用axios发送网络请求，获取到数据后更新data。

在useEffect的第二个参数中添加了一个空数组，这表示该useEffect只在组件挂载时执行一次。

总结

本篇文章介绍了如何在React中使用addEventListener和useEffect实现事件监听和组件副作用的处理。

使用addEventListener时，需要获取目标元素，然后在目标元素上使用addEventListener方法添加事件监听器，并在监听器回调函数中编写处理代码。

在使用useEffect时，需要编写副作用代码，并在useEffect回调函数中添加该代码，并在第二个参数中添加依赖项，以控制副作用代码的执行。