关于页面状态更新获取上次状态值

最新推荐文章于 2024-07-17 16:12:58 发布

whmwjy1997

最新推荐文章于 2024-07-17 16:12:58 发布

阅读量596

点赞数 1

分类专栏：前端学习文章标签：前端

本文链接：https://blog.csdn.net/qq_42698608/article/details/120909980

版权

前端学习专栏收录该内容

47 篇文章 1 订阅

订阅专栏

本文介绍了如何在React中创建自定义Hook以实现组件首次渲染检测和记录状态变化前的值。通过`useUpdateFirst`钩子可以在父组件中判断子组件的首次渲染，而`useReceivePrev`则用于保存并返回状态更新前的原始值。这两个自定义Hook有助于在复杂的组件逻辑中更好地管理和跟踪状态变化。

摘要由CSDN通过智能技术生成

问题由来？抛出问题？
在页面中可能会遇到这样的诉求，第一个问题是可能要在项目中判断是首次渲染还是后续的渲染，然后要在useEffect里面检查这个标识状态。
我们或许可以把它封装成一个自定义hook：
子组件：
const useUpdateFirst = () => {
const ref = useRef(true);
useEffect(() => {
ref.current = false;
})
return [ref.current];
}
父组件：
const Example = () => {
const [count, setCount] = useState(0);
const [status] = useUpdateFirst();

console.log(count, status);

return (

{count}

<button onClick={() => {setCount(count + 1)}}>+

)
}
再来看一个问题，这才是我们可能会遇到的问题，我们去使用useState更新值是再正常不过的事情了，不过有的需求可能要求我们要记录更新之前的原值，这时候我们仍然可以使用useRef去考虑
我们继续自定义一个hook：
子组件：
const useReceivePrev = (value) => {
const ref = useRef();
useEffect(() => {
ref.current = value;
})
return [ref.current];
}

父组件：
function Example () {
const [count, setCount] = useState(0);
const [prev] = useReceivePrev(count);
console.log(count,prev)

return (

{count}

<button onClick={() => {setCount(count+1)}}>+

)
}