你不定积分没加CのBlog

React 的核心概念就是组件。组件像是将 UI 拆分得到的独立的可重复使用的小模块，其能够接收属性的传入，并返回描述屏幕上展示内容的 React 元素。React 支持两种组件，一种是类组件，一种是函数组件。但是目前 React 推荐使用函数组件，官方文档也是以函数组件为主，并且函数组件比类组件更加简洁，代码量更少，尤其是在引入 Hooks 之后，避免了类组件中使用生命周期方法的繁琐。因此这个文档也只讲函数组件，不讲类组件

什么是 React ？

在 2024 年的今天，我们的浏览器仍然采用最基本的 html + CSS + JavaScript 构建页面，但是我们可以很明显的感觉到，编写原生三件套代码是比较复杂的。并且在 Web 项目规模庞大和设备多样性越发丰富的今天，代码的可维护性、开发效率、跨平台开发、性能等因素都会影响到我们对开发工具的选择。因此人们想到了一种方式，可不可以先编写一些简化的、高效率的代码，然后用他们生成 html + CSS + JavaScript 并运行在浏览器上。就像是我们不必编写汇编语言，写 C 语言即可构建可执行文件。就这样， React 诞生了

维基百科这样定义 React ：React 是一个前端 JavaScript 工具库，用于基于 UI 组件构建用户界面

当前常用的工具（库或框架）不止有 React ，比如 Vue、Angular 等都是常见的构建前端页面的工具

MDN 这样描述 React ：React 不是一个框架——它的应用甚至不局限于 Web 开发，它可以与其他库一起使用以渲染到特定环境。例如， React Native 可用于构建移动应用程序； React 360 可用于构建虚拟现实应用程序……

React 是一门令人惊叹的前端技术，其创新性的设计理念和强大的功能使其成为现代 Web 开发的领军者。通过引入虚拟 DOM 、组件化开发和单向数据流等概念， React 不仅提高了应用的性能和可维护性，还让开发者在构建复杂用户界面时拥有更高的灵活性和控制力。 JSX 语法的引入使 UI 代码更加直观和易读，而庞大而活跃的社区生态系统则为开发者提供了丰富的工具和支持。同时， React 的跨平台特性使其在移动开发领域也大放异彩，成为 React Native 的基石。 React 可以被视为一个跨时代的前端开发工具和框架。其引入了许多创新性的概念和技术，对前端开发的方式和效率产生了深远的影响

什么是 TypeScript？

简而言之，TypeScript 是 JavaScript 的超集，它继承了 JavaScript 所有的语法，并且可以编译为纯 JavaScript 。它的目的并不是创造一种全新语言，而是增强 JavaScript 的功能，使其更适合多人合作的企业级项目。

既然是超集，那么它超在哪里呢？

我们知道， JavaScript 的变量是没有类型的，无论用 var, let, const 哪一个关键字，都无法指定变量的类型，因此我们称 JS 是一个“弱类型”的语言。例如下面的代码，在 JavaScript 中是完全合法的

1
2
3

let a = 1;
let str = "34";
let res = a + str; // res = "134"

这对我们来说是非常不好的，是反直觉的，正常人的思维应该是，一个数字和字符串怎么可能可以相加呢？这应该报错！

TypeScript 最大的特点就是引入了类型系统，这样就可以在编译为 JavaScript 代码之前由编译器进行类型检查。在这样的条件下，TypeScript 中的变量在声明的时候就可以指定类型，编译器在将 TypeScript 代码编译为 JavaScript 代码的时候会进行类型检查，若有不符合类型声明的情况则会报错：

1
2
3
4
5

const fun = (name: string): void => {
    console.log("Hello, " + name);
};

fun(2); // Error!

上面的 fun 函数要求传入一个 string 类型的值，且返回类型为 void 但是我们调用的时候却传入了一个数字 2，这显然是不符合函数参数要求的，因此 TypeScript 编译器会报错

TypeScript 有着静态类型检查，具有类型系统，可以在开发时捕获许多常见的错误。通过类型检查，可以在编码阶段就发现潜在的问题，减少运行时错误。

但是，在实际开发中，选择 TypeScript 还是 JavaScript 取决于项目的具体需求和团队的实际情况。首先，对于大型项目、需要长期维护和多人协作的项目，TypeScript 的优势尤为明显。它提供了类型检查和工具支持，可以提高代码的可靠性和团队的效率。而对于小型项目或快速原型开发，JavaScript 可能更适合快速迭代和开发的需求。其次，如果团队已经熟悉 JavaScript 生态系统，并且没有特别需要 TypeScript 的需求，继续使用 JavaScript 也是一个合理的选择。要考虑团队成员的技术水平和学习成本。

库和框架

库

库是一系列预先定义好的数据结构和函数或类的集合，程序员可以通过调用这些代码实现功能。简单来说就是库为我们提供了很多封装好的函数，看起来比较零散，但使用起来更灵活，只用取里面我们需要的某部分，再自己实现项目中其他部分得功能

库就类似于 C 语言中的头文件，比如 <stdio.h> 头文件提供了一系列常用的功能：printf()、scanf()、gets()、fopen() 等

在前端开发中，使用库可以简化开发流程，提高开发效率。例如，jQuery 提供了简化 DOM 操作的语法，减少了编写繁琐代码的需要。React 通过虚拟 DOM 和声明式 UI ，便于快速构建用户界面

如果需要在网页中使用 JavaScript 库，可以去网上下载库文件，放在网页的同一目录下，再到script标签中引入。或者不下载通过通过链接在<script>标签中引用该库即可：

1

<script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>

或者在代码中通过 require 或者 import 中引入库。在现代的前端开发中，通常推荐使用 import 来进行模块导入，特别是在使用现代 JavaScript 特性的项目中。这主要与现代 JavaScript 的发展趋势和语言特性有关

import 是 ES6 新引入的关键字，支持按需导入，而不需要导入整个模块。同时import 的语法也比 require 更直观清晰，更符合现代变成风格

随着 JavaScript 生态的发展，越来越多的库和工具采用了 ES6 模块系统，使用 import 能够更好地与这些现代化的工具和库进行集成。

Web 开发概况

Web 开发是指创建和维护网站、客户端程序、服务器与其他 Web 应用程序的过程。它包括使用不同的编程语言和技术来编写、测试和部署 Web 应用程序，以满足特定的业务需求和用户需求

通过 Web 开发技术，开发者能够设计实现诸多满足不同需求场景的应用程序，包括但不限于：网站开发、Android/IOS/Harmony OS NEXT 移动端应用程序、微信小程序、桌面应用、群聊机器人、游戏、浏览器插件、3D 建模、高性能服务器、分布式应用、虚拟现实应用、区块链、物联网设备……