问答

在componentDidMount中直接调用setState,用户不会看到中间状态

作者:admin 2021-06-29 我要评论

React官方文档中提到 https://zh-hans.reactjs.org/d... 你可以在 componentDidMount() 里 直接调用 setState() 。它将触发额外渲染,但此渲染会发生在浏览器更...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

React官方文档中提到 https://zh-hans.reactjs.org/d...

你可以在 componentDidMount()直接调用 setState()。它将触发额外渲染,但此渲染会发生在浏览器更新屏幕之前。如此保证了即使在 render() 两次调用的情况下,用户也不会看到中间状态。请谨慎使用该模式,因为它会导致性能问题。通常,你应该在 constructor() 中初始化 state。如果你的渲染依赖于 DOM 节点的大小或位置,比如实现 modals 和 tooltips 等情况下,你可以使用此方式处理

个人理解,在componentDidMount阶段,dom节点不是已经渲染过一次么? 再次调用setState触发再次渲染,dom节点更新。无论如何,是二次更新了。为什么用户看不到中间状态呢? 是有什么特殊机制么? 二次渲染发生在浏览器更新屏幕之前,难道第一次没有更新屏幕么?

###

感觉指渲染了,只是过程肉眼看不见,可能在机器性能跟不上的时候,能有明显感觉

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 在componentDidMount中直接调用setStat

    在componentDidMount中直接调用setStat

  • api 免费管理工具

    api 免费管理工具

  • npm run build 生产环境中,部分页面空

    npm run build 生产环境中,部分页面空

  • Vue 懒加载问题

    Vue 懒加载问题

腾讯云代理商
海外云服务器