Keys's stuff Keys's stuff
首页
  • JavaScript
  • CSS
  • 技术文档
  • GitHub
  • Nodejs
  • NPM
  • 博客搭建
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
  • 常用工具 (opens new window)
  • 索引

    • 分类
    • 标签
    • 归档
  • 网站工具参考
  • 常用类库组件
  • HTML参考手册 (opens new window)
  • 后端博客参考 (opens new window)
  • ChatGPT入门介绍 (opens new window)
  • JavaScript 教程 (opens new window)
  • ES6教程 (opens new window)
  • VUE (opens new window)
  • GIT (opens new window)
  • 学习笔记

    • 《JavaScript高级程序设计》
    • 《Vue》
    • 《React》
    • 《TypeScript 从零实现 axios》
    • TypeScript
    • JS设计模式总结
关于
GitHub (opens new window)

Keys Xu

音乐的力量
首页
  • JavaScript
  • CSS
  • 技术文档
  • GitHub
  • Nodejs
  • NPM
  • 博客搭建
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
  • 常用工具 (opens new window)
  • 索引

    • 分类
    • 标签
    • 归档
  • 网站工具参考
  • 常用类库组件
  • HTML参考手册 (opens new window)
  • 后端博客参考 (opens new window)
  • ChatGPT入门介绍 (opens new window)
  • JavaScript 教程 (opens new window)
  • ES6教程 (opens new window)
  • VUE (opens new window)
  • GIT (opens new window)
  • 学习笔记

    • 《JavaScript高级程序设计》
    • 《Vue》
    • 《React》
    • 《TypeScript 从零实现 axios》
    • TypeScript
    • JS设计模式总结
关于
GitHub (opens new window)
  • Vue》笔记

  • TypeScript 从零实现 axios》

  • React》笔记

    • 核心概念

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

    • Hook

    • 案例演示

  • Git》学习笔记

  • 学习笔记

  • oldNote
  • React》笔记
  • 核心概念
keys
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/02/22, 09:46:22
引用 ts-axios 库
元素渲染

← 引用 ts-axios 库 元素渲染→

最近更新
01
2023工作展望xx
02-13
02
2023工作展望
02-13
03
程序员技术指南
01-18
更多文章>
Theme by Vdoing | Copyright © 2019-2023 Keys Xu | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式