跳到主要内容

JSX 语法

JSX

概念：

JSX 是 JavaScript 的语法扩展，可以很好的描述 UI 应该呈现出应用的交互本质
JSX 是 React.createElement(component, props, ...children) 语法糖

目的：

代码结构清晰和简洁，UI 与交互
React 根据 jsx 语法更好处理 DOM 及交互

Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。

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

注意

在 react17+后，采用了新的转换import {jsx as _jsx} from 'react/jsx-runtime';方式，因此不需要引用React

原理

通过 babel-core 分析成 AST 语法树，经过@babel/plugin-transform-react-jsx进行处理

const babel = require('@babel/core');
const sourceCode = `<h1 className='greeting'>Hello, world!</h1>;`;
const result = babel.transform(sourceCode, {
  plugins: [['@babel/plugin-transform-react-jsx', { runtime: 'classic' }]],
});
console.log(result.code);
/**
React.createElement("h1", {
  className: "greeting"
}, "Hello, world!")
*/

参考资料

JSX
原理