### 彪哥

爱好前端

- 核心概念

  - JSX简介
    - 什么是JSX？
    - 为什么使用JSX？
    - 在 JSX 中嵌入表达式
    - JSX 也是一个表达式
    - JSX 特定属性
    - 使用 JSX 指定子元素
    - JSX 防止注入攻击
    - JSX 表示对象
  - 元素渲染
  - 组件&Props
  - State&生命周期
  - 事件处理
  - 条件渲染
  - 列表&Key
  - 表单
  - 状态提升 (共享状态)
  - 组合vs继承
  - React哲学

- 高级指引

- Hook

- 案例演示

- 《React》笔记
- 核心概念

heBody
2021-03-24
目录

# JSX简介

# # 01. JSX简介

## # 什么是JSX？

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

1

以类似模板语法的方式描述UI的一种语法。它是JS的语法糖，本质上也是JS。可以在其中使用变量或表达式、函数等。

## # 为什么使用JSX？

将标记与逻辑 共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离
(opens new window)。

React不强制使用JSX，但在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。

## # 在 JSX 中嵌入表达式

    const element = <h1>Hello, {2+2}</h1>;

1

在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式
(opens new window)。

## # JSX 也是一个表达式

在编译之后，JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象

> 可以把JSX当初一个对象来对待，可以使用它赋值给变量、当参数输入函数、返回JSX等。

## # JSX 特定属性

通过使用引号，来将属性值指定为字符串字面量：

    const element = <div tabIndex="0"></div>;

1

> JSX中的属性名使用camelCase(小驼峰)命名。如上面例子中的`tabIndex`

使用大括号，来在属性值中插入一个 JavaScript 表达式：

    const element = <img src={user.avatarUrl}></img>;

1

## # 使用 JSX 指定子元素

JSX 标签里能够包含很多子元素:

    const element = (
      <div>
        <h1>Hello!</h1>
        <h2>Good to see you here.</h2>
      </div>
    );

1
2
3
4
5
6

## # JSX 防止注入攻击

React DOM 在渲染所有输入内容之前，默认会进行转义
(opens new window)。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS（cross-site-scripting, 跨站脚本）
(opens new window)攻击。

## # JSX 表示对象

Babel 会把 JSX 转译成一个名为 `React.createElement()` 函数调用。

以下两种示例代码完全等效：

    const element = (
      <h1 className="greeting">
        Hello, world!
      </h1>
    );

    const element = React.createElement(
      'h1', // 标签名
      {className: 'greeting'}, // 属性对象
      'Hello, world!' // 内容
    );

1
2
3
4
5
6
7
8
9
10
11
编辑
(opens new window)
#React
上次更新: 2022/12/14, 19:36:42
元素渲染

元素渲染→

最近更新

  01
Git修改分支名
08-11

  02
CSS给table的tbody添加滚动条
06-29

  03
我做了一个手写春联小网页，祝大家虎年暴富 原创
01-28

更多文章>

Copyright © 2016-2022 Hesb | MIT License

- 跟随系统
- 浅色模式
- 深色模式
- 阅读模式