React中普通函数组件与使用useMemo创建的组件有什么区别？

首先要明确：你给出的第二种useMemo写法本身不符合React API规范，二者本质上完全不是一类东西，核心差异如下：

• 本质属性完全不同
  第一种const myComp = (props) => <h1>{props.text}</h1>是标准的React函数组件定义：它本身是合法的组件构造函数，React会将其识别为组件类型，在渲染时主动调用该函数、传入props，自动管理它的生命周期，当props变化、父组件重渲染、自身状态更新时，都会触发该组件的重渲染逻辑。
  你写的第二种const myComp = useMemo((props) => <h1>props.text</h1>)属于错误用法：useMemo的第一个入参要求是无参的计算函数，返回值是需要缓存的计算结果，第二个入参是依赖数组。你这种写法得到的myComp根本不是React可识别的组件，只是一个被缓存的普通函数，React不会自动为它传入props、也不会基于props变化触发更新。
• 就算修正为符合useMemo规范的用法，二者逻辑也完全不同
  假设你是想给组件加渲染缓存，正确的写法应该是：

  const MyComp = (props) => {
    return useMemo(() => <h1>{props.text}</h1>, [props.text])
  }
  

  这种场景下二者的差异是：普通函数组件只要满足重渲染触发条件（父组件重渲染、props变化、自身状态更新）就会执行整个函数体、重新计算JSX；而加了useMemo包裹渲染结果的写法，只有当依赖数组里的props.text发生变化时，才会重新计算返回的JSX，否则会直接复用之前的缓存结果，跳过JSX计算步骤，仅用于性能优化场景。
• 更新触发逻辑完全不同
  普通函数组件的重渲染由React调度器统一管控，符合React的生命周期规则。而useMemo的缓存失效仅和它的依赖数组有关，如果你漏写依赖，即使props变化，缓存内容也不会更新，很容易出现闭包陷阱问题。
  另外如果有人错误地把整个组件定义包裹在useMemo里，比如const MyComp = useMemo(() => (props) => <h1>{props.text}</h1>, [])，会导致组件定义被永久缓存，内部永远捕获首次渲染的闭包变量，完全无法响应后续的props和状态变化，属于严重的错误用法。

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