syntax extension to JavaScript

官网对jsx定义是js的语法扩展。React.createElement函数的语法糖。

因为浏览器没办法直接识别jsx语法的，就有一个转化渲染的过程。

从jsx 语法到渲染页面的大致三个过程。

1. jsx语法通过babel,解析成react.createElement函数调用。
2. 生成js object 虚拟dom，这个js object描述网页dom节点。
3. 再根据object内容更新实际dom节点。

// 大圣课程中有介绍 上图步骤的简单手写代码，发布理解    
function createElement(type, props, children) {
  return { type, props, children };
}
let vdom = createElement("h1", { class: "title" }, [
  "hello, world",
  createElement("p", { class: "item" }, [
    "daisy",
    createElement("span", { class: "question"}, ["what's up"])
  ]),
  createElement("p", { class: "item" }, ["helen"])
]);
function render(dom) {
  let el = document.createElement(dom.type);
  for (let key in dom.props) {
    el.setAttribute(key, dom.props[key]);
  }
  dom.children.forEach(child => {
    let childItem = typeof child == "object" ?
        render(child) : document.createTextNode(child);
    el.appendChild(childItem);
  });
  return el;
}
var el = render(vdom);
document.body.appendChild(el);

在线尝试： stackblitz.com/edit/web-pl…

上面代码部分，只简单表示了createElement 生成vdom, 然后再 render Dom的过程。

这里从vdom,到实际的渲染 dom。react 采用自顶向下全量diff，对比新旧vdom找到真正的Dom变化。fiber将diff任务切开，利用空闲时间计算。