React另一个角度

React — 因为它更像是一种编程运行时

官网

JSX，是一个 JavaScript 的语法扩展。

w3c

JSX stands for JavaScript XML. JSX allows us to write HTML in React.

jsx 需要React runtime处理成一棵树(也就是js对象 Fiber Tree)

// JSX 是用来描述这些对象的语法糖。
// <dialog>
//   <button className="blue" />
//   <button className="red" />
// </dialog>
{
  type: 'dialog',
  props: {
    children: [{
      type: 'button',
      props: { className: 'blue' }
    }, {
      type: 'button',
      props: { className: 'red' }
    }]
  }
}

流程

jsx -> fiber tree（React） --> dom tree (DOM对象浏览器)---> 浏览器绘制(GUI)

Fiber tree的流程

babel---->React.createElement --> React.createElement执行返回对象 ---> Fiber Tree