React-JSX

JSX 的基本使用

createElement() 的问题

1.繁琐不简洁

2.不直观，无法一眼看出所描述的结构

3.不优雅，用户体验不爽

createElement()缺点

JSX 简介

1	const element = <h1>Hello, world!</h1>;

这个有趣的标签语法既不是字符串也不是 HTML。

它被称为 JSX（JavaScript XML），是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。

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

JSX 是 React 的核心内容

使用步骤

使用 JSX 语法创建 react 元素

1 2	// 使用JSX 语法创建 react 元素 const element = <h1>Hello, world!</h1>;

使用 ReactDOM.render() 方法渲染react元素到页面中

1 2	// 渲染创建好的 React元素 ReactDOM.render(element,root);

虚拟DOM

React提供了一些API来创建一种“特别”的一般js对象

var element = React.createElement(‘h1',{id:'mytitle'},'hello')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

  上面创建的就是一个简单的虚拟DOM对象
  

虚拟DOM对象最终会被React转换为真实的DOM

我们编码时基本只需要操作react虚拟DOM相关数据，react会转换为真实DOM变化而更新界面

### JSX

1. 全称: JavaScript XML

2. react定义的一种类似于XML的JS扩展yy:XML+JS

3. 作用:用来创建react虚拟DOM(元素)对象

   > var ele = <h1>Hello JSX!</h1>
   >
   > 注意1:它不是字符串，也不是HTML/XML标签
   >
   > 注意2:它最终产生的标签就是一个JS对象

4. 标签名任意:HTML标签或其他标签

5. 标签属性任意:HTML标签属性或其他

6. 基本语法规则

   > 遇到<开头的代码,以标签语法解析:html同名标签转换为html标签元素,其他标签需要特别解析
   >
   > 遇到{开头的代码,以js语法解析:标签钟js代码必须用{}包含

7. babel.js的作用

   > 浏览器不能直接解析jsx代码，需要babel转译为js代码才能被浏览器识别运行
   >
   > 只要用了JSX，都要加上type=“test/babel"，声明需要babel处理
   >
   > 编译 JSX 语法的包为：@babel/preset-react

### 渲染虚拟DOM(元素)

1. 语法:`ReactDOM.render(virtualDOM,containerDOM)`
2. 作用:将虚拟DOM元素渲染到页面中的真实容器DOM显示
3. 参数说明:
   - 参数一:纯js或jsx创建的虚拟dom对象
   - 参数二:用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

###  创建虚拟DOM的两种方式

1. 纯JS(一般不用)

   ```js
   React.createElement('h1',{id:'mytitle'},'title')

JSX:
1
<h1 id='myTitle'>{title}</h1>

注意点

1.React 元素的属性名使用驼峰命名法

2.特殊属性名：class–>className、for–>htmlFor、tabindex->tabIndex

3.没有子节点的React元素可以用/>结束

4.推荐：使用小括号包裹JSX，从而避免js中的自动插入分号陷阱。

1
2
3

const div = (
<div>hello</div>
)

JSX 中使用 JavaScript 表达式

嵌入 JS 表达式

数据存储在 JS中

const name = 'jack'
const dv =(
 <div>你好，我叫??</>
 )

语法：{javaScript表达式}

注意：语法中是单大括号，不是双大括号！

const name = 'jack'
const dv =(
 <div>你好，我叫{name}</>
 )

JSX 的条件渲染

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

JSX 的条件渲染

/**
 * 条件渲染
 */
let isLoding = true;
const loadData = () => {
  if (isLoding) return (<div>loading....</div>);
  return (<div>加载完成</div>);

  // 三元运算符
  // return isLoding === true ? (<div>loading....</div>) : (<div>加载完成</div>);

  // 逻辑与运算符
  // return isLoding === true && (<div>loading....</div>);
}

JSX 列表渲染

如果要渲染一组数据，应该使用数据的map()
注意：渲染列表时应该添加key属性，key 属性的值要保证唯一
原则：map()遍历谁，就要给谁添加key属性

注意：尽量避免使用索引号作为key,对于index作为key我们是不推荐的，除非你能够保证他们不会发生变化。

const songs = [
 {id:1,name:'痴心绝对'},
 {id:2,name:'像我这样的人'},
 {id:3,name:'南山南'},
]

const list = (
   <ul>
   {songs.map(item=><li>{item.name}</li>)}
   </ul>
)

JSX 的样式处理

行内样式 style

1
2
3

<h1 style={{color:'red',background:'skyblue'}}>
     JSX行内样式
</h1>

类名 className（推荐）

<div className='el' >
    <button onClick={resv()}>反转</button>
    <ul>
      {songs.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  </div>

总结

1.JSX 是React的核心内容

2.JSX 表示在JS代码中写HTML结构，是React声明式的体现

3.使用JSX 配合嵌入式JS 表达式、条件渲染、列表渲染，可以描述任意UI 结构

4.推荐使用 className 的方式给JSX添加样式

5.React 完全利用JS 语言自身能力来编写UI，而不是造轮增强 HTML 功能

React-JSX

JSX 的基本使用

createElement() 的问题

JSX 简介

使用步骤

虚拟DOM

注意点

JSX 中使用 JavaScript 表达式

嵌入 JS 表达式

JSX 的条件渲染

JSX 列表渲染

JSX 的样式处理

行内样式 style

类名 className（推荐）

总结

目录