浅谈慕课网React入门课程笔记（二）

叁歲伎倆 2022-06-16 10:16 233阅读 0赞

本文介绍React的HTML、CSS、JS的基础结构。

React JSX，即JavaScript和XML，是facebook为React框架开发的一套语法糖。

语法糖，又称糖衣语法，是指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用，主要的目的是增加程序的可读性，从而减少程序代码出错的机会。JSX就是JS的一种语法糖，类似的还有CoffeeScript以及微软的TypeScript，最终它们都被解释为JS才能被浏览器理解和执行。

直接把JSX的语法写在<script>标签中，在没有解析器的情况下，浏览器是没法识别它的，这是所有语法糖略有不足的地方，因此需要引入相应的解析JS——JSXTransformer.js，放在<head>中。其次，需要告诉解析库，这里的代码不是普通的JS代码，而是JSX，通过设置<script>标签的type属性为”text/JSX”来指定。

当然，需要把ReactJS的库也相应的引进来，这些都可以通过公共CDN库来引入。

JSX带来的一大便利是可以直接在JS里面写类DOM的结构，比用原生JS去拼接字符串，然后再用正则替换的方式来渲染模板，实在是方便和简单太多了。除了原生HTML标签，还可以生成类似于原生HTML标签的自定义标签，它们统称为React Components。注意，这些标签代表的并不是真实的DOM节点，在React看来，只是React Components的实例而已。React Components通过React.render()方法最终呈现在页面上。React.render()方法的第一个参数是要渲染的React Components，第二个参数是React Components渲染完之后要插入的位置的容器Element。自定义的React Components通过调用React.createClass()，参数是JS的一个Object，其中最重要的key值是render函数，其返回值直接决定了自定义的React Components被渲染出来是个什么样的结构。大括号\{\}中的是JS表达式，this表示当前React Components的实例，props是在使用React Components时在其上添加的属性的集合。若想对React Components添加样式，不能使用class，因为class在JS的ES6标准里已经成为了一个关键字，用来声明一个类，在之前的ES5等的标准里也是一个保留字，因此不能直接在标签上写class，因为这是一个JS的运行环境，如果需要声明标签的类名，则需要换一种写法，用className。还有一种写法，直接使用内联样式，按照传统语法，应该写成style=”color: red”，但是在React中，行内样式不是用字符串的形式表示的，需要用一个样式对象来表示，样式对象的key值是样式名的驼峰标识写法，值是样式的值，因此应该写成style=\{ \{color: ’red’\}\}，这等价于var styleObj = \{color: ’red’\}，引用style=\{styleObj\}。