前端学习之React中的JSX
2020-09-11 15:42:04
JSX的基本使用
为什么不使用
React.createElement()
?
- 繁琐不够简洁
- 结构不够直观,无法一眼看出
- 不够优雅,用户体验差
JSX 是 JavaScript XML 的简写,表示在 JavaScript 代码中写 XML(HTML)格式的代码;
1 | const title = <h1>Hello JSX</h1> |
为什么脚手架中可以使用JSX语法?
- JSX 并不是标准的 ECMAScript 语法,是其的扩展;
- 需要 Babel 编译处理后,才能在浏览器环境中使用;
- create-react-app 脚手架中默认有编译的配置,无需手动设置;
- 编译JSX语法的包为:@babel/preset-react
使用 JSX 语法的几个注意点:
- JSX中React元素使用驼峰命名法,还有一些特殊属性:class => className,for => htmlFor,tabindex => tabIndex;
- 没有子节点的React元素可用
/>
结束; - 推荐使用小括号包裹 JSX,避免 JS 中的自动插入分号陷阱;
- 使用 JSX 返回的组件必须为单个 html 元素,也可以使用
Fragment
作为占位符包裹;
JSX中使用JS表达式
使用{}
在JSX中嵌入Javascript表达式:
1 | let name = "Mahoo" |
在{}
可以使用任何合法的JavaScript表达式;
比较特殊的像函数表达式,以及JSX自身也是表达式;不过,对象却是一个例外,一般在JSX中作为元素样式属性;
JSX 中不能出现语句如if
,for
等条件,循环语句,会编译错误;
JSX的条件渲染
条件渲染:根据条件渲染特定的JSX结构
适用场景:Loading 的加载
可通过if/else
语句,三元运算符和逻辑与运算符实现条件渲染:
1 | const isLoading = false |
JSX的列表渲染
如果需要渲染一组数据,可使用数组的map()
方法;
原则:map()
遍历谁,就给谁添加 key 属性;
注意渲染列表时,应该添加 key 属性,并且保证属性的值要唯一,尽量避免使用所应好作为 key ;
1 | const songs = [ |
JSX的样式处理
行内样式 —— style
1
<h1 style={{color: 'red',backgroudColor: 'blue'}}>Hello</h1>
类名 —— className
1
2
3
4import './index.css';
const title = (
<h1 className="title">Hello</h1>
)
React 完全利用 Js 语言自身的能力来编写 UI,而不是造轮子增强 HTML 功能;