React.createElement的理解使用

React.createElement()： 根据指定的第一个参数创建一个React元素。

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

第一个参数是必填，传入的是似HTML标签名称，eg: ul, li
第二个参数是选填，表示的是属性，eg: className
第三个参数是选填, 子节点，eg: 要显示的文本内容

看如下demo:

写法一：

var child1 = React.createElement('li', null, 'one');
    var child2 = React.createElement('li', null, 'two');
    var content = React.createElement('ul', { className: 'teststyle' }, child1, child2); // 第三个参数可以分开也可以写成一个数组
      ReactDOM.render(
          content,
        document.getElementById('example')
      );

写法二：

var child1 = React.createElement('li', null, 'one');
    var child2 = React.createElement('li', null, 'two');
    var content = React.createElement('ul', { className: 'teststyle' }, [child1, child2]);
      ReactDOM.render(
          content,
        document.getElementById('example')
      );

在我们应用JSX进行开发的时候，其实它最终会转化成React.createElement…去创建元素。
下面就通过一个官网上的DEMO来实际的理解一下：

//JSX写法：

class Hello extends React.Component {
    render() {
        return <div>Hello, { this.props.toWhat }</div>
    }
}

ReactDOM.render(
    <Hello toWhat=‘world’>,
    document.getElementById(‘root’)
)

// 转化为原生JS后的写法

class Hello extends React.Component {
    render(){
        return React.createElement(‘div’,null, `Hello,${this.props.toWhat}`)
    }
}

ReactDOM.render(
    React.createElement(‘Hello’, { toWhat: ‘world’ }, null),
    document.getElementById(‘root’)
)