import { useState, useMemo } from 'react';

function ComputedDemo() {
  // 1. 定義數(shù)據(jù)源（模擬 Vue 的 data 選項(xiàng)）
  const [num1, setNum1] = useState(10);
  const [num2, setNum2] = useState(20);
  const [unrelatedNum, setUnrelatedNum] = useState(0); // 與計(jì)算邏輯無關(guān)的變量

  // 2. 使用 useMemo 實(shí)現(xiàn)計(jì)算屬性（模擬 Vue computed）
  const sum = useMemo(() => {
    console.log('useMemo 計(jì)算邏輯執(zhí)行了——僅依賴變化時(shí)觸發(fā)');
    return num1 + num2;
  }, [num1, num2]); // 依賴數(shù)組：僅 num1、num2 變化時(shí)，重新計(jì)算 sum

  return (
    <div style={{ padding: '20px' }}>
      <h3>React 實(shí)現(xiàn) Vue computed（useMemo 版）</h3>
      <p>num1: {num1}</p>
      <p>num2: {num2}</p>
      <p>無關(guān)變量 unrelatedNum: {unrelatedNum}</p>
      <p style={{ color: 'blue', fontWeight: 'bold' }}>計(jì)算屬性 sum（num1 + num2）: {sum}</p>

      {/* 3. 交互按鈕：修改相關(guān)依賴 */}
      <button onClick={() => setNum1(prev => prev + 1)} style={{ marginRight: '10px' }}>
        num1 + 1
      </button>
      <button onClick={() => setNum2(prev => prev + 1)} style={{ marginRight: '10px' }}>
        num2 + 1
      </button>

      {/* 4. 交互按鈕：修改無關(guān)依賴 */}
      <button onClick={() => setUnrelatedNum(prev => prev + 1)}>
        無關(guān)變量 + 1
      </button>
    </div>
  );
}

export default ComputedDemo;

import { useState } from 'react';

function SimpleComputedDemo() {
  // 定義數(shù)據(jù)源
  const [firstName, setFirstName] = useState('Zhang');
  const [lastName, setLastName] = useState('San');

  // 簡化版：直接定義普通變量實(shí)現(xiàn)計(jì)算（無緩存）
  const fullName = `${firstName} ${lastName}`; // 簡單模板字符串拼接

  return (
    <div style={{ padding: '20px' }}>
      <h3>React 實(shí)現(xiàn) Vue computed（簡化版）</h3>
      <p>firstName: {firstName}</p>
      <p>lastName: {lastName}</p>
      <p style={{ color: 'blue', fontWeight: 'bold' }}>計(jì)算結(jié)果 fullName: {fullName}</p>

      <button onClick={() => setFirstName('Li')} style={{ marginRight: '10px' }}>
        修改 firstName 為 Li
      </button>
      <button onClick={() => setLastName('Si')}>
        修改 lastName 為 Si
      </button>
    </div>
  );
}

export default SimpleComputedDemo;

import { useState, useEffect } from 'react';

function BasicWatchDemo() {
  // 1. 定義數(shù)據(jù)源（模擬 Vue data）
  const [count, setCount] = useState(0); // 單個(gè)基礎(chǔ)類型值
  const [user, setUser] = useState({ name: 'Zhang San', age: 25 }); // 對象類型

  // 子場景 1：監(jiān)聽單個(gè)基礎(chǔ)類型值（對應(yīng) Vue 監(jiān)聽單個(gè)基礎(chǔ)數(shù)據(jù)）
  useEffect(() => {
    console.log(`[基礎(chǔ)監(jiān)聽] count 發(fā)生變化，新值為：${count}`);
    // 此處可執(zhí)行副作用邏輯：如接口請求、本地存儲等
  }, [count]); // 依賴數(shù)組：僅 count 變化時(shí)，執(zhí)行副作用函數(shù)

  // 子場景 2：監(jiān)聽對象的某個(gè)具體屬性（對應(yīng) Vue 監(jiān)聽對象單個(gè)屬性）
  useEffect(() => {
    console.log(`[基礎(chǔ)監(jiān)聽] user.name 發(fā)生變化，新值為：${user.name}`);
    // 此處可執(zhí)行副作用邏輯
  }, [user.name]); // 依賴數(shù)組：僅 user.name 變化時(shí)，執(zhí)行副作用函數(shù)

  return (
    <div style={{ padding: '20px' }}>
      <h3>React 實(shí)現(xiàn) Vue watch（基礎(chǔ)監(jiān)聽版）</h3>
      <p>count: {count}</p>
      <p>user.name: {user.name}</p>
      <p>user.age: {user.age}</p>

      {/* 交互按鈕：修改 count */}
      <button onClick={() => setCount(prev => prev + 1)} style={{ marginRight: '10px' }}>
        count + 1
      </button>

      {/* 交互按鈕：修改 user.name */}
      <button onClick={() => setUser(prev => ({ ...prev, name: 'Li Si' }))} style={{ marginRight: '10px' }}>
        修改 user.name 為 Li Si
      </button>

      {/* 交互按鈕：修改 user.age（不觸發(fā) user.name 的監(jiān)聽） */}
      <button onClick={() => setUser(prev => ({ ...prev, age: prev.age + 1 }))}>
        user.age + 1
      </button>
    </div>
  );
}

export default BasicWatchDemo;

import { useState, useEffect } from 'react';

function ManualDeepWatchDemo() {
  // 定義深層對象數(shù)據(jù)源
  const [user, setUser] = useState({
    name: 'Zhang San',
    address: {
      province: 'Guangdong',
      city: 'Shenzhen'
    }
  });

  // 手動(dòng)監(jiān)聽深層屬性：user.name、user.address.province、user.address.city
  useEffect(() => {
    console.log(`[手動(dòng)深層監(jiān)聽] user 深層屬性發(fā)生變化，當(dāng)前 user：`, user);
  }, [user.name, user.address.province, user.address.city]);

  return (
    <div style={{ padding: '20px' }}>
      <h3>React 實(shí)現(xiàn) Vue watch（手動(dòng)深層監(jiān)聽版）</h3>
      <p>user.name: {user.name}</p>
      <p>user.address.province: {user.address.province}</p>
      <p>user.address.city: {user.address.city}</p>

      <button onClick={() => setUser(prev => ({
        ...prev,
        address: { ...prev.address, city: 'Guangzhou' }
      }))} style={{ marginRight: '10px' }}>
        修改城市為 Guangzhou
      </button>

      <button onClick={() => setUser(prev => ({
        ...prev,
        address: { ...prev.address, province: 'Jiangsu' }
      }))}>
        修改省份為 Jiangsu
      </button>
    </div>
  );
}

export default ManualDeepWatchDemo;

npm install lodash
# 或
yarn add lodash

import { useEffect, useRef } from 'react';
import isEqual from 'lodash/isEqual';

// 自定義深層對比 useEffect Hook（模擬 deep: true）
function useDeepCompareEffect(effect, deps) {
  // 1. 使用 useRef 緩存上一次的依賴數(shù)據(jù)
  const prevDepsRef = useRef();

  // 2. 深層對比當(dāng)前依賴與上一次依賴是否一致
  const depsChanged = !isEqual(deps, prevDepsRef.current);

  // 3. 更新緩存的依賴數(shù)據(jù)（無論是否變化，都更新為當(dāng)前最新依賴）
  if (depsChanged) {
    prevDepsRef.current = deps;
  }

  // 4. 調(diào)用 useEffect，依賴數(shù)組為 [depsChanged]（僅當(dāng)深層對比發(fā)現(xiàn)變化時(shí)，執(zhí)行 effect）
  useEffect(() => {
    return effect();
  }, [depsChanged]);
}

export default useDeepCompareEffect;

import { useState } from 'react';
import useDeepCompareEffect from './useDeepCompareEffect';

function DeepWatchDemo() {
  // 定義復(fù)雜深層對象數(shù)據(jù)源
  const [user, setUser] = useState({
    name: 'Zhang San',
    age: 25,
    address: {
      province: 'Guangdong',
      city: 'Shenzhen',
      detail: {
        street: 'Nanshan Road',
        number: '123'
      }
    },
    hobbies: ['reading', 'running']
  });

  // 使用自定義 useDeepCompareEffect 實(shí)現(xiàn)深度監(jiān)聽
  useDeepCompareEffect(() => {
    console.log(`[深層監(jiān)聽] user 發(fā)生變化（包含深層屬性），當(dāng)前 user：`, user);
  }, [user]); // 依賴數(shù)組直接傳入整個(gè) user，無需手動(dòng)羅列深層屬性

  return (
    <div style={{ padding: '20px' }}>
      <h3>React 實(shí)現(xiàn) Vue watch（深層監(jiān)聽版）</h3>
      <p>user.name: {user.name}</p>
      <p>user.address.detail.street: {user.address.detail.street}</p>
      <p>user.hobbies: {user.hobbies.join(', ')}</p>

      <button onClick={() => setUser(prev => ({
        ...prev,
        address: {
          ...prev.address,
          detail: { ...prev.address.detail, street: 'Futian Road' }
        }
      }))} style={{ marginRight: '10px' }}>
        修改街道為 Futian Road
      </button>

      <button onClick={() => setUser(prev => ({
        ...prev,
        hobbies: [...prev.hobbies, 'swimming']
      }))}>
        添加愛好 swimming
      </button>
    </div>
  );
}

export default DeepWatchDemo;

import { useState, useEffect } from 'react';

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

  // useEffect 默認(rèn)行為：首次渲染 + count 變化時(shí)執(zhí)行（對應(yīng) Vue immediate: true）
  useEffect(() => {
    console.log(`[立即執(zhí)行] count 監(jiān)聽觸發(fā)，當(dāng)前值：${count}`);
    // 副作用邏輯：如初始化請求、首次渲染后的數(shù)據(jù)處理等
  }, [count]);

  return (
    <div style={{ padding: '20px' }}>
      <h3>React 實(shí)現(xiàn) Vue watch（立即執(zhí)行版）</h3>
      <p>count: {count}</p>
      <button onClick={() => setCount(prev => prev + 1)}>
        count + 1
      </button>
    </div>
  );
}

export default ImmediateWatchDemo1;

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

function ImmediateWatchDemo2() {
  const [count, setCount] = useState(0);
  const isFirstRender = useRef(true); // 標(biāo)識位：標(biāo)記是否為首次渲染

  useEffect(() => {
    // 首次渲染時(shí)，直接返回，不執(zhí)行副作用邏輯
    if (isFirstRender.current) {
      isFirstRender.current = false; // 重置標(biāo)識位，后續(xù)渲染不再生效
      return;
    }

    // 非首次渲染（僅 count 變化時(shí)），執(zhí)行副作用邏輯
    console.log(`[取消立即執(zhí)行] count 發(fā)生變化，當(dāng)前值：${count}`);
  }, [count]);

  return (
    <div style={{ padding: '20px' }}>
      <h3>React 實(shí)現(xiàn) Vue watch（取消立即執(zhí)行版）</h3>
      <p>count: {count}</p>
      <button onClick={() => setCount(prev => prev + 1)}>
        count + 1
      </button>
    </div>
  );
}

export default ImmediateWatchDemo2;

import { useEffect, useRef } from 'react';
import isEqual from 'lodash/isEqual';

// 自定義 Vue 風(fēng)格 useWatch Hook
function useWatch(watchSource, callback, options = { immediate: false, deep: false }) {
  const { immediate, deep } = options;
  const prevSourceRef = useRef(); // 緩存上一次的監(jiān)聽源數(shù)據(jù)
  const isFirstRender = useRef(true); // 標(biāo)記是否為首次渲染

  // 處理監(jiān)聽邏輯
  useEffect(() => {
    // 1. 處理首次渲染立即執(zhí)行
    if (isFirstRender.current) {
      isFirstRender.current = false;
      if (immediate) {
        callback(watchSource, undefined); // 首次執(zhí)行：新值為當(dāng)前監(jiān)聽源，舊值為 undefined
        return;
      }
    }

    // 2. 處理深度對比 vs 淺對比
    const sourceChanged = deep 
      ? !isEqual(watchSource, prevSourceRef.current) 
      : watchSource !== prevSourceRef.current;

    // 3. 監(jiān)聽源變化時(shí)，執(zhí)行回調(diào)函數(shù)
    if (sourceChanged) {
      callback(watchSource, prevSourceRef.current); // 傳遞新值和舊值
    }

    // 4. 更新緩存的監(jiān)聽源數(shù)據(jù)
    prevSourceRef.current = deep ? JSON.parse(JSON.stringify(watchSource)) : watchSource;
  }, [watchSource, callback, immediate, deep]);
}

export default useWatch;

import { useState } from 'react';
import useWatch from './useWatch';

function VueStyleWatchDemo() {
  // 定義監(jiān)聽源
  const [user, setUser] = useState({
    name: 'Zhang San',
    age: 25,
    address: {
      city: 'Shenzhen'
    }
  });

  // 使用封裝的 useWatch（支持 deep: true + immediate: true）
  useWatch(
    user, // 監(jiān)聽源（對應(yīng) Vue watch 的監(jiān)聽目標(biāo)）
    (newValue, oldValue) => { // 回調(diào)函數(shù)（對應(yīng) Vue watch 的處理函數(shù)）
      console.log('[Vue 風(fēng)格 useWatch] 監(jiān)聽觸發(fā)');
      console.log('新值：', newValue);
      console.log('舊值：', oldValue);
    },
    { immediate: true, deep: true } // 配置項(xiàng)（對應(yīng) Vue watch 的 immediate 和 deep）
  );

  return (
    <div style={{ padding: '20px' }}>
      <h3>React 封裝 Vue 風(fēng)格 useWatch</h3>
      <p>user.name: {user.name}</p>
      <p>user.address.city: {user.address.city}</p>

      <button onClick={() => setUser(prev => ({
        ...prev,
        address: { ...prev.address, city: 'Guangzhou' }
      }))}>
        修改城市為 Guangzhou
      </button>
    </div>
  );
}

export default VueStyleWatchDemo;