react进阶第一讲jsx

createElement

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

• 第一个参数：如果是组件类型，会传入组件对应的类或函数；如果是 dom 元素类型，传入 div 或者 span 之类的字符串。
• 第二个参数：一个对象，在 dom 类型中为标签属性，在组件类型中为 props 。
• 其他参数：依次为 children，根据顺序排列。

<div>
   <TextComponent />
   <div className="Li">hello,world</div>
   let us learn React!
</div>

上面的代码会被 babel 先编译成：

 React.createElement("div", null,
        React.createElement(TextComponent, null),
        React.createElement("div", {className:'Li'}, "hello,world"),
        "let us learn React!"
    )

clonElement

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

几乎等同于:

<element.type {...element.props} {...props}>{children}</element.type>

以 element 元素为样板克隆并返回新的 React 元素。config 中应包含新的 props，key 或 ref。返回元素的 props 是将新的 props 与原始元素的 props 浅层合并后的结果。新的子元素将取代现有的子元素，如果在 config 中未出现 key 或 ref，那么原始元素的 key 和 ref 将被保留。