React中JSX组件标签与函数调用渲染的差异及闪烁问题

核心区别 #

• 标签渲染<Display/>：React会将其识别为独立组件，为其分配单独的Fiber节点，走完整的组件生命周期流程。React的Diff算法中会通过组件的引用判断是否为同类型组件，如果引用变化会直接卸载旧实例、挂载新实例，对应DOM也会销毁重建。
• 直接调用{Display()}：本质是执行普通函数，返回的JSX会直接合并到父组件的渲染结果中，没有独立的Fiber节点和生命周期。React只会对最终返回的DOM节点做Diff，内容相同就不会触发DOM销毁重建。

你遇到闪烁的原因 #

你的Display组件定义在App组件内部，每次App重渲染（你切页后主动触发重渲染时），都会生成一个新的Display函数引用。使用标签渲染时，React会判定为组件类型变化，走卸载再挂载的流程，DOM销毁重建的过程就会产生视觉闪烁。而直接调用的方式没有独立组件实例的判断逻辑，仅Diff返回的<h1>节点，内容无变化就不会操作DOM，所以不会闪烁。

修复方案和注意事项 #

不要在组件内部定义其他组件，将Display移到App外部，标签渲染的闪烁问题就会消失：

// 移到App外部定义，函数引用不会随App重渲染变化
const Display = ()=>{
  console.log(" === Rendering display ===")
  return (
    <h1> Hello there.. </h1>
  )
}

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

另外不推荐长期使用直接调用组件的写法：如果组件内部用到useState、useEffect等Hook，直接调用时这些Hook会被绑定到父组件上，极易出现Hook调用顺序异常、状态污染等问题。

内容的提问来源于stack exchange，提问作者Amar