React.memo与useMemo在私有组件场景下的使用差异

首先给出前提场景：现有一个接收render prop的Timeline组件，由它内部决定何时调用传入的渲染函数生成子树：

const Timeline = ({ renderDetails, ... }: { renderDetails: (rowData, sectionID, rowID) => React.Node }) => <div>{renderChildren(...)}</div>;

下面针对三种写法的实际渲染行为、缓存效果逐一说明，核心基于React本身的调和（Reconciliation）规则判断。

写法1：外部定义+React.memo包裹子组件 #

const MyComponent = React.memo(({ someProp }) => <someComponentHierarchyHere>...</someComponentHierarchyHere>);

const ParentComponent = ({ someProp }) => {
    const renderChildren = useCallback(() => <MyComponent someProp={someProp} />, [someProp]);

    return <Timeline renderChildren={renderChildren} />;
};

实际表现： #

• MyComponent定义在Parent组件外部，组件引用全局稳定，React.memo会给组件加上浅比较props的渲染跳过逻辑。
• useCallback保证只有someProp变化时，传给Timeline的renderChildren引用才会更新，避免Timeline因render prop变化触发不必要的重渲染。
• 当Timeline调用renderChildren生成子树时：
  • 如果someProp浅比较相等，React对比新旧JSX元素时，首先识别到元素type是稳定的MyComponent引用，随后memo逻辑判定props无变化，会直接跳过MyComponent及其所有子节点的重渲染，完全复用上一次的渲染结果。
  • 只有someProp确实变化时，MyComponent才会重新执行渲染。
• 这是三种写法里缓存效果最可靠、性能最优的标准实现。

写法2：组件内部用useMemo定义子组件 #

const ParentComponent = ({ someProp }) => {
    const MyComponent = useMemo(({ someProp }) => <someComponentHierarchyHere>...</someComponentHierarchyHere>);
    const renderChildren = useCallback((rowData, sectionID, rowID) => <MyComponent someProp={someProp} />, [someProp]);

    return <Timeline renderChildren={renderChildren} />;
};

实际表现： #

• 首先这段代码本身就有用法错误：useMemo没有传入依赖数组，每次Parent组件渲染都会重新执行回调生成全新的MyComponent引用，完全起不到缓存作用。就算补上空依赖数组固定MyComponent引用，这种写法依然存在本质问题。
• React调和规则里，判断两个元素是否为同一个组件实例的第一标准是type引用是否完全相等。在组件内部定义的组件，哪怕函数逻辑完全一致，只要引用变化，React就会判定这是完全不同的组件类型，直接卸载旧组件实例、重新挂载新实例——组件内部的所有状态会被清空，子树全量重渲染，没有任何记忆化效果。
• 额外问题：这段代码里useMemo的回调直接返回了JSX元素而非组件函数，本身就不符合组件的定义，属于错误用法。哪怕修正为返回组件函数，内部定义组件的模式也极易触发闭包陈旧问题，React官方也不推荐这种写法。

写法3：render函数内直接书写内联JSX #

const ParentComponent = ({ someProp }) => {
    const renderChildren = useCallback((rowData, sectionID, rowID) => <someComponentHierarchyHere>...</someComponentHierarchyHere>, [someProp]);

    return <Timeline renderChildren={renderChildren} />;
};

实际表现： #

• useCallback确实缓存了renderChildren的函数引用，只有someProp变化时才会生成新函数，这一层能避免Timeline因render prop引用变化触发的多余重渲染。
• 但useCallback的缓存仅针对函数本身，不会缓存函数执行返回的JSX结果。只要Timeline调用renderChildren，返回的内联JSX子树没有稳定的组件标识，也没有任何memo比较逻辑，React会对这部分子树全量执行调和流程，所有子节点都会默认参与重渲染，完全不会被缓存跳过。
• 很多人误以为用useCallback包裹render prop就完成了性能优化，实际上这只能优化父组件和Timeline之间的传参稳定性，对render prop返回的子树渲染没有任何缓存效果。

React渲染决策核心规则 #

• 元素复用判断优先级最高的规则是type字段对比：
  • 对于原生DOM标签（字符串type，如div），属性一致就复用DOM节点，仅更新变化属性。
  • 对于组件类型（函数/类type），必须是同一个引用，才会进入后续的props对比流程；如果type引用变化，直接执行旧组件卸载、新组件挂载全流程。
• 只有组件被React.memo（函数组件）、PureComponent/自定义shouldComponentUpdate（类组件）包裹时，才会在type引用稳定的前提下，浅比较props决定是否跳过组件及子树的重渲染；普通组件默认只要进入渲染流程就会执行render逻辑，不会自动跳过。
• useCallback、useMemo这类Hook仅用于缓存JavaScript层面的函数、值引用，不会自动给返回的JSX增加记忆化能力，不要把Hook本身的引用缓存和组件渲染缓存混为一谈。

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