React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > react useState改变值不渲染

react中useState改变值不渲染的解决方式

作者:湫ii

这篇文章主要介绍了react中useState改变值不渲染的解决方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

react中useState改变值不渲染

React中默认浅监听,当State值为对象时,栈中存的是对象的引用(地址),setState改变的是堆中的数据

所以此时 setArr(arr) 后,栈中的地址还是原地址,React浅监听到地址没变,故会认为State并未改变,故没有重渲染页面

解决的办法

示例如下:

利用ES6的拓展符

const [arr, setArr] = useState([])
setArr([...arr])

react踩坑 useState的两次渲染

问题背景,函数组件中使用useState后,console.log发现组件重复渲染。

一开始我以为是useState的问题,经查验,发现是index.tsx里<React.StrictMode>的坑

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

以下内容,摘自react官网,如果你很忙可以不看!总之,渲染两次没事,生产模式下不会这样。

StrictMode 目前有助于:

检测意外的副作用

检测过时的 context API

检测意外的副作用

从概念上讲,React 分两个阶段工作:

渲染 阶段会确定需要进行哪些更改,比如 DOM。在此阶段,React 调用 render,然后将结果与上次渲染的结果进行比较。

提交 阶段发生在当 React 应用变化时。(对于 React DOM 来说,会发生在 React 插入,更新及删除 DOM 节点的时候。)在此阶段,React 还会调用 componentDidMount 和 componentDidUpdate 之类的生命周期方法。

提交阶段通常会很快,但渲染过程可能很慢。因此,即将推出的 concurrent 模式 (默认情况下未启用) 将渲染工作分解为多个部分,对任务进行暂停和恢复操作以避免阻塞浏览器。这意味着 React 可以在提交之前多次调用渲染阶段生命周期的方法,或者在不提交的情况下调用它们(由于出现错误或更高优先级的任务使其中断)。

渲染阶段的生命周期包括以下 class 组件方法:

因为上述方法可能会被多次调用,所以不要在它们内部编写副作用相关的代码,这点非常重要。忽略此规则可能会导致各种问题的产生,包括内存泄漏和或出现无效的应用程序状态。不幸的是,这些问题很难被发现,因为它们通常具有非确定性。

严格模式不能自动检测到你的副作用,但它可以帮助你发现它们,使它们更具确定性。

通过故意重复调用以下函数来实现的该操作:

注意:

这仅适用于开发模式。生产模式下生命周期不会被调用两次。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文