二、React使用JSX

时间：2021-07-09 18:10:21 收藏：0 阅读：35

一、JSX概述

　　由于通过React.createElement()方法创建的React元素代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅，开发时写代码很不友好。

　　React使用JSX来替代常规的JavaScript，JSX可以理解为的JavaScript语法扩展，它里面的标签申明要符合XML规范要求。

React不一定非要使用JSX，但它有以下优点：
- JSX执行更快，因为它在编译为JavaScript代码后进行了优化
- 它是类型安全的，在编译过程中就能发现错误
- 声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率速度
JSX语法：
- 定义虚拟DOM时，不要用引号
- 标签中混入js表达式时要用{}
- 样式的类名指定不要用class，要用className
- 内联样式，要用style={{key: value}}的形式去写
- 只有一个根标签
- 标签必须闭合
- 标签首字母：
  - 小写字母开头，则会将标签转为html中同名标签，若html标签中无对应的同名元素，编译会报错
  - 大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错

二、JSX重构Hello World

在项目中尝试JSX最快的方法是在页面中添加这个 <script> 标签，引入解析jsx语法的babel类库
<script>标签块中使用了JSX语法，则一定要申明类型type="text/babel"，否则babel将不进行解析jsx语法

JSX重构Hello World

 1 <div id="app"></div>
 2 <!-- 引入react相关的文件 -->
 3 <script src="./js/react.development.js"></script>
 4 <script src="./js/react-dom.development.js"></script>
 5 <script src="./js/babel.min.js"></script>
 6 
 7 <!-- script标签上一定要写上 type="text/babel" -->
 8 <script type="text/babel">
 9   // 1、创建虚拟dom
10   const vNode = <div>hello world</div>;
11   
12   // 2、获取挂载点
13   const el = document.getElementById("app");
14   
15   // 3、页面渲染
16   ReactDOM.render(vNode, el);
17 </script>

三、JSX语法中的js表达式

1、嵌入js表达式

在jsx语法中，要把js代码写到{}中，所有标签必须要闭合

 1 let num = 100;
 2 let bool = false;
 3 
 4 // JSX 语法
 5 var vNode = (
 6   <div>
 7     {/* 我是注释 */}
 8     {num}
 9     <hr />
10     {/* 三目运算 */}
11     {bool ? "条件为真" : "条件为假"}
12   </div>
13 );
14 
15 ReactDOM.render(vNode, document.getElementById("app"));

2、属性绑定

对标：Vue的v-bind指令

 1 const src = "http://www.mobiletrain.org/images/index/new_logo.png";
 2 const style = { fontSize: "20px", color: "red" };
 3 const html = "<a href=‘http://www.baidu.com‘>百度一下</a>";
 4 
 5 // 获取元素
 6 const app = document.getElementById("app");
 7 // 创建虚拟DOM
 8 const vNode = (
 9   <div>
10     { /*标签的属性如果需要被JSX解析，则属性的值不能加引号*/ }
11     <img src={src} />
12     <hr/>
13     <p style={style}>北川3次地震为汶川地震余震</p>
14     <hr/>
15     <p className="cl1">iPhone12开售排队</p>
16     {
17       /*
18         输出HTML字符串（了解）
19         注意点：react默认不解析html字符串
20         原因是：安全问题
21         如果真要输出解析的html字符串请按照以下的语法
22       */
23     }
24     <p dangerouslySetInnerHTML={{__html:html}}></p>
25   </div>
26 );
27 // 渲染页面
28 ReactDOM.render(vNode, app);

3、数组渲染

直接渲染：会连接在一起，不便于区分

 1 let arr = ["张三", "李四", "王五", "罗翔"];
 2 // 获取挂载点
 3 const el = document.getElementById("app");
 4 // 创建虚拟DOM
 5 const vNode = (
 6   <div>
 7     {/* 直接输出数据 */}
 8     {arr}
 9   </div>
10 );
11 // 渲染
12 ReactDOM.render(vNode, el); // 张三李四王五罗翔

处理后渲染

 1 let arr = ["张三", "李四", "王五", "罗翔"];
 2 // 获取挂载点
 3 const el = document.getElementById("app");
 4 // 创建虚拟DOM
 5 const vNode = (
 6   <div>
 7     {/* 给循环体包裹一层{}，不包就错 */}
 8     {
 9       arr.map((item, index) => {
10         return <li key={index}>{item}</li>;
11       })
12     }
13     
14     {/*如果循环体就1行，{}与return可以被省略（箭头函数）*/}
15     {
16       arr.map((item, index) => (
17         <li key={index}>{item}</li>;
18       ))
19     }
20   </div>
21 );
22 // 渲染
23 ReactDOM.render(vNode, el);

原文：https://www.cnblogs.com/tricker65535/p/14990701.html