2024年最新React 基础篇（三）—— JSX，满满干货

计算机网络

• HTTP 缓存

• 你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

• HTTP 常用的请求方式，区别和用途？

• HTTPS 是什么？具体流程

• 三次握手和四次挥手

• 你对 TCP 滑动窗口有了解嘛？

• WebSocket与Ajax的区别

• 了解 WebSocket 嘛？

• HTTP 如何实现长连接？在什么时候会超时？

• TCP 如何保证有效传输及拥塞控制原理。

• TCP 协议怎么保证可靠的，UDP 为什么不可靠？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法

• 链表

• 字符串

• 数组问题

• 二叉树

• 排序算法

• 二分查找

• 动态规划

• BFS

• 栈

• DFS

• 回溯算法

  

在前面 Hello World 的例子中，细心的你会发现，我们在 App.js 中对外暴露了一个函数，然而，在这个函数我们竟然返回了一个 h1 标签，那么，这样的表达到底是 HTML 还是 JS 呢？

答案两者都不是，这种语法称为 JSX。

JSX 是一种用于描述 UI 的 JavaScript 扩展语法，通常，在 React 应用中使用这种语法来描述一个组件的 UI 。与其他框架一样，React 也是一个面向组件开发的框架，通过组件来将页面进行拆分并实现组件复用。React 认为，一个组件应该具备 UI 描述和数据。于是就有了 JSX，作为 UI 描述和数据的桥梁。

更加直白的说，JSX 就是将 HTML 和 JS 进行了结合，可以在 HTML 中写 JS 代码，也可以在 JS 代码中写 HTML。

在 JS 中使用 HTML 其实在前面 Hello World 的例子中都已经用过了，很简单，就是原样的使用。那么下面就来看看如何在 JS 中使用 HTML.

示例：

import React from ‘react’;

import ‘./App.css’;

//声明一个变量

const name = ‘jonas’

function App() {

return (

//在HTML标签体中，通过{JS表达式}来插入JS语法

Hello {name}

);

}

export default App;

需要注意的是，{} 中的内容只能是 JS 表达式，不能是语句！

上面例子中，在标签体内使用了 JS 表达式，然而，在标签的属性中，也可以通过同样的方式进行插入。

const name = ‘jonas’

const style = ‘my_class’

function App() {

return (

Hello {name}

);

}

刷新发现标题有了一个类名，虽然没有定义这个类的样式，但是这个类名确实被加上了。

需要注意的是，在 JSX 语法中，因为 class 是 JS 的一个关键字，所以使用了 className 来表示一个标签的类名。

JSX 对象

---

JSX 这种语法无法被浏览器引擎直接识别的，它需要被转译为浏览器可以识别的 JS。

然而这个转译的工作是由 Babel 完成的，它会把 JSX 转译为一个 React.createElement() 的函数调用。

示例：

计算机网络

• HTTP 缓存

• 你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

• HTTP 常用的请求方式，区别和用途？

• HTTPS 是什么？具体流程

• 三次握手和四次挥手

• 你对 TCP 滑动窗口有了解嘛？

• WebSocket与Ajax的区别

• 了解 WebSocket 嘛？

• HTTP 如何实现长连接？在什么时候会超时？

• TCP 如何保证有效传输及拥塞控制原理。

• TCP 协议怎么保证可靠的，UDP 为什么不可靠？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法

• 链表

• 字符串

• 数组问题

• 二叉树

• 排序算法

• 二分查找

• 动态规划

• BFS

• 栈

• DFS

• 回溯算法