【问题标题】:Why does a react component render twice?为什么一个 React 组件会渲染两次?
【发布时间】:2017-11-22 02:20:29
【问题描述】:

我已经在组件的渲染中放置了调试器,并且看到它有时会运行两次,如果不是大部分时间的话。是因为第一次渲染是在组件接收任何道具之前吗?第二次是什么时候收到?我以为组件会经历安装、接收道具、然后渲染的生活方式?还是挂载、渲染、检查道具,然后重新渲染?

【问题讨论】:

  • 没有代码我们只能猜测,我的猜测是您正在更改组件的状态触发重新渲染
  • 另一个猜测是你的shouldComponentUpdate 有缺陷

标签: javascript reactjs


【解决方案1】:

my previous question,我遇到了一个问题,我引用:

" ...我知道这些功能中的大多数(可能还有更多)都可以在函数组件中使用(大多数是通过钩子引入的),但是它们也不能像我想要的那样工作,因为它们并不完全相同,就像 useEffect(() => {code}, []) 被称为替换 componentDidMount() 一样,但在安装后,它会在我开发的任何应用程序中呈现两次, 传递虚假数据......“


对于那个问题,CertainPerformance 回复:

" ...听起来您启用了严格模式并且正在执行带有副作用的操作,应该避免这种情况。您可能只需要找出正确的方法来构造代码函数式组件——几乎所有你想做的事情都可以在函数式组件中相当优雅地完成,虽然不是绝对一切......"


这使我进行了一些研究并找到了这个有趣的答案:

这是 StrictMode 的一个有意的功能。这只发生在开发中,有助于发现渲染阶段的意外副作用。我们只对带有 Hook 的组件执行此操作,因为这些组件更有可能意外地在错误的位置产生副作用。

您可以在 GitHub 上阅读更多相关信息。

【讨论】:

    【解决方案2】:

    如果组件具有初始属性,则不会重新渲染。它会重新渲染的唯一原因是它是否在初始渲染之后接收道具,或者如果您正在更改状态。

    【讨论】:

    • 应该调用 shouldComponentUpdate 对吧?但是如果组件在初始挂载时渲染两次而不调用 shouldComponentUpdate 怎么办?
    猜你喜欢
    • 2020-11-22
    • 1970-01-01
    • 2021-10-21
    • 1970-01-01
    • 2020-09-07
    • 2023-01-24
    • 2020-01-03
    • 1970-01-01
    相关资源
    最近更新 更多