React 中的渲染组件显示闪烁

【问题标题】：Rendering component in React shows flickerReact 中的渲染组件显示闪烁
【发布时间】：2021-09-24 05:23:49
【问题描述】：

谁能向我解释将 JSX 组件渲染为函数和标签之间的主要区别。获得的结果是相同的，但不知何故，如果我渲染像 <Display/> 这样的 JSX 组件会在屏幕上显示闪烁，但渲染像 {Display()} 这样的组件绝对可以正常工作。对于这两种情况，组件都会重新渲染。

注意：我在页面之间导航，每次我导航回屏幕时，我都会故意重新渲染它以更新前一个屏幕。

const App = ()=> {
  const Display = ()=>{
   console.log(" === Rendering display ===")
   return (
     <h1> Hello there.. </h1>
   )

  return(
  <div>
    <Display/>
    {Display()}
  </div>

}

【问题讨论】：

标签： reactjs rendering

【解决方案1】：

发生这种情况的原因是您正在从另一个组件（在本例中为 App）中定义您的组件 Display。

这是一种反模式，因为组件将在每次渲染其父组件时重新定义。

正确的方法是分别定义这些组件：

const Display = ()=> {
 console.log(" === Rendering display ===")
 return (
   <h1> Hello there.. </h1>
 );
}

const App = () => {
  return(
  <div>
    <Display/>
    {Display()}
  </div>
  )
}

关于这两种方法的区别，这里是摘自an article posted by Kent C. Dodds关于这个主题的一个总结：

React 不知道我们在 JSX 中调用函数和内联函数之间的区别。所以它不能将任何东西与 Counter 函数相关联，因为它没有像组件一样被渲染。

【讨论】：