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

React 之 Effect与事件（event）（八）

news 2025/8/16 18:10:29

Effect（useEffect Hook）

在React中，Effect（或者更具体地说，useEffect Hook）是一个特殊的函数，它允许你在函数组件中执行副作用操作。这些副作用操作可能包括数据获取、手动更改DOM、订阅或取消订阅事件、或者执行任何在渲染过程中不需要执行但需要在组件的生命周期中某个点执行的操作。
相当于vue中的watch

useEffect 的工作原理：

当你传入一个函数给 useEffect 时，React会在每次组件渲染后（包括组件的首次渲染）调用这个函数。但请注意，它并不会阻塞浏览器更新屏幕，因此你的应用看起来仍然是响应式的。

事件（event）

事件（event）在Web开发中是一个非常重要的概念。它们是由用户或浏览器与页面交互时触发的，例如点击按钮、滚动页面、提交表单等。事件处理器（event handler）是处理这些事件的函数，你可以在事件处理器中执行特定的操作，例如更新状态、导航到新的页面等。

useEffect 和事件之间的主要区别：

触发方式：useEffect 是在组件渲染后自动调用的，而事件是由用户或浏览器与页面交互时触发的。
用途：useEffect 主要用于执行副作用操作，如数据获取、DOM操作等。而事件则主要用于响应用户或浏览器的交互。
依赖：useEffect 可以依赖于组件的props和state，并且可以在每次这些依赖项更改时重新运行。而事件处理器通常只依赖于触发事件的特定上下文。
异步性：虽然两者都可以是异步的（例如，你可以在 useEffect 中使用异步函数，或者在事件处理器中调用异步函数），但 useEffect 的设计允许你更容易地处理异步副作用，如数据获取。
生命周期：在类组件中，useEffect 可以看作是 componentDidMount、componentDidUpdate 和 componentWillUnmount 这三个生命周期方法的组合。而事件则与这些生命周期方法没有直接关联。
取消：useEffect 允许你返回一个清理函数，这个函数会在下次 useEffect 运行之前被调用，或者当组件卸载时被调用。这可以用于取消订阅、清理DOM更改等。而事件没有直接的“取消”机制，但你可以通过移除事件监听器来停止监听特定事件。

Effect（useEffect Hook）代码栗子：

useEffect 相当于vue中的watch。

import React, { useState, useEffect } from 'react';  function ExampleComponent() {  const [count, setCount] = useState(0);  // 使用 useEffect 在组件挂载后打印一条消息，并在每次更新后更新文档标题  useEffect(() => {  // 组件首次渲染和每次更新后都会执行的代码  console.log('Component did mount or update');  // 使用浏览器API更新页面标题  document.title = `You clicked ${count} times`;  // 返回一个函数，该函数会在组件卸载或下次执行effect之前调用  return () => {  // 清理函数，用于清除副作用  console.log('Component will unmount');  };  }, [count]); // 第二个参数是依赖项数组，如果count发生变化，则effect会重新运行  //如果我们没有传递依赖项数组（即只写useEffect(() => {...})），那么每次组件渲染时，useEffect都会执行。同时，当组件卸载时，清理函数会被执行。// 一个函数，用于在点击按钮时增加计数  const handleClick = () => {  setCount(count + 1);  };  return (  <div>  <p>You clicked {count} times</p>  <button onClick={handleClick}>Click me</button>  </div>  );  
}  export default ExampleComponent;