如何强制刷新react hooks组件
强制刷新react hooks组件
首先要知道react组件在什么情况下会刷新，比如：state、props、context更新。。。。
然后就有各种方式可以强行刷新组件了，比如：
const [refresh, setRefresh] = useState(false);
useEffect(() => {
refresh && setTimeout(() => setRefresh(false))
}, [refresh])
const doRefresh = () => setRefresh(true)react组件刷新问题(函数组件)
我们使用React进行开发的时候，有可能会出现已经执行了setState()的方法更新过state了，但是为什么组件还是未刷新呢？
这里就会有一个概念：地址。类似C，Java这种后端语言一样。
如果我们的state是一个复杂对象的话（数组，对象）。我们的变量存储的是state的地址而不是值。
const [object,setObject] = useState({id:'1',name:'张三'})就像上面这段代码，object这个state存储的是{id:'1',name:'张三'}这个对象在内存中的地址，而不是值本身。
那么这个概念和react刷新的机制有什么关系呢？
因为React的useState()这个hook的刷新机制是根据state存储的值是否发生改变而进行刷新的。
const cloneObject = object
cloneObject.name = '李四'
setObject(cloneObject)
setObject((preObj)=>{
preObj.name = '李四'
return preObj
})以上两种setState的方式都不会触发组件的刷新，正如我们上面提到的概念，object存储的地址，虽然我们改变了object里的一个属性的值，但object本身存储的还是地址，并没有发生变化，所以是不会触发组件更新的。
那么怎么解决呢，根据上面的概念，很容易的就能想到只需要改变state的地址就行了。
也就是新创建一个对象来覆盖原来的对象，这样它的地址自然和以前的不一样。
那么怎么创建一个新的对象呢？
const cloneObject = JSON.parse(JSON.stringify(object)) cloneObject.name = '李四' setObject(cloneObject)
JSON.stringify方法的作用是将传入的参数转化为json字符串类型的数据。
JSON.parse方法的作用是将传入的参数转化为json对象类型的数据。
这样就能生成一个新的对象，这下地址就改变了。
const cloneObject = {...object,name:'李四'}
setObject(cloneObject)这个是利用的ES6的解构语法，其实和下面的方法一样。只是用起来更加简洁。
本质上都是手动创建一个值一样的新对象，不过下面的方法不可取，这里只是帮大家理解上面的方法，大家开发中用上面的写法进行开发。
const cloneObject = {id:'1',name:'张三'}
cloneObject.name = '李四'
setObject(cloneObject)总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了react-pdf 打造在线简历生成器的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
Suspense 是 React 中的一个组件，直译过来有悬挂的意思，能够将其包裹的异步组件挂起，直到组件加载完成后再渲染，本文详细介绍了如何在Suspense中请求数据，感兴趣的小伙伴可以参考阅读本文2023-04-04
这篇文章主要介绍了编写简洁React组件的小技巧，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下2021-04-04
关于react-router/react-router-dom v4 history不能访问问题的解决
这篇文章主要给大家介绍了关于react-router/react-router-dom v4 history不能访问问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧。2018-01-01
React+echarts (echarts-for-react) 实现中国地图及省份切换功能
这篇文章主要介绍了React+echarts (echarts-for-react) 画中国地图及省份切换,有足够的地图数据，可以点击到街道，示例我只出到市级，本文结合实例代码给大家介绍的非常详细需要的朋友可以参考下2022-11-11
骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充进需要显示的数据内容，本文就介绍了React实现一个通用骨架屏组件示例，分享给大家，感兴趣的可以了解一下2021-12-12
这篇文章主要为大家详细介绍了React实现双滑块交叉滑动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要为大家介绍了React组件实例三大属性state props refs使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
什么是re-render（重新渲染）？哪些是必要的re-render？哪些是非必要的re-render？如果你对这些问题还不是很明白，那么可以在这篇文章中找到答案2022-12-12
这篇文章我们将详细讲解如何建立一个这样简单的列表,文章通过代码示例介绍的非常详细,对我们的学习或工作有一定的帮助,需要的朋友可以参考下2023-08-08
最新评论