嘿，朋友們！我最近剛開(kāi)始接觸 React，突然腦海出現(xiàn)一個(gè)問(wèn)題，React中怎么在狀態(tài)更新時(shí)獲取它的舊值。特別是如果你之前用過(guò) Vue，你可能會(huì)想知道 React 中有沒(méi)有類(lèi)似 Vue 的 watch 屬性，那么react中怎么實(shí)現(xiàn)呢？別擔(dān)心，我們可以用一個(gè)自定義 Hook 來(lái)搞定這個(gè)問(wèn)題。今天我們就來(lái)聊聊怎么實(shí)現(xiàn)這個(gè)小工具。

usePrevious Hook 的實(shí)現(xiàn)

首先，我們來(lái)寫(xiě)一個(gè)簡(jiǎn)單的 usePrevious Hook：

import { useRef, useEffect } from 'react';

// 記錄舊值的公用hooks
export default function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

這段代碼在干嘛？

• 創(chuàng)建一個(gè)引用： 我們用 useRef 創(chuàng)建了一個(gè)引用對(duì)象 ref。這個(gè)引用對(duì)象在組件的整個(gè)生命周期內(nèi)都不會(huì)變，它的 .current 屬性會(huì)在每次渲染時(shí)保存當(dāng)前的值。

• 更新引用： 我們用 useEffect Hook 來(lái)更新 ref.current。useEffect 是一個(gè)副作用鉤子，它會(huì)在組件渲染后執(zhí)行。在這個(gè)副作用函數(shù)里，我們把傳進(jìn)來(lái)的 value 賦值給 ref.current。這樣，每次組件重新渲染時(shí)，ref.current 都會(huì)更新為最新的 value。

• 返回舊值： 最后，我們返回 ref.current 的當(dāng)前值。因?yàn)?useRef 的特性，這個(gè)值其實(shí)是上一次渲染時(shí)的值，所以它就是我們想要的舊值啦。

使用示例

下面是一個(gè)使用 usePrevious Hook 的小例子：

import React, { useState } from 'react';
import usePrevious from './usePrevious';

function Example() {
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);

  return (
    <div>
      <p>你點(diǎn)擊了 {count} 次</p>
      {prevCount !== undefined && <p>上次你點(diǎn)擊了 {prevCount} 次</p>}
      <button onClick={() => setCount(count + 1)}>
        點(diǎn)我
      </button>
    </div>
  );
}

export default Example;

在這個(gè)例子里，我們用 useState 創(chuàng)建了一個(gè)狀態(tài)變量 count，每次點(diǎn)擊按鈕時(shí)它的值會(huì)增加。同時(shí)，我們用 usePrevious Hook 來(lái)獲取 count 的舊值。這樣，當(dāng)組件渲染時(shí)，prevCount 就會(huì)顯示上一次渲染時(shí)的 count 值。

進(jìn)一步擴(kuò)展

如果你想在狀態(tài)變化時(shí)執(zhí)行一些特定的邏輯，可以結(jié)合 useEffect 來(lái)實(shí)現(xiàn)類(lèi)似 Vue 中 watch 的功能：

import { useEffect } from 'react';
import usePrevious from './usePrevious';

function useWatch(value, callback) {
  const prevValue = usePrevious(value);

  useEffect(() => {
    if (prevValue !== value) {
      callback(prevValue, value);
    }
  }, [value, prevValue, callback]);
}

使用 useWatch Hook

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

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

  useWatch(count, (prevCount, newCount) => {
    console.log(`Count 從 ${prevCount} 變成了 ${newCount}`);
  });

  return (
    <div>
      <p>你點(diǎn)擊了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>
        點(diǎn)我
      </button>
    </div>
  );
}

export default Example;

在這個(gè)例子里，useWatch Hook 監(jiān)聽(tīng) count 的變化，并在變化時(shí)執(zhí)行回調(diào)函數(shù)。這樣你就可以在 React 中實(shí)現(xiàn)類(lèi)似 Vue 中 watch 的功能啦。

到此這篇關(guān)于詳解React如何獲取狀態(tài)的舊值的文章就介紹到這了,更多相關(guān)React獲取狀態(tài)舊值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論