目录
1. JSX的基本使用
1.1 createElement()存在的问题
- 繁琐不简洁
- 不直观,无法一眼看出所描述的结构
- 用户体验差
可以说 jsx就是HTML标签的写法。
1.2 JSX简介
JSX是JavaScript XML的简写,表示在JavaScript代码中写XML(HTML)格式的代码
优势:声明式语法更加直观、与HTML结构相同、降低学习成本、提升开发效率
1.3 使用步骤
- 使用JSX语法创建react元素 (更能体现React的声明式特点)
const title = <h1>Hello jsx</h1>
ReactDOM.render(title,document.getElementById('root'))
1.4 脚手架中为什么能直接写JSX语法?
JSX 不是标准的ECMAScript,它是ECMAScript的语法扩展。
需要使用babel编译后,才能在浏览器环境中使用。
create-react-app脚手架中已经默认有该配置,无需手动配置。
编译JSX语法的包为:@babel/preset-react。
问题:什么是 Babel?
Babel是一个工具链,主要用于将采用ECMAScript 2015+ 语法编写的代码 转换为向后兼容的JavaScript语法,以便能运行在当前和旧版本的浏览器或其他环境中。
作用:
- 语法转换
- 通过 Polyfill 方式在目标环境中添加缺失的特性(通过第三方 polyfill 模块,例如 core-js,实现)
- 源码转换 (codemods)
JSX 与 React
Babel用于转换JSX语法
安装React preset
npm install --save-dev @babel/preset-react
并将 @babel/preset-react 添加到你的 Babel 配置文件中。
想深入了解babel请移驾
1.5 注意点
- React元素使用驼峰命名法
- 特殊属性名:class -> className 、 for -> htmlFor 、 tabindex -> tabIndex
如果写错的话 控制台会提示
- 如果标签没有子节点,可以用 /> 来结束。(jsx写法)
- 推荐:使用小括号包裹JSX 从而避免JS的自动插入分号陷阱。
const dv = (
<div> Hello JSX </div>
)
2. JSX中使用Javascript表达式
2.1 嵌入JS表达式
- 数据存储在JS中
- 语法: {javascript表达式}
- 注意:语法中是 单大括号
const name = "jack";
const div = (
<div>姓名:{name}</div>
)
2.2 注意点
- 单大括号中可以使用任意的Javascript表达式
<p>{1}</p>
<p>{"ssss"}</p>
<p>{1+7}</p>
<p>{2>5?'大于':'小于等于'}
const sayHi = ()=> 'Hi~'
<p>{sayHi()}</p>
- JSX自身也是JS表达式
注意:JS中的对象是一个例外,一般指挥出现在style属性中
{dv:"sss"} // 不正确
const h1 = <h1>I am JSX</h1>
const div = (
<div>{h1}</div>
)
- 不能在{ }中出现语句 (if for等 )
{if(true){}}
{for(var i=0;i<10;i++){}}
3. JSX的条件渲染
场景:loading效果
条件渲染:根据条件渲染特定的JSX结构。 有三种方式 如下:
- if else
// ES6 中模块化语法
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
/**
* 条件渲染
*/
const isLoading = false;
const loadData = ()=>{
if(isLoading){
return <div>loading....</div>
}
return <div>加载完成</div>
}
const title = (
<h1>
{loadData()}
</h1>
)
ReactDOM.render(title,document.getElementById('root'))
- 三元表达式
const loadData = ()=>{
return isLoading ? (<div>loading.....</div>):(<div>加载完成</div>)
// 小括号不是必须的 只是为了看着更明了
}
- 逻辑与
const loadData = ()=>{
return isLoading && (<div>loading.....</div>)
}
4. JSX的列表渲染
如果要渲染一组数据,应该使用map()方法
// ES6 中模块化语法
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
/**
* 条件渲染
*/
const songs = [
{id:1,name:'adv'},
{id:2,name:'sdf'},
{id:3,name:'dfs'},
]
const title = (
<ul>
{
songs.map((item,index)=>{
return(
<li key={index}>{item.name}</li>
) // 需要有返回值 因为是标签 需要使用小括号包上
}
)
}
</ul>
)
ReactDOM.render(title,document.getElementById('root'))
问题一:箭头函数return
上面的map也可写成:
songs.map((item,index)=>
<li key={index}>{item.name}</li>
)
- 函数体
简写体:只需要一个表达式,并附加一个隐式的返回值
var func = x => x * x;
块体:必须明确return语句
var func = (x,y)=>{return x + y}
- 换行
在参数和箭头之间不能换行
var func = ()
=> 1;
// SyntaxError: expected expression, got '=>'
但是在 => 之后换行 或者用 ( )、{ }来实现换行
var func = (a,b,c) =>(
1
);
var func = (a,b,c) => {
return 1
}
var func = (
a,
b,
c
)=>1;
问题二:map()函数的参数
map(映射)即原数组被“映射”成新的数组 。为一个回调函数,数组中的每个元素都会执行这个函数。
- map 不会对空数组检测
- map返回新数组,不会改变原数组
三个参数
function(currentValue,index,arr)
- currentValue 必填 当前元素
- index 可选 当前元素的索引
- arr 可选 当前元素所属数组对象
问题三: 遍历生成的元素 key必须做到唯一
5. JSX的样式处理
5.1 行内样式 style
<h1 style={{color:'red'}}>
</h1>
不推荐使用,因为使样式和结构代码过于耦合
5.2 类名 className(推荐)
先引入css文件(scss文件也可以)
import './index.css';
<h1 className="title">
JSX
</h1>