Skip to content

React 中 JSX 的本质

JSX 本质

  • JSX 等同于 Vue 模板
  • Vue 模板不是 html
  • JSX 也不是 JS

Vue 模板编译

js
// 插值
const template = `<p>{{message}}</p>`;
// with(this){return createElement('p',[createTextVNode(toString(message))])}

JSX 编译

可以在 https://babeljs.io/repl 测试,记得勾选 PRESETS->react

jsx 代码

js
// JSX 基本用法
const imgElem = (
  <div id="div1">
    <p>some text</p>
    <img src={imgUrl} />
  </div>
);

// JSX style
const styleData = { fontSize: '30px', color: 'blue' };
const styleElem = <p style={styleData}>设置 style</p>;

// JSX 加载组件
const app = (
  <div>
    <Input submitTitle={onSubmitTitle} />
    <List list={list} />
  </div>
);

// JSX 事件
const eventList = <p onClick={this.clickHandler}>some text</p>;

// JSX list
const listElem = (
  <ul>
    {this.state.list.map((item, index) => {
      return (
        <li key={item.id}>
          index {index}; title {item.title}
        </li>
      );
    })}
  </ul>
);

编译后

js
// JSX 基本用法
const imgElem = /*#__PURE__*/ React.createElement(
  'div',
  {
    id: 'div1',
  },
  /*#__PURE__*/ React.createElement('p', null, 'some text'),
  /*#__PURE__*/ React.createElement('img', {
    src: imgUrl,
  }),
); // JSX style

const styleData = {
  fontSize: '30px',
  color: 'blue',
};
const styleElem = /*#__PURE__*/ React.createElement(
  'p',
  {
    style: styleData,
  },
  '\u8BBE\u7F6E style',
); // JSX 加载组件

const app = /*#__PURE__*/ React.createElement(
  'div',
  null,
  /*#__PURE__*/ React.createElement(Input, {
    submitTitle: onSubmitTitle,
  }),
  /*#__PURE__*/ React.createElement(List, {
    list: list,
  }),
); // JSX 事件

const eventList = /*#__PURE__*/ React.createElement(
  'p',
  {
    onClick: (void 0).clickHandler,
  },
  'some text',
); // JSX list

const listElem = /*#__PURE__*/ React.createElement(
  'ul',
  null,
  (void 0).state.list.map((item, index) => {
    return /*#__PURE__*/ React.createElement(
      'li',
      {
        key: item.id,
      },
      'index ',
      index,
      '; title ',
      item.title,
    );
  }),
);

总结

  • React.createElement 即 h 函数,返回 vnode
  • 第一个参数,可能是组件,也可能是 html tag
  • 组件名,首字母必须大写(React 规定)
js
// 总结
React.createElement('div', null, [child1, child2, child3])
React.createElement('div', {...}, child1, child2, child3)
React.createElement(List, null, child1, child2, '文本节点')
// h 函数
// 返回 vnode
// patch

基于 MIT 许可发布