React系列--JSX到底是什么东西

JSX 简介

JSX的全称是 Javascript and XML，React发明了JSX，它是一种可以在JS中编写XML的语言。

JSX更像一种模板，类似于Vue中的 template。

为什么使用JSX？

React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。

React不强制要求使用JSX。

如何使用JSX

在JSX中使用表达式

在JSX中变量和表达式放在大括号{}中。

const name = 'Josh Perez';
const element = <h1>Hello, { name }</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

JSX中指定属性

JSX中使用 camelCase（小驼峰命名）来定义属性的名称，因此 class 变成了 className。

const name = 'Josh Perez';
const element = <h1 className="app">Hello, { name }</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

JSX中使用样式

JSX中使用 camelCase（小驼峰命名） 语法来设置内联样式属性. React 会在指定元素数字后自动添加 px。

const name = 'Josh Perez';
const sttyle = {
  fontSize: 100,
  color: '#FF0000'
}
const element = <h1 style={ style }>Hello, { name }</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

JSX中使用注释

JSX中注释写在 {/*...我是一段注释...*/} 中。

ReactDOM.render(
  <div>
    <h1>Hello World!</h1>
    {/*注释...*/}
  </div>,
  document.getElementById('root')
);

JSX本质刨析

JSX是JS的语法糖，编译时JSX会通过Babel编译成JS。React源码中使用React.createElement()方法来创建JSX，该方法依次接收DOM节点（比如div、span）、属性集合（比如className、style）和children（子节点）三个参数，并返回一个JS对象，也就是虚拟DOM。

以下两段示例是等价的：

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

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

React.createElement()方法简单点是以下这样的：

function createElement(tag, attrs, ...children) {
  attrs = attrs || {};
 
  // 返回一个JS对象，也就是虚拟Dom
  return {
    tag,
    attrs,
    children,
    key: attrs.key || null,
  };
}

总结

本期讲解了React核心概念JSX，以上例子和部分术语参考React官方文档，适合React新手学习参考，后期会计划边学边输出React基础系列，与大家共同成长。

关注公众号：【全栈星球】，免费领取前端、Node、计算机基础学科电子书籍。