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

·  阅读 2232
React系列--JSX到底是什么东西

「这是我参与11月更文挑战的第2天,活动详情查看:2021最后一次更文挑战

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 style = {
  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基础系列,与大家共同成长。

分类:
前端
标签: