快捷導(dǎo)航

詳解React如何獲取狀態(tài)的舊值

更新時間：2024年07月04日 10:14:51 作者：我是若塵

最近剛開始接觸 React,突然腦海出現(xiàn)一個問題,React中怎么在狀態(tài)更新時獲取它的舊值,特別是如果你之前用過 Vue,你可能會想知道 React 中有沒有類似 Vue 的 watch 屬性,那么react中怎么實現(xiàn)呢？本文就給大家介紹一下React如何獲取狀態(tài)的舊值,需要的朋友可以參考下

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

usePrevious Hook 的實現(xià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)建一個引用：我們用 useRef 創(chuàng)建了一個引用對象 ref。這個引用對象在組件的整個生命周期內(nèi)都不會變，它的 .current 屬性會在每次渲染時保存當(dāng)前的值。
更新引用：我們用 useEffect Hook 來更新 ref.current。useEffect 是一個副作用鉤子，它會在組件渲染后執(zhí)行。在這個副作用函數(shù)里，我們把傳進來的 value 賦值給 ref.current。這樣，每次組件重新渲染時，ref.current 都會更新為最新的 value。
返回舊值：最后，我們返回 ref.current 的當(dāng)前值。因為 useRef 的特性，這個值其實是上一次渲染時的值，所以它就是我們想要的舊值啦。

使用示例

下面是一個使用 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>你點擊了 {count} 次</p>
      {prevCount !== undefined && <p>上次你點擊了 {prevCount} 次</p>}
      <button onClick={() => setCount(count + 1)}>
        點我
      </button>
    </div>
  );
}

export default Example;

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

進一步擴展

如果你想在狀態(tài)變化時執(zhí)行一些特定的邏輯，可以結(jié)合 useEffect 來實現(xiàn)類似 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>你點擊了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>
        點我
      </button>
    </div>
  );
}

export default Example;

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

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

您可能感興趣的文章: