Javascript React：关于在此处使用“useRef”存储先前状态的混淆

我在阅读一些博客文章时看到了这个定制钩子

常量usePrevious=（值）=>{
const ref=useRef（）；
useffect（（）=>{
参考电流=值；
}，[价值]；
返回参考电流；
};

我做了一个代码沙盒来测试它

事实上，它是有效的。它保留了以前的输入值

我尝试使用

useState

const usePrevious2=（值）=>{
const[prevValue，setPrevValue]=useState（）；
useffect（（）=>{
setPrevValue（值）；
}，[价值]；
返回值；
};

---

但是，

usePrevious2

返回的值与当前状态同步。我想知道这里的差异的机制是什么？为什么

ref

可以保留以前的状态，但不能保留另一个

useState

。有人能给我解释一下吗？

使用

useState

的问题是状态更新会导致重新渲染

如果您使用

usePrevious

/

useRef

并更改输入，当输入值更改时，将有一个状态更新-在该状态更新发生后，

usePrevious

将很快安排

ref.current=value

分配，但此类分配不会导致重新渲染

---

相反，使用

usePrevious2

/

useState

，当您使用

setPrevious

时，将发生重新渲染。当输入字段更改时，将有2次重新渲染；一个是在输入字段更改时，另一个是在

useffect

回调运行并调用

setPrevValue

后。因此，

usePrevious2

只会在很短的时间内“过期”，直到其效果挂钩运行并再次设置状态。

使用状态的第二个实现将在其状态更新时触发重新渲染。您看到更新的状态赶上了刚刚“缓存”的值。