React函数组件两种局部渲染方式的差异与最优方案咨询

function myMainComponent() {

  const MyUIA = () => {
    // some calculations about attrs
    return (<div><ComponentA {...attrs}></div>)
  }

  const MyUIB = () => {
    // some calculations about attrs
    return (<div><ComponentA {...attrs}></div>)
  }

  // Way A
  /*
  return (
  <div>
    <MyUIA/>
    <MyUIB/>
  </div>);
  */

  // Way B
  return (
  <div>
    {MyUIA()}
    {MyUIB()}
  </div>);
}

1. 为何WayB性能更优且无闪烁？ #

WayA的核心问题是：MyUIA、MyUIB被定义在myMainComponent内部，每次主组件渲染时，都会重新创建这两个全新的组件函数。React判断组件是否可复用的依据是组件类型（函数引用）和key，每次渲染的MyUIA都是不同的函数，React会判定这是完全新的组件，进而卸载旧组件实例、重新挂载新实例——这个卸载再重建的过程就会引发闪烁，同时额外消耗DOM操作的性能。

而WayB是直接调用普通函数，本质只是把一段JSX逻辑拆分到函数里执行，返回的JSX会直接作为主组件的一部分渲染，不会创建独立的组件实例。React会将这部分JSX视为主组件的内部DOM结构，只做常规的diff更新，不会触发卸载重建，因此没有闪烁问题，性能更优。

2. 在同一函数组件中渲染局部内容的最优方式是什么？ #

分两种场景选择：

• 如果局部内容不需要独立状态、hooks，也不需要复用给其他组件：用WayB这种「提取渲染函数」的方式，既拆分了复杂逻辑保持代码整洁，又不会产生组件重建的性能损耗。
• 如果局部内容需要独立状态、hooks，或者要复用给其他组件：把MyUIA、MyUIB移到myMainComponent外部，作为独立的子组件。这样主组件渲染时，子组件的类型不会变化，React可以正常复用实例，同时子组件也能拥有自己的独立逻辑。

3. React中WayA和WayB是否有特定名称？ #

React官方没有你提到的“原生方法调用渲染”“JSX方法调用渲染”这类命名，常用的标准表述是：

• WayA：组件式渲染（Component Rendering），通过JSX组件标签的方式渲染独立组件实例。
• WayB：渲染函数调用（Render Function Invocation），本质是调用返回JSX的普通函数，属于内联渲染的一种。

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