React基本引入和JSX语法-Toy模板网

这篇具有很好参考价值的文章主要介绍了React基本引入和JSX语法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.1 React介绍

1.1.1. 官网

英文官网: https://reactjs.org/
中文官网: https://react.docschina.org/

1.1.2. 介绍描述

用于动态构建用户界面的 JavaScript 库(只关注于视图)
由Facebook开源

1.1.3. React的特点

声明式编码
组件化编码
React Native 编写原生应用
高效（优秀的Diffing算法）

1.1.4. React高效的原因

使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
DOM Diffing算法, 最小化页面重绘。

1.2 React的基本使用

1.2.1 相关js库

react.js：React核心库。
react-dom.js：提供操作DOM的react扩展库。
babel.min.js：解析JSX语法代码转为JS代码的库。

引入时必须讲究顺序， react.js要在react-dom.js之前

1     <script type="text/javascript" src="../js/react.development.js"></script>
2     <!-- 引入react-dom，用于支持react操作DOM -->
3     <script type="text/javascript" src="../js/react-dom.development.js"></script>
4     <!-- 引入babel，用于将jsx转为js -->
5     <script type="text/javascript" src="../js/babel.min.js"></script>

或使用CDN引入

1     <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
2     <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
3     <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

1.2.2 使用React

不使用脚手架直接html文件里引入

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>hello_react</title>
 6 </head>
 7 <body>
 8     <!-- 准备好一个“容器” -->
 9     <div id="test"></div>
10 
11     <!-- 引入react核心库 -->
12     <script type="text/javascript" src="../js/react.development.js"></script>
13     <!-- 引入react-dom，用于支持react操作DOM -->
14     <script type="text/javascript" src="../js/react-dom.development.js"></script>
15     <!-- 引入babel，用于将jsx转为js -->
16     <script type="text/javascript" src="../js/babel.min.js"></script>
17 
18     <script type="text/babel" > /* 此处一定要写babel */
19         //1.创建虚拟DOM
20         const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 */
21         //2.渲染虚拟DOM到页面
22         ReactDOM.render(VDOM,document.getElementById('test'))
23     </script>
24 </body>
25 </html>

效果图如下，可以看到已经完成渲染

React基本引入和JSX语法

1.2.3 虚拟DOM与真实DOM

介绍中提到，react的优势有通过diff算法减少页面的重绘和重排来提升性能，所以就需要虚拟DOM的使用。我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面。

关于虚拟DOM：

本质是Object类型的对象（一般对象）
虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
虚拟DOM最终会被React转化为真实DOM，呈现在页面上。

 1         const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */
 2             <h1 id="title">
 3                 <span>Hello,React</span>
 4             </h1>
 5         )
 6         //2.渲染虚拟DOM到页面
 7         ReactDOM.render(VDOM,document.getElementById('test'))
 8 
 9         const TDOM = document.getElementById('demo')
10         console.log('虚拟DOM',VDOM);
11         console.log('真实DOM',TDOM);

React基本引入和JSX语法

1.2.4 创建虚拟DOM的两种方式

1.纯JS式（不推荐）

React提供了一些API来创建一种 “特别” 的一般js对象，下面创建的就是一个简单的虚拟DOM对象

const VDOM = React.createElement('标签',{属性名1：属性值1,属性名2：属性值2},'内容')

但是大多数时候创建元素时都会遇到多层元素嵌套，比如下面的代码，一个h1标签里面装着一个span标签，就需要2次调React.createElement()方法，如果层数更多将非常不方便，而且对于查看内部的元素结构也非常不方便

const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))

2.JSX方式

创建同样的结构，明显JSX更加清晰简单

 1     <script type="text/babel" > /* 此处一定要写babel */
 2         //1.创建虚拟DOM
 3         const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */
 4             <h1 id="title">
 5                 <span>Hello,React</span>
 6             </h1>
 7         )
 8         //2.渲染虚拟DOM到页面
 9         ReactDOM.render(VDOM,document.getElementById('test'))
10     </script>

因为这里是JSX语法，不是普通的JS语法，所以书写的时候有一些差异，比如html结构不加引号直接可以写在里面作为虚拟DOM。

JSX语法规则

1.定义虚拟DOM时，不要写引号。

2.标签中混入JS表达式时要用{}。文章来源地址https://www.toymoban.com/news/detail-499619.html

3.样式的类名指定不要用class，要用className。

4.内联样式，要用style={{key:value}}的形式去写。

5.只有一个根标签

6.标签必须闭合

7.标签首字母

(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。

(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

以下是JSX语法操作样式和属性的例子，对于back这个类，直接在ul中使用字符串对className属性进行赋值。列表渲染，需要形成一个数组，所以使用大括号包裹数组的方式，{ arr }，数组的具体内容是多个<li>。这里先是使用了JSX的行内样式来控制每个<li>的样式，这里的样式都是通过对象的形式来书写，多个单词组成的属性名要用小驼峰命名（第一个单词以小写字母开始；从第二个单词开始以后的每个单词的首字母都采用大写字母）。在列表渲染中，必须要加入key这个属性作为元素的唯一标识，属性值一般是不相同的值比如id、手机号、身份证号、学号等唯一值。此处仅用于数据的展示，key就用index（diff算法相关内容）。

 1 <style>
 2         .back {
 3             background-color: red;
 4         }
 5     </style>
 6 </head>
 7 <body>
 8     <div id="root"></div>
 9 </body>
10 <script type="text/babel">
11     const data = ['Vue', 'React', 'Angular']
12     const VDom = (
13         <ul className="back" >
14             {data.map((item, index) => {
15                 return <li style={{ color: 'white', fontSize: "28px" }} key={index} >{item}</li>
16             })}
17         </ul>
18     )
19     ReactDOM.render(VDom, document.getElementById('root'))
20 
21 </script>
22 </html>