实现获取state前一个值

React

梗概

• 组件渲染时使用hooks得时候返回保存好的[use::ref]
• 用useEffect监测state, 然后更新ref
  • 因为[base::effect触发在组件渲染之后], 所以渲染组件时获取到得ref都是没更新前的

应用场景

1. 获取前一个值进行对比：最常见的使用场景
2. 渲染时执行监听逻辑：在组件函数体中对比当前值与ref中存储的上一次值，若值发生变化则执行目标逻辑

实现代码

在React中，为了获取组件中state的前一个值，可以结合使用useRef和useEffect来实现。下面是一个示例代码，展示如何通过自定义Hook来实现这一功能。

import React, { useState, useRef, useEffect } from 'react';
 
// 自定义Hook用于获取state的前一个值
function usePrevious(value) {
  const ref = useRef();
 
  // 使用useEffect在每次渲染后更新ref的current值
  useEffect(() => {
    ref.current = value;
  }, [value]);
 
  // 返回ref.current，这就是state的前一个值
  return ref.current;
}
 
const ExampleComponent = () => {
  const [count, setCount] = useState(0);
 
  // 使用自定义Hook获取count的前一个值
  const prevCount = usePrevious(count);
 
  return (
    <div>
      <p>当前计数: {count}</p>
      <p>上一次计数: {prevCount}</p>
      <button onClick={() => setCount(count + 1)}>增加计数</button>
    </div>
  );
};
 
export default ExampleComponent;

渲染时监听逻辑实现

除了获取前一个值，还可以在渲染过程中直接执行监听逻辑：

import React, { useState, useRef } from 'react';
 
function ComponentWithRenderTimeListener() {
  const [value, setValue] = useState(0);
  const prevValueRef = useRef(value);
 
  // 在渲染时对比并执行逻辑
  if (prevValueRef.current !== value) {
    console.log('值发生变化:', prevValueRef.current, '->', value);
    // 执行你的监听逻辑
    prevValueRef.current = value; // 更新存储的上一次值
  }
 
  return (
    <div>
      <p>当前值: {value}</p>
      <button onClick={() => setValue(value + 1)}>增加</button>
    </div>
  );
}

注意：虽然这种方式可以工作，但在实际开发中很少使用，因为：

• 在渲染函数中执行副作用不是最佳实践
• 通常更推荐使用 useEffect 来处理值变化的监听逻辑