直接调用函数渲染JSX的写法是否会影响应用性能？

你观察到的console.log("testing")重复打印是这类写法的必然表现：你写的Test只是类里的一个普通方法，直接在render里调用它的话，它就是render执行流程里的一段同步代码，完全不具备React独立组件的渲染调度、重渲染优化能力。

为什么日志会重复打印 #

• 只要父组件触发重渲染——不管是自身state更新、接收的props变化、还是订阅的context变动——render函数就会完整重新执行，map遍历里的this.Test()会被挨个同步跑一遍，函数里的打印语句自然会跟着每次render重复输出，哪怕Test里判断用的condition值根本没变过。
• 要是你把Test写成标准React组件用<Test />的形式调用，只要组件props没变化、自身也没触发状态更新，配合React.memo或者PureComponent是可以跳过不必要的重渲染的，但直接调用函数的写法完全绕开了这层优化机制。

大量使用这种写法的性能影响 #

不是说这种写法完全不能用：如果Test内部逻辑极简单、返回的JSX结构很轻，少量用几乎感知不到性能差异。但如果应用里大规模用这种写法，尤其是Test内部包含复杂计算、嵌套大量子节点、绑定了较重的逻辑时，很容易出现性能问题：

• 父组件任意不相关的状态更新，都会触发所有这类直接调用的函数重新执行，生成新的JSX节点，平白增加很多不必要的计算开销
• 每次函数执行返回的都是全新的JSX引用，React做虚拟DOM diff的时候没法命中节点复用优化，会拉长diff计算的时间，场景极端一点就会导致页面掉帧、交互响应卡顿
• 要是函数内部不小心写了副作用逻辑（比如事件注册、数据请求，哪怕是你加的console.log），还会因为函数重复执行出现意料之外的逻辑bug，已经不只是性能问题了

更稳妥的写法 #

把Test抽成独立的React组件，用标准组件形式渲染：

// 抽成独立组件
const Test = ({ condition }) => {
  if (condition) {
    return <Text>Coming Soon</Text>
  }
  return null
}

render() {
  return (
    <View>
      {[1,2,3,4].map(item => (
        // 遍历渲染记得加唯一key
        <Test key={item} condition={/* 传入对应判断条件 */} />
      ))}
    </View>
  )
}

如果就是想用函数调用的形式（比如写非常简单的内联渲染逻辑），可以把函数里依赖的复杂计算结果做缓存，函数组件用useMemo、类组件可以用memoize-one这类工具缓存结果，避免重复执行重逻辑。

小提示：别靠console.log判断渲染次数，开发环境下React本身有额外的重渲染检测逻辑，打印的重复次数会比生产环境多，真要排查性能问题最好用React DevTools的Profiler面板看实际渲染耗时。

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