useEffect与watch的那些事

useEffect 是 React 中的一个 Hook，用于在组件渲染之后执行副作用操作。watch 则是 Vue.js 中的一个选项，用于监听数据的变化并在变化时执行相应的回调函数。

useEffect 和 watch 的区别

1. 框架:

   • useEffect: 属于 React 框架，用于在函数组件中执行副作用。
   • watch: 属于 Vue.js 框架，用于监听响应式数据的变化。

2. 用途:

   • useEffect: 可以在组件挂载、更新或卸载时执行副作用，例如数据获取、订阅或手动操作 DOM 等。
   • watch: 用于响应特定数据的变化，并在变化时执行特定的逻辑处理。

3. API 使用:

   • useEffect:

     useEffect(() => {
       // 副作用代码
       return () => {
         // 清理代码（可选）
       };
     }, [依赖项]);
     

   • watch:

     watch(() => someReactiveData, (newVal, oldVal) => {
       // 变化处理逻辑
     });
     

用 useEffect 实现 watch 的功能

虽然 useEffect 和 watch 属于不同的框架，但是我们可以通过巧妙使用 useEffect 来实现类似 watch 的功能。

示例：

假设我们有一个状态 count，需要在 count 变化时执行某些逻辑。我们可以使用 useEffect 来实现这一点。

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

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

  useEffect(() => {
    // 这里的代码会在 count 变化时执行
    console.log(`Count changed to ${count}`);

    // 如果需要在组件卸载时清理副作用，可以返回一个清理函数
    return () => {
      console.log(`Cleaning up for count ${count}`);
    };
  }, [count]); // 依赖项是 count，当 count 变化时，useEffect 会重新执行

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

export default ExampleComponent;

在这个示例中，useEffect 的第二个参数是一个依赖项数组 [count]，当 count 变化时，useEffect 中的代码会重新执行，这与 watch 的监听数据变化并执行回调的功能非常相似。