Alien's Blog

这份笔记是我个人学习前端开发的笔记，笔记覆盖大部分的前端知识。这份学习笔记能让我对学到的知识更加深刻，为进一步深入学习和实践项目打下坚实的基础。同时也是写给路过的前端初学者们，希望这份笔记也能够帮助到你的学习。

useReducer作用：和 useState 的作用类似，用来管理相对复杂的状态数据 案例：编写一个能够加减的函数 定义一个reducer函数（根据不同的action返回不同的新状态） 在组件中调用useReducer，并传入reducer函数和状态的初始值 事件发生时，通过dispatch函数分派一个action对象（通知reducer要返回哪个新状态并渲染UI） 12345678910111213141516171819202122232425262728import { useReducer } from 'react'// 1. 定义reducer函数，根据不同的action返回不同的新状态function reducer(state, action) { switch (action.type) { case 'INC': return state + 1 case 'DEC': return state - 1 default ...

使用 CRA 初始化项目环境 创建项目 1npx create-react-app react01 按照业务规范整理项目目录 文件夹 作用 apis 接口 assets 静态资源 components 通用组件 pages 页面级组件 router 路由 store Redux状态 utils 工具函数 SCSS 预处理器实现步骤 安装解析 sass 的包：npm i sass -D 创建全局样式文件：index.scss 123456body { margin: 0; div { color: blue; }} 组件库 AntDAnt Design 是由蚂蚁金服出品的社区使用最广的React PC端组件库，内置了常用的现成组件，可以帮助我们快速开发 PC管理后台项目 Ant Design 实现步骤 安装 antd 组件库：npm i antd 导入 Button 组件 在 Login 页面渲染 Button 组件进行测试 配置别名路径项目背景：在业务开发过程中文件夹的嵌套层 ...

类型声明文件：用来为已存在的 JS 库提供类型信息 TS 中的两种文件类型 .ts文件 既包含类型信息有可执行代码 可以被编译为.js文件，然后执行 用途是编写程序代码的地方 .d.ts文件 只包含类型信息的类型声明文件 不会生成.js文件，仅用于提供类型信息 用途是为 JS 提供类型信息 .ts 是 implementation（代码实现文件）；.d.ts 是 declaration（类型声明文件）。 如果要为 JS 库提供类型信息，要使用 .d.ts 文件。 类型声明文件的使用使用已有的类型声明文件 内置类型声明文件：TS 为 JS 运行时可用的所有标准化内置 API 都提供了声明文件。 比如，在使用数组时，数组所有方法都会有相应的代码提示以及类型信息： 查看 forEach 方法的类型声明，在 VSCode 中会自动跳转到 lib.es5.d.ts 类型声明文件中。 像 window、document 等 BOM、DOM API 也都有相应的类型声明（lib.dom.d.ts）。 第三方库的类型声明文件：目前，几乎所有常用的第三方库都有相应的类型声明文件。 ...

class 类TypeScript 有 class 关键字，并为其添加了类型注解和其他语法 TS 中的类型推论可以得到 Human 类的实例对象 p 的类型是 Human TS 中的 class，不仅提供了 class 的语法功能，也作为一种类型存在 声明成员 age，类型为 number（没有初始值） 声明成员 gender，没有类型注解，但是设置了初始值，TS 推论为 string 类型 12345class Human { age: number gender = 'man' // gender: string = 'man'} 构造函数： 成员初始化（例如 age: number）后，才可以通过this来访问实例对象 需要为构造函数指定类型注解，否则会被定义为 any 类型；构造函数不需要返回值类型 123456789class Person { age: number gender: string constructor(age: number, gender: string) ...

TypeScript 介绍TypeScript（简称：TS）是 JavaScript 的超集（JS 有的 TS 都有）。 TypeScript = Type + JavaScript（在 JS 基础之上，为 JS 添加了类型支持）。 12345// TypeScript 有明确的类型let age1: number = 18// JavaScript 无明确的类型let age2 = 18 TypeScript 是微软开发的开源编程语言，可以在任何运行 JavaScript 的地方运行。 TS 属于静态类型的编程语言，即先编译检查再执行；JS 属于动态类型，即执行时检查。 TypeScript 相比 JS 的优势： 更早（写代码的同时）发现错误，减少找 Bug、改 Bug 时间，提升开发效率。 程序中任何位置的代码都有代码提示，随时随地的安全感，增强了开发体验。 强大的类型系统提升了代码的可维护性，使得重构代码更加容易。 支持最新的 ECMAScript 语法，优先体验最新的语法，让你走在前端技术的最前沿。 TS 类型推断机制，不需要在代码中的每个地方都显示标 ...

创建路由开发环境12# 安装最新的ReactRouter包npm i react-router-dom 简单的路由实例在 index.js 中，实现一个简单的路由实例 123456789101112131415161718192021222324252627282930import React from 'react';import ReactDOM from 'react-dom/client';import App from './App';import store from './store'import { Provider } from 'react-redux';// 导入router组件import { createBrowserRouter, RouterProvider } from 'react-router-dom';// 创建router实例对象并配置路由对应关系const router = creat ...

Redux 介绍Redux 是 React 最常用的集中状态管理工具，类似于 Vue 中的 Pinia（Vuex），可以独立于框架运行 作用：通过集中管理的方式管理应用的状态 为什么要使用Redux？ 独立于组件，无视组件之间的层级关系，简化通信问题 单项数据流清晰，易于定位bug 调试工具配套良好，方便调试 使用步骤： 定义一个 reducer 函数 （根据当前想要做的修改返回一个新的状态） 使用 createStore 方法传入 reducer 函数 生成一个 store 实例对象 使用 store 实例的 subscribe 方法 订阅数据的变化（数据一旦变化，可以得到通知） 使用 store 实例的 dispatch 方法提交 action 对象 触发数据变化（告诉 reducer 你想怎么改数据） 使用 store 实例的 getState 方法 获取最新的状态数据更新到视图中 实现一个计数器： 123456789101112131415161718192021222324252627282930313233343536373839404142<!DOCTY ...

开发环境搭建create-react-app 是一个快速创建 React 开发环境的工具，底层由 Webpack 构件，封装了配置细节 执行命令： 1npx create-react-app react-test01 npx：Node.js 工具命令，查找并执行后续的包命令 create-react-app：核心包，用于创建 React 项目 react-test01：React 项目的名称（自定义） 创建项目的更多方法：https://zh-hans.react.dev/learn/start-a-new-react-project 使用命令运行项目： 1npm start 成功进入项目页面 项目目录： App.js：项目根组件 index.js：项目入口 JSXJSX 是 JavaScript 和 XML （HTML）的缩写，表示在 JS 代码中编写 HTML 模块结构，它是 React 中编写 UI 模块的方式 12345678910111213const message = 'this is message' function App( ...

pnpm 包管理器-创建项目pnpm 包管理器 优势：比同类工具快 2倍 左右，同时节省磁盘空间 安装方式： 1$ npm install -g pnpm 创建项目： 1$ pnpm create vue ESLint & prettier 配置代码风格环境同步： 安装插件 ESlint， 开启保持自动修复 禁用了插件 Prettier，并关闭保存自动格式化 12345678// ESlint插件 + Vscode配置 实现自动格式化修复// 当保存的时候，eslint自动帮我们修复错误"editor.codeActionsOnSave": { "source.fixAll": "explicit"},// 保存代码，不自动格式化"editor.formatOnSave": false,"workbench.iconTheme": "vscode-icons" 配置文件 .eslintrc.cjs： prettier 风 ...