React createElement 与 cloneElement 深度解析：掌握元素创建与克隆的核心差异

一、createElement 与 cloneElement 概览

1.1 两个 API 的定位

React 提供了两个用于操作元素的顶层 API: createElement 与 cloneElement。前者负责从无到有创建一个 React 元素,是 JSX 语法编译后的底层实现;后者负责以一个已存在的 React 元素为蓝本,克隆出带有新 props 的新元素。理解两者的差异,是掌握 React 元素模型、编写高阶组件与复合组件的基础。

1.2 元素的本质

在 React 中,元素(Element)是一个普通对象,描述了 DOM 节点或组件在某一时刻的样貌。它包含 type、props、key、ref 等字段。createElement 与 cloneElement 都返回这样的元素对象,但创建路径截然不同。

1.3 速览对比

| 维度 | createElement | cloneElement |

| — | — | — |

| 输入 | type 字符串或组件 | 已存在的 React 元素 |

| 输出 | 全新元素 | 克隆元素(带新 props) |

| Props | 完全由调用方提供 | 合并原始 props 与新 props |

| 子元素 | 完全由调用方提供 | 默认保留原始子元素 |

| 典型场景 | JSX 编译、动态组件 | 注入 props、修改子元素 |

二、createElement 详解

2.1 API 签名

React.createElement(type, [props], […children])

type: 元素类型, 可以是标签字符串(如 "div")、React 组件(函数或类)、React Fragment 等。

props: 可选的对象, 包含属性与事件。

children: 可选的零到多个子节点, 会自动拼接到 props.children。

2.2 工作原理

createElement 会做三件事: 合并默认 props 与传入 props、提取并校验 key/ref、收集 children。最终返回一个冻结的 React 元素对象。

#publish-mermaid-1785728831601-0{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#publish-mermaid-1785728831601-0 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#publish-mermaid-1785728831601-0 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#publish-mermaid-1785728831601-0 .error-icon{fill:#552222;}#publish-mermaid-1785728831601-0 .error-text{fill:#552222;stroke:#552222;}#publish-mermaid-1785728831601-0 .edge-thickness-normal{stroke-width:1px;}#publish-mermaid-1785728831601-0 .edge-thickness-thick{stroke-width:3.5px;}#publish-mermaid-1785728831601-0 .edge-pattern-solid{stroke-dasharray:0;}#publish-mermaid-1785728831601-0 .edge-thickness-invisible{stroke-width:0;fill:none;}#publish-mermaid-1785728831601-0 .edge-pattern-dashed{stroke-dasharray:3;}#publish-mermaid-1785728831601-0 .edge-pattern-dotted{stroke-dasharray:2;}#publish-mermaid-1785728831601-0 .marker{fill:#333333;stroke:#333333;}#publish-mermaid-1785728831601-0 .marker.cross{stroke:#333333;}#publish-mermaid-1785728831601-0 svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#publish-mermaid-1785728831601-0 p{margin:0;}#publish-mermaid-1785728831601-0 .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#publish-mermaid-1785728831601-0 .cluster-label text{fill:#333;}#publish-mermaid-1785728831601-0 .cluster-label span{color:#333;}#publish-mermaid-1785728831601-0 .cluster-label span p{background-color:transparent;}#publish-mermaid-1785728831601-0 .label text,#publish-mermaid-1785728831601-0 span{fill:#333;color:#333;}#publish-mermaid-1785728831601-0 .node rect,#publish-mermaid-1785728831601-0 .node circle,#publish-mermaid-1785728831601-0 .node ellipse,#publish-mermaid-1785728831601-0 .node polygon,#publish-mermaid-1785728831601-0 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#publish-mermaid-1785728831601-0 .rough-node .label text,#publish-mermaid-1785728831601-0 .node .label text,#publish-mermaid-1785728831601-0 .image-shape .label,#publish-mermaid-1785728831601-0 .icon-shape .label{text-anchor:middle;}#publish-mermaid-1785728831601-0 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#publish-mermaid-1785728831601-0 .rough-node .label,#publish-mermaid-1785728831601-0 .node .label,#publish-mermaid-1785728831601-0 .image-shape .label,#publish-mermaid-1785728831601-0 .icon-shape .label{text-align:center;}#publish-mermaid-1785728831601-0 .node.clickable{cursor:pointer;}#publish-mermaid-1785728831601-0 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#publish-mermaid-1785728831601-0 .arrowheadPath{fill:#333333;}#publish-mermaid-1785728831601-0 .edgePath .path{stroke:#333333;stroke-width:1px;}#publish-mermaid-1785728831601-0 .flowchart-link{stroke:#333333;fill:none;}#publish-mermaid-1785728831601-0 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#publish-mermaid-1785728831601-0 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#publish-mermaid-1785728831601-0 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#publish-mermaid-1785728831601-0 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#publish-mermaid-1785728831601-0 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#publish-mermaid-1785728831601-0 .cluster text{fill:#333;}#publish-mermaid-1785728831601-0 .cluster span{color:#333;}#publish-mermaid-1785728831601-0 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#publish-mermaid-1785728831601-0 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#publish-mermaid-1785728831601-0 rect.text{fill:none;stroke-width:0;}#publish-mermaid-1785728831601-0 .icon-shape,#publish-mermaid-1785728831601-0 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#publish-mermaid-1785728831601-0 .icon-shape p,#publish-mermaid-1785728831601-0 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#publish-mermaid-1785728831601-0 .icon-shape .label rect,#publish-mermaid-1785728831601-0 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#publish-mermaid-1785728831601-0 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#publish-mermaid-1785728831601-0 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#publish-mermaid-1785728831601-0 .node .neo-node{stroke:#9370DB;}#publish-mermaid-1785728831601-0 [data-look=\”neo\”].node rect,#publish-mermaid-1785728831601-0 [data-look=\”neo\”].cluster rect,#publish-mermaid-1785728831601-0 [data-look=\”neo\”].node polygon{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785728831601-0 [data-look=\”neo\”].swimlane.cluster rect{filter:none;}#publish-mermaid-1785728831601-0 [data-look=\”neo\”].node path{stroke:#9370DB;stroke-width:1px;}#publish-mermaid-1785728831601-0 [data-look=\”neo\”].node .outer-path{filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785728831601-0 [data-look=\”neo\”].node .neo-line path{stroke:#9370DB;filter:none;}#publish-mermaid-1785728831601-0 [data-look=\”neo\”].node circle{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785728831601-0 [data-look=\”neo\”].node circle .state-start{fill:#000000;}#publish-mermaid-1785728831601-0 [data-look=\”neo\”].icon-shape .icon{fill:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785728831601-0 [data-look=\”neo\”].icon-shape .icon-neo path{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785728831601-0 :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}否是

调用 createElement(type, props, children)

type 是否合法

抛出错误

合并 defaultProps 与传入 props

提取 key 与 ref, 不放入 props

收集 children 到 props.children

typeof 标记为 REACT_ELEMENT_TYPE

返回冻结的元素对象

2.3 与 JSX 的关系

JSX 会被 Babel 编译为 createElement 调用。下面两段代码等价:

const el = <Button type="primary" onClick={handler}>Submit</Button>;
// 等价于
const el = React.createElement(Button, { type: "primary", onClick: handler }, "Submit");

2.4 使用场景

createElement 常用于以下场景:

2.5 代码示例

import React from "react";

function DynamicRenderer({ component, …rest }) {
return React.createElement(component, rest);
}

function App() {
return React.createElement(
"div",
{ className: "wrapper" },
React.createElement("h1", null, "Title"),
React.createElement(DynamicRenderer, { component: "p", children: "Hello" })
);
}

三、cloneElement 详解

3.1 API 签名

React.cloneElement(element, [props], […children])

element: 要克隆的 React 元素。

props: 将与原始元素的 props 浅合并, 新值覆盖旧值。

children: 若提供, 则替换原始子元素; 若不提供, 则保留原始子元素。

3.2 工作原理

cloneElement 以原始元素的 type 为基础, 复制其 props, 再用新 props 覆盖, 保留原始 key 与 ref(可被新 props 覆盖), 并决定是否替换 children。

#publish-mermaid-1785728831728-1{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#publish-mermaid-1785728831728-1 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#publish-mermaid-1785728831728-1 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#publish-mermaid-1785728831728-1 .error-icon{fill:#552222;}#publish-mermaid-1785728831728-1 .error-text{fill:#552222;stroke:#552222;}#publish-mermaid-1785728831728-1 .edge-thickness-normal{stroke-width:1px;}#publish-mermaid-1785728831728-1 .edge-thickness-thick{stroke-width:3.5px;}#publish-mermaid-1785728831728-1 .edge-pattern-solid{stroke-dasharray:0;}#publish-mermaid-1785728831728-1 .edge-thickness-invisible{stroke-width:0;fill:none;}#publish-mermaid-1785728831728-1 .edge-pattern-dashed{stroke-dasharray:3;}#publish-mermaid-1785728831728-1 .edge-pattern-dotted{stroke-dasharray:2;}#publish-mermaid-1785728831728-1 .marker{fill:#333333;stroke:#333333;}#publish-mermaid-1785728831728-1 .marker.cross{stroke:#333333;}#publish-mermaid-1785728831728-1 svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#publish-mermaid-1785728831728-1 p{margin:0;}#publish-mermaid-1785728831728-1 .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#publish-mermaid-1785728831728-1 .cluster-label text{fill:#333;}#publish-mermaid-1785728831728-1 .cluster-label span{color:#333;}#publish-mermaid-1785728831728-1 .cluster-label span p{background-color:transparent;}#publish-mermaid-1785728831728-1 .label text,#publish-mermaid-1785728831728-1 span{fill:#333;color:#333;}#publish-mermaid-1785728831728-1 .node rect,#publish-mermaid-1785728831728-1 .node circle,#publish-mermaid-1785728831728-1 .node ellipse,#publish-mermaid-1785728831728-1 .node polygon,#publish-mermaid-1785728831728-1 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#publish-mermaid-1785728831728-1 .rough-node .label text,#publish-mermaid-1785728831728-1 .node .label text,#publish-mermaid-1785728831728-1 .image-shape .label,#publish-mermaid-1785728831728-1 .icon-shape .label{text-anchor:middle;}#publish-mermaid-1785728831728-1 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#publish-mermaid-1785728831728-1 .rough-node .label,#publish-mermaid-1785728831728-1 .node .label,#publish-mermaid-1785728831728-1 .image-shape .label,#publish-mermaid-1785728831728-1 .icon-shape .label{text-align:center;}#publish-mermaid-1785728831728-1 .node.clickable{cursor:pointer;}#publish-mermaid-1785728831728-1 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#publish-mermaid-1785728831728-1 .arrowheadPath{fill:#333333;}#publish-mermaid-1785728831728-1 .edgePath .path{stroke:#333333;stroke-width:1px;}#publish-mermaid-1785728831728-1 .flowchart-link{stroke:#333333;fill:none;}#publish-mermaid-1785728831728-1 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#publish-mermaid-1785728831728-1 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#publish-mermaid-1785728831728-1 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#publish-mermaid-1785728831728-1 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#publish-mermaid-1785728831728-1 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#publish-mermaid-1785728831728-1 .cluster text{fill:#333;}#publish-mermaid-1785728831728-1 .cluster span{color:#333;}#publish-mermaid-1785728831728-1 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#publish-mermaid-1785728831728-1 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#publish-mermaid-1785728831728-1 rect.text{fill:none;stroke-width:0;}#publish-mermaid-1785728831728-1 .icon-shape,#publish-mermaid-1785728831728-1 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#publish-mermaid-1785728831728-1 .icon-shape p,#publish-mermaid-1785728831728-1 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#publish-mermaid-1785728831728-1 .icon-shape .label rect,#publish-mermaid-1785728831728-1 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#publish-mermaid-1785728831728-1 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#publish-mermaid-1785728831728-1 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#publish-mermaid-1785728831728-1 .node .neo-node{stroke:#9370DB;}#publish-mermaid-1785728831728-1 [data-look=\”neo\”].node rect,#publish-mermaid-1785728831728-1 [data-look=\”neo\”].cluster rect,#publish-mermaid-1785728831728-1 [data-look=\”neo\”].node polygon{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785728831728-1 [data-look=\”neo\”].swimlane.cluster rect{filter:none;}#publish-mermaid-1785728831728-1 [data-look=\”neo\”].node path{stroke:#9370DB;stroke-width:1px;}#publish-mermaid-1785728831728-1 [data-look=\”neo\”].node .outer-path{filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785728831728-1 [data-look=\”neo\”].node .neo-line path{stroke:#9370DB;filter:none;}#publish-mermaid-1785728831728-1 [data-look=\”neo\”].node circle{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785728831728-1 [data-look=\”neo\”].node circle .state-start{fill:#000000;}#publish-mermaid-1785728831728-1 [data-look=\”neo\”].icon-shape .icon{fill:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785728831728-1 [data-look=\”neo\”].icon-shape .icon-neo path{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785728831728-1 :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}是否

调用 cloneElement(element, newProps, newChildren)

读取原始 element 的 type/key/ref/props

浅拷贝原始 props

用 newProps 覆盖同名属性

是否传入 newChildren

用 newChildren 替换 props.children

保留原始 props.children

newProps 中提取 key/ref(若有)

调用 createElement 重新生成元素

返回新元素, 原元素不变

3.3 不可变性的体现

React 元素是不可变的。cloneElement 不会修改原元素, 而是返回一个新的元素对象。这一点与 React 的整体不可变数据哲学一致。

3.4 使用场景

cloneElement 主要用于以下场景:

3.5 代码示例

import React from "react";

function RadioGroup({ name, children }) {
return (
<div className="radio-group">
{React.Children.map(children, (child) =>
React.cloneElement(child, { name })
)}
</div>
);
}

function App() {
return (
<RadioGroup name="lang">
<input type="radio" value="js" />
<input type="radio" value="ts" />
</RadioGroup>
);
}

四、核心区别对比

4.1 创建路径差异

createElement 从 type 出发, 所有 props 由调用方显式提供, 是一张白纸。cloneElement 从已有元素出发, 继承原始 props, 是增量修改。

4.2 Props 处理差异

createElement: 完全覆盖式, props 字段就是最终字段。

cloneElement: 浅合并式, newProps 覆盖原始同名字段, 其余字段保留。

#publish-mermaid-1785728831919-2{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#publish-mermaid-1785728831919-2 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#publish-mermaid-1785728831919-2 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#publish-mermaid-1785728831919-2 .error-icon{fill:#552222;}#publish-mermaid-1785728831919-2 .error-text{fill:#552222;stroke:#552222;}#publish-mermaid-1785728831919-2 .edge-thickness-normal{stroke-width:1px;}#publish-mermaid-1785728831919-2 .edge-thickness-thick{stroke-width:3.5px;}#publish-mermaid-1785728831919-2 .edge-pattern-solid{stroke-dasharray:0;}#publish-mermaid-1785728831919-2 .edge-thickness-invisible{stroke-width:0;fill:none;}#publish-mermaid-1785728831919-2 .edge-pattern-dashed{stroke-dasharray:3;}#publish-mermaid-1785728831919-2 .edge-pattern-dotted{stroke-dasharray:2;}#publish-mermaid-1785728831919-2 .marker{fill:#333333;stroke:#333333;}#publish-mermaid-1785728831919-2 .marker.cross{stroke:#333333;}#publish-mermaid-1785728831919-2 svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#publish-mermaid-1785728831919-2 p{margin:0;}#publish-mermaid-1785728831919-2 .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#publish-mermaid-1785728831919-2 .cluster-label text{fill:#333;}#publish-mermaid-1785728831919-2 .cluster-label span{color:#333;}#publish-mermaid-1785728831919-2 .cluster-label span p{background-color:transparent;}#publish-mermaid-1785728831919-2 .label text,#publish-mermaid-1785728831919-2 span{fill:#333;color:#333;}#publish-mermaid-1785728831919-2 .node rect,#publish-mermaid-1785728831919-2 .node circle,#publish-mermaid-1785728831919-2 .node ellipse,#publish-mermaid-1785728831919-2 .node polygon,#publish-mermaid-1785728831919-2 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#publish-mermaid-1785728831919-2 .rough-node .label text,#publish-mermaid-1785728831919-2 .node .label text,#publish-mermaid-1785728831919-2 .image-shape .label,#publish-mermaid-1785728831919-2 .icon-shape .label{text-anchor:middle;}#publish-mermaid-1785728831919-2 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#publish-mermaid-1785728831919-2 .rough-node .label,#publish-mermaid-1785728831919-2 .node .label,#publish-mermaid-1785728831919-2 .image-shape .label,#publish-mermaid-1785728831919-2 .icon-shape .label{text-align:center;}#publish-mermaid-1785728831919-2 .node.clickable{cursor:pointer;}#publish-mermaid-1785728831919-2 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#publish-mermaid-1785728831919-2 .arrowheadPath{fill:#333333;}#publish-mermaid-1785728831919-2 .edgePath .path{stroke:#333333;stroke-width:1px;}#publish-mermaid-1785728831919-2 .flowchart-link{stroke:#333333;fill:none;}#publish-mermaid-1785728831919-2 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#publish-mermaid-1785728831919-2 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#publish-mermaid-1785728831919-2 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#publish-mermaid-1785728831919-2 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#publish-mermaid-1785728831919-2 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#publish-mermaid-1785728831919-2 .cluster text{fill:#333;}#publish-mermaid-1785728831919-2 .cluster span{color:#333;}#publish-mermaid-1785728831919-2 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#publish-mermaid-1785728831919-2 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#publish-mermaid-1785728831919-2 rect.text{fill:none;stroke-width:0;}#publish-mermaid-1785728831919-2 .icon-shape,#publish-mermaid-1785728831919-2 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#publish-mermaid-1785728831919-2 .icon-shape p,#publish-mermaid-1785728831919-2 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#publish-mermaid-1785728831919-2 .icon-shape .label rect,#publish-mermaid-1785728831919-2 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#publish-mermaid-1785728831919-2 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#publish-mermaid-1785728831919-2 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#publish-mermaid-1785728831919-2 .node .neo-node{stroke:#9370DB;}#publish-mermaid-1785728831919-2 [data-look=\”neo\”].node rect,#publish-mermaid-1785728831919-2 [data-look=\”neo\”].cluster rect,#publish-mermaid-1785728831919-2 [data-look=\”neo\”].node polygon{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785728831919-2 [data-look=\”neo\”].swimlane.cluster rect{filter:none;}#publish-mermaid-1785728831919-2 [data-look=\”neo\”].node path{stroke:#9370DB;stroke-width:1px;}#publish-mermaid-1785728831919-2 [data-look=\”neo\”].node .outer-path{filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785728831919-2 [data-look=\”neo\”].node .neo-line path{stroke:#9370DB;filter:none;}#publish-mermaid-1785728831919-2 [data-look=\”neo\”].node circle{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785728831919-2 [data-look=\”neo\”].node circle .state-start{fill:#000000;}#publish-mermaid-1785728831919-2 [data-look=\”neo\”].icon-shape .icon{fill:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785728831919-2 [data-look=\”neo\”].icon-shape .icon-neo path{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785728831919-2 :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}cloneElement

原元素

原 props(拷贝)

合并 newProps

克隆元素

createElement

type

props(全量)

新元素

4.3 Children 处理差异

createElement: children 必须由调用方提供, 否则为 undefined。

cloneElement: 若不传 children 参数, 则保留原始 children; 若传, 则完全替换。

4.4 Key 与 Ref 处理差异

createElement: key 与 ref 来自传入的 props 参数, 会被特殊提取。

cloneElement: 默认保留原元素的 key 与 ref; 若 newProps 中提供 key 或 ref, 则覆盖。

4.5 性能与开销

两者最终都生成新的元素对象, 开销相近。但 cloneElement 多一步浅拷贝与合并, 在大量克隆时需注意避免在 render 中重复克隆同一元素造成无谓开销。

五、实战案例

5.1 复合组件: cloneElement 注入 props

import React, { Children, cloneElement, useState } from "react";

function Tabs({ children }) {
const [active, setActive] = useState(0);
return (
<div>
<div className="tab-bar">
{Children.map(children, (child, index) =>
cloneElement(child, {
active: index === active,
onClick: () => setActive(index)
})
)}
</div>
</div>
);
}

function Tab({ active, onClick, children }) {
return (
<button onClick={onClick} style={{ fontWeight: active ? "bold" : "normal" }}>
{children}
</button>
);
}

function App() {
return (
<Tabs>
<Tab>One</Tab>
<Tab>Two</Tab>
<Tab>Three</Tab>
</Tabs>
);
}

5.2 动态组件: createElement 运行时构造

import React, { createElement } from "react";

const components = {
primary: "button",
link: "a",
div: "div"
};

function Polymorphic({ as = "div", …rest }) {
return createElement(components[as] || as, rest);
}

5.3 高阶组件中的选择

高阶组件通常用 createElement 包裹被传入组件, 而非 cloneElement, 因为高阶组件往往要重新组织渲染结构而非修改原元素。若只是注入 props, cloneElement 也适用, 但要注意 ref 转发问题。

六、常见误区与最佳实践

6.1 误区: cloneElement 会修改原元素

cloneElement 返回新元素, 原元素保持不变。若发现原元素被改动, 多半是其他副作用导致。

6.2 误区: 用 cloneElement 改 type

cloneElement 不直接支持改 type, 但可以通过 element.type 读取后用 createElement 重建。强行改 type 可能破坏 React 内部一致性。

6.3 最佳实践

七、总结

createElement 与 cloneElement 是 React 元素模型的两块基石。前者负责"造", 从 type 出发全量构建; 后者负责"改", 从已有元素出发增量合并。掌握 createElement 有助于理解 JSX 本质与动态渲染; 掌握 cloneElement 有助于编写复合组件与 props 注入逻辑。两者配合使用, 能覆盖绝大多数元素操作需求。在实际开发中, 遵循"创建用 createElement、增强用 cloneElement"的原则, 即可写出清晰、可维护的 React 代码。