¿Cuál es la diferencia entre createElement y cloneElement?

Método React.createElement(): El método React.createElement() se utiliza para crear elementos. Cada vez que escribimos código en JSX, JSX lo convierte en React.createElement(). No se recomienda usar el método createElement ya que es muy difícil de mantener o depurar. Tenemos que llamar al método React.createElement() cada vez para la creación de un elemento React, incluso si es solo una etiqueta de intervalo sin atributos.

Sintaxis: 

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

Ejemplo: En este ejemplo, hemos creado un elemento div usando el método React.createElement().

import React from 'react';
import "./styles.css";
const title = React.createElement('h1', 
    {className:'title'}, 'GeeksforGeeks');
const App =()=>
  React.createElement('div', {}, [
    React.createElement('button',{className:'btn'}, title),
    React.createElement('button', {className:'btn'}, title),
]);
  
export default App;

Producción:

crearElemento()

Método React.cloneElement(): El método React.cloneElement() se utiliza cuando un componente principal desea agregar o modificar los accesorios de sus elementos secundarios. La función React.cloneElement() crea un clon de un elemento dado, y también podemos pasar accesorios y elementos secundarios a la función.

Sintaxis:

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

Ejemplo: En este ejemplo, hemos usado cloneElement para transmitir los accesorios.

import React from 'react';
import Button from './Button';
import './styles.css';
const App = () => {
    return (
        <Parent>
            <Button />
            <br /><br />
            <Button />
        </Parent>
    )
}
  
const Parent = (props) => {
    let btn = 'GeeksforGeeks';
    return (
        <div>
            {React.Children.map(props.children,
                child => {
                    return React.cloneElement(child,
                        { btn }, null); 
                    // third parameter is null
                    // Because we are not adding
                    // any children
                })}
        </div>
    )
}
  
export default App;

import React from 'react';
const Button=(props)=> {
    return (
        <button>
            {props.btn }
        </button>
    )
}
  
export default Button;

Producción: