React JSX使用、JSX 中使用 JavaScript 表达式、JSX条件渲染、JSX列表渲染、JSX 的样式处理

一、JSX 的基本使用

JSX产生的原因

由于通过createElement()方法创建的React元素有一些问题，代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅，用户体验不爽

JSX的概述

JSX是JavaScript XML 的简写，表示在JavaScript代码中写HTML格式的代码

优势：声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率

使用JSX语法创建react元素

为什么在脚手架中可以使用JSX语法

• JSX 不是标准的ECMAScript语法，它是ECMAScript的语法拓展
• 需要使用babel编译处理后，才能在浏览器环境中使用
• create-react-app脚手架中已经默认有该配置，无需手动配置
• 编译JSX语法的包： @bable/preset-react

注意点

• React元素的属性名使用驼峰命名法
• 特殊属性名：class -> className，for -> htmlFor，tabindex -> tabIndex
• 如果没有子节点的React元素可以用 /> 来结束
• 推荐：使用 小括号包裹JSX，从而避免JS中自动插入分号报错
  

二、JSX 中使用 JavaScript 表达式

JSX是来描述页面的结构，我们一般在编写业务逻辑渲染页面的时候，需要涉及到传递值，调用函数，判断条件，循环等，这一些在JSX中都能得到支持

1.嵌入JS表达式

语法：{JavaScritp表达式}

注意点

• 只要是合法的js表达式都可以进行嵌入
• JSX自身也是js表达式
• 注意：js中的对象是一个例外，一般只会出现在style属性中
• 注意：在{}中不能出现语句（比如：if/for 等）
  

三、JSX条件渲染

根据不同的条件来渲染不同的JSX结构

• 场景：loading效果
• 条件渲染：根据条件渲染特定的 JSX 结构
• 可以使用if/else或三元运算符或逻辑与运算符来实现

if-else

三元表达式

逻辑与运算符

逻辑与
语法： 表达式1 && 表达式2
如果第一个表达式的值为真，则返回表达式2
如果第一个表达式的值为假，则返回表达式1

逻辑或
语法： 表达式1 || 表达式2
如果第一个表达式的值为真，则返回表达式1
如果第一个表达式的值为假，则返回表达式2

四、JSX列表渲染

• 如果需要渲染一组数据，我们应该使用数组的 map () 方法
• 注意：渲染列表的时候需要添加key属性，key属性的值要保证唯一
• 原则：map()遍历谁，就给谁添加key属性
• 注意：尽量避免使用索引号作为key
  

五、JSX 的样式处理

行内样式 -style

在style里面我们通过对象的方式传递数据

style={{'color': 'red',"backgroundColor": 'pink'}}

这种方式比较的麻烦，不方便进行阅读，而且还会导致代码比较的繁琐

类名 -className

创建CSS文件编写样式代码

在js中进行引入，然后设置类名即可

小结

• JSX是React的核心内容
• JSX表示在JS代码中写HTML结构，是React声明式的体现
• 使用JSX配合嵌入的JS表达式、条件渲染、列表渲染、可以描述任意UI结构
• 推荐使用className的方式给JSX添加样式
• React完全利用JS语言自身的能力来编写UI，而不是造轮子增强HTML功能