web前端高级React - React从入门到进阶之JSX简介

系列文章目录

第一章：React从入门到进阶之初识React
第二章：React从入门到进阶之JSX简介
第三章：React从入门到进阶之元素渲染
第四章：React从入门到进阶之JSX虚拟DOM渲染为真实DOM的原理和步骤
第五章：React从入门到进阶之组件化开发及Props属性传值
第六章：React从入门到进阶之state及组件的生命周期
第七章：React从入门到进阶之React事件处理

一、JSX是什么？

开篇之前，先来看一段代码

const element = <h1>Hello, world!</h1>;

仔细看上面这段代码，说它是html但却不是html但却用了html的标签，说它是字符串却既没有单引号也没有双引号，所以它也不是字符串。
这段有趣的代码就被称为JSX，它是一个JavaScript的语法扩展，全拼是JavaScript and Xml。
我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。

二、为什么使用JSX

• React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。
• React 并没有采用将标记与逻辑进行分离到不同文件这种人为地分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合代码片段中，来实现关注点分离。我们将在后面章节中深入学习组件。
• React 不强制要求使用 JSX，但是大多数人发现，在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。它还可以使 React 显示更多有用的错误和警告消息。
  搞清楚这个问题后，我们就开始学习 JSX 吧！

三、在JSX中嵌入表达式

首先还是先来看一段JSX代码

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