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

Effect（useEffect Hook）

useEffect 的工作原理：

事件（event）

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

1. 触发方式：useEffect 是在组件渲染后自动调用的，而事件是由用户或浏览器与页面交互时触发的。
2. 用途：useEffect 主要用于执行副作用操作，如数据获取、DOM操作等。而事件则主要用于响应用户或浏览器的交互。
3. 依赖：useEffect 可以依赖于组件的props和state，并且可以在每次这些依赖项更改时重新运行。而事件处理器通常只依赖于触发事件的特定上下文。
4. 异步性：虽然两者都可以是异步的（例如，你可以在 useEffect 中使用异步函数，或者在事件处理器中调用异步函数），但 useEffect 的设计允许你更容易地处理异步副作用，如数据获取。
5. 生命周期：在类组件中，useEffect 可以看作是 componentDidMount、componentDidUpdate 和 componentWillUnmount 这三个生命周期方法的组合。而事件则与这些生命周期方法没有直接关联。
6. 取消：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;