前端框架React - JSX(二)

1.JSX代表对象

Babel compiles JSX down to React.createElement() calls.

Babel编译JSX直到React.createElement()方法调用。

const element = (
  <h1 className="greeting">
    Hello,world!
  </h1>
);

const element = React.createElement(
  'h1',{className: 'greeting'},'Hello,world!'
);

React.createElement()本质上创建一个像如下的对象：

// Note: this structure is simplified
const element = {
  type: 'h1',props: {
    className: 'greeting',children: 'Hello,world'
  }
};

这个对象被称作React元素，react读取这些对象，用他们来构建DOM，并且保持这些对象，DOM的更新。