JSX原理学习笔记（一）——三个参数

JSX是JavaScript的语法扩展，看起来很像XML。JSX因React框架而流行，它们是 React 组件。

JSX原理：每个 JSX 元素只是调用 React.createElement(component, props, ...children) 的语法糖。三个参数分别指：组件名、组件属性、组件内容

使用 JSX 可以完成的任何事情都可以通过纯 JavaScript 完成。
例1：如下JSX代码：

<MyButton color="blue">
  Click Me
</MyButton>

会编译为：

React.createElement(
  MyButton, 
  {color: 'blue'},
  'Click Me'
)
// 三个参数分别为：组件名、属性、内容

如果没有子节点，你还可以使用自闭合的标签形式，如：

<div className="sidebar" />

会编译为:

React.createElement(
  'div',
  {className: 'sidebar'}
)

例2：

<div id='root'></div>

使用JSX时：

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}
ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('root')
);

不使用JSX时：

// React.createElement(）方法创建元素
class Hello extends React.Component {
  render() {
      // 在Hello标签中创建div元素，没有属性（为null）
    return React.createElement('div', null, `Hello ${this.props.name}`);
  }
}

ReactDOM.render(
	// 创建Hello元素
  React.createElement(Hello, {name: 'World'}, null),
  document.getElementById('root')
);

由于 JSX 会编译为 React.createElement 调用形式，所以 React 库也必须包含在 JSX 代码作用域内。

例如，在如下代码中，虽然 React 和 CustomButton 并没有被直接使用，但还是需要导入：

import React from 'react'; // 引入React
import CustomButton from './CustomButton';

function WarningButton() {
  // return React.createElement(CustomButton, {color: 'red'}, null);
  return <CustomButton color="red" />;
}

参考React中文网：深入JSX