🍟React 知识体系之 JSX

745 阅读3分钟

在日常的 React 开发工作中,我们已经习惯了使用 JSX 来描述 React 的组件内容。关于 JSX 语法本身,相信每位 React 开发者都不陌生

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

ReactDOM.render(
  <HelloMessage name='Taylor' />,
  document.getElementById("hello-example"),
);

JSX 到底是什么

JSX 到底是什么,我们先来看看React 官网给出的一段定义:

JSX 是 JavaScript 的一种语法扩展,它和模板语言很接近,但是它充分具备 JavaScript 的能力。

具有 JavaScript 的能力是什么意思呢?

可以在 JSX 中嵌入表达式

在下面的例子中,我们声明了一个名为 name 的变量,然后在 JSX 中使用它,并将它包裹在大括号中:

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

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

在 JSX 语法中,你可以在大括号内放置任何有效的  JavaScript 表达式。例如,2 + 2user.firstName  或  formatName(user)  都是有效的 JavaScript 表达式。

JSX 也是一个表达式

在编译之后,JSX 表达式会被转为普通 JavaScript 函数调用,并且对其取值后得到 JavaScript 对象。

也就是说,你可以在 if 语句和 for 循环的代码块中使用 JSX,将 JSX 赋值给变量,把 JSX 当作参数传入,以及从函数中返回 JSX:

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

JSX 的本质

JSX 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖

如下 JSX 代码:

20210324135310.jpg

在线 Babel 编辑器

JSX格式被解析成了 React.createElementcreateElement函数包含多个参数

  • 第一个参数是type(元素类型)
  • 第二个参数是props
  • 第三个及第 N 个参数是children

通过这样的对比,你可以清晰地发现,JSX 代码更为简洁,而且代码结构层次更为清晰

因为 React 需要将组件转化为虚拟 DOM 树,所以我们在编写代码时,实际上是在手写一棵结构树。而 XML 在树结构的描述上天生具有可读性强的优势。

但这样可读性强的代码仅仅是给写程序的同学看的,实际上在运行的时候,会使用 Babel 插件将 JSX 语法的代码还原为 React.createElement 的代码

你会发现,在实际功能效果一致的前提下,JSX 代码层次分明、嵌套关系清晰;

React.createElement 代码则给人一种非常混乱的“杂糅感”,这样的代码不仅读起来不友好,写起来也费劲。

为什么使用 JSX

  1. 通过 JSX 创建虚拟 DOM
  2. JSX 语法糖允许前端开发者使用类似 HTML 标签语法来创建虚拟 DOM,在降低学习成本的同时,也提升了研发效率与研发体验

读到这里,相信你已经充分理解了JSX 是 JavaScript 的一种语法扩展,它和模板语言很接近,但是它充分具备 JavaScript 的能力

React 源码的 JSX 工作流程

  1. JSX 转换为React.createElement函数
  2. React.createElement 执行后返回 React.Element(虚拟 DOM)
  3. 最后调用 ReactDOM.render() 转换为真实 DOM

001.jpg

JSX 是如何转换为 React.createElement 的呢? 欢迎大家在评论区交流讨论


最后

文章浅陋,欢迎各位看官评论区留下的你的见解!

觉得有收获的同学欢迎点赞,关注一波!

good

往期好文