0%

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 的核心内容

使用步骤

  1. 使用 JSX 语法创建 react 元素

    1
    2
    // 使用JSX 语法创建 react 元素
    const element = <h1>Hello, world!</h1>;
  2. 使用 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')
  1. 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中

    1
    2
    3
    4
    const name = 'jack'
    const dv =(
    <div>你好,我叫??</>
    )
  • 语法:{javaScript表达式}

  • 注意:语法中是单大括号,不是双大括号!

    1
    2
    3
    4
    const name = 'jack'
    const dv =(
    <div>你好,我叫{name}</>
    )

JSX 的条件渲染

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

JSX 的条件渲染

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
* 条件渲染
*/
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我们是不推荐的,除非你能够保证他们不会发生变化。

    1
    2
    3
    4
    5
    const songs = [
    {id:1,name:'痴心绝对'},
    {id:2,name:'像我这样的人'},
    {id:3,name:'南山南'},
    ]
    1
    2
    3
    4
    5
    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(推荐)

1
2
3
4
5
6
<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 功能

谢谢老板