前言

作为一个前端开发有些不好意思，居然还没有接触过 React ，就借这段时间积累下 React 相关经验，为疫情过后能有更多的就业机会。

如果你已经是个经验丰富的 React Developer 可能这系列文章不太适合你阅读。

虽然我承认下面大多数内容，基本都可以在官网找到原型。 但我会努力让你们尽可能不枉此行，如果有不对之处，望各位评论指出。

为了更好的阅读体验，你可以在底下的“了解更多”查看原文(访问我的语雀知识库)。

JSX 介绍

什么是 JSX

如下代码，和 HTML 标签似乎一样，但不是我们认为的 HTML 标签：

就是如此的语法称为 JSX ，它被用来描述 React 中的"元素"，从而渲染出我们说要看的页面。

语法糖

虽然 JSX 像是 HTML ，但其是 js 的语法扩展的语法糖。

举例：

如上 JSX 代码，将通过 React.createElement(component, props, ...children) api 解析成如下形式：

注意，上述解析结果就是普通的 js 代码，同时内部对每个子 JSX 标签(children)元素都是嵌套的。

JSX 标签内的属性(key=value) 将被解析成 props 对象，可以清楚的看到 href 、target、alt 等解析结果。

为何使用 JSX

如果使用过 angular2、vue ，你应该知道他们对于 js 和 html 两块内容是分开写的。

angular 物理分割：

vue 通过 loader 组合拆分：

而 React 通过 JSX 语法，将两者耦合在一起。

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

React 并没有采用将标记与逻辑进行分离到不同文件这种人为地分离方式，而是通过将二者共同存放在称之为"组件"的松散耦合单元之中，来实现关注点分离。

最终，我们能更好的理解整个组件里 UI 和逻辑部分的关系。当然这仁者见仁智者见智。

另外，在 JSX 内部会对传入内容进行转义，再进行渲染。所以能防止 XSS 注入攻击。

使用 JSX

括号 { } 表达式

我们可以通过大括号，来显式定义的变量。括号内也支持 js 表达式，或者已定义的方法。

示例：

页面显示：

if 条件判断

由于 {} 括号内部不支持复杂的 js 逻辑判断，如果涉及 if/else 之类语句，可以将 JSX 写在 if/else 里面，因为其本身就是 js 的扩展。

特定属性

或许你应该注意到 HTML 中的 class 属性，在 JSX 中被定义为 className；而 tabindex 变为 tabIndex 。

所以 JSX 和 HTML 是不一样的，尽管他们非常类似。而且 React DOM 中，这些属性使用 camelCase 来命名定义。

JSX 约定

需要包含 React 库

这好理解，因为 JSX 是 React.createElement 的语法糖，所以需要在此之前引入 React ，确保 React 在作用域中。

组件名首字母大写

组件的名称一定要首字母大写，如果小写会导致解析不正确：

把 JsxBase 改为 jsxBase，第一能看到 IDE 的校验已经是"未引用"状态了，然后页面也没有预期渲染出组件内容。

点语法

可以定义一个包含很多 React JSX 的组件，然后一起导出。最后通过指定的引用来选择使用哪个组件。

比如定义了 Foo、Bar 两个组件，然后一同导出：

最后在使用的地方，通过 xxx.xxx 的方式来选择使用那个组件：

不支持动态表达式

注意，JSX 通过 React.createElement 解析，其中的 type 选项不支持动态表达式。

示例：

而是要通过一个中间变量，来引用这个动态表达式。最后返回这个中间变量。

注意，这个中间变量，还是要符合 React JSX 的命名规范，首字母要大写。

其他

props

我们知道 JSX 内的属性最终都会被解析到 props 中，若某个属性没有赋值，那它默认就为 true 。

{autocomplete: true}

另外，我们可以使用 {...xxx} 来定义整个属性：

特殊值的问题

false, null, undefined, and true 是合法的子元素。但它们并不会被渲染：

最终，页面是一片"空白"

另外，对于 falsy 值的渲染，需要长个心眼：

上面红款内容显示在页面上了，并且渲染为 0 。

总结

关于 JSX 的知识点先梳理到这里，基本对一般的使用足够用了。多数都是一些规则的梳理，毕竟这是 React.createElement 的语法糖。