React入门三： JSX | 8月更文挑战
React入门三： JSX | 8月更文挑战
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>