React createElement 和 cloneElement 有什么区别

Question

关键词：createElement cloneElement

createElement 和 cloneElement 有什么区别？

React 中的 createElement 和 cloneElement 都可以用来创建元素，但它们用法有所不同。

createElement 用于在 React 中动态地创建一个新的元素，并返回一个 React 元素对象。它的用法如下：

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

其中， type 是指要创建的元素的类型，可以是一个 HTML 标签名（如 div 、 span 等），也可以是一个 React 组件类（如自定义的组件）， props 是一个包含该元素需要设置的属性信息的对象， children 是一个包含其子元素的数组。 createElement 会以这些参数为基础创建并返回一个 React 元素对象，React 将使用它来构建真正的 DOM 元素。

cloneElement 用于复制一个已有的元素，并返回一个新的 React 元素，同时可以修改它的一些属性。它的用法如下：

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

其中， element 是指要复制的 React 元素对象， props 是一个包含需要覆盖或添加的属性的对象， children 是一个包含其修改后的子元素的数组。 cloneElement 会以这些参数为基础复制该元素，并返回一个新的 React 元素对象。

在实际使用中， createElement 通常用于创建新的元素（如动态生成列表），而 cloneElement 更适用于用于修改已有的元素，例如在一个组件内部使用 cloneElement 来修改传递进来的子组件的属性。

cloneElement 有哪些应用场景

React 中的 cloneElement 主要适用于以下场景：

修改 props

cloneElement 可以用于复制一个已有的元素并覆盖或添加一些新的属性。例如，可以复制一个带有默认属性的组件并传递新的属性，达到修改属性的目的。

// 假设有这样一个组件
function MyComponent(props) {
  // ...
}

// 在另一个组件中使用 cloneElement 修改 MyComponent 的 props
function AnotherComponent() {
  return React.cloneElement(<MyComponent />, { color: 'red' });
}

渲染列表

在渲染列表时，可以使用 Array.map() 生成一系列的元素数组，也可以使用 React.Children.map() 遍历子元素并返回一系列的元素数组，同时使用 cloneElement 复制元素并传入新的 key 和 props。

// 使用 Children.map() 遍历子元素并复制元素
function MyList({ children, color }) {
  return (
    <ul>
      {React.Children.map(children, (child, index) =>
        React.cloneElement(child, { key: index, color })
      )}
    </ul>
  );
}

// 在组件中使用 MyList 渲染列表元素
function MyPage() {
  return (
    <MyList color="red">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </MyList>
  );
}

修改子元素

使用 cloneElement 也可以在一个组件内部修改传递进来的子组件的属性，例如修改按钮的样式。

function ButtonGroup({ children, style }) {
  return (
    <div style={style}>
      {React.Children.map(children, (child) =>
        React.cloneElement(child, { style: { color: 'red' } })
      )}
    </div>
  );
}

function MyPage() {
  return (
    <ButtonGroup style={{ display: 'flex' }}>
      <button>Save</button>
      <button>Cancel</button>
    </ButtonGroup>
  );
}

总之， cloneElement 可以方便地复制已有的 React 元素并修改其属性，适用于许多场景，例如修改 props、渲染列表和修改子元素等。