React系列七：Reducer 和 Context
Reducer 可以整合组件的状态更新逻辑。Context 可以将信息深入传递给其他组件。你可以组合使用它们来共同管理一个复杂页面的状态。 这里的tasksReducer是我们用于处理tasks的方法，如新增，删除，修改等。 initialTasks是初始化tasks的默认值。 tasks是任务列表、dispatch用于调用tasksReducer来操作tasks。 接下来需要将tasks和dis…
阅读全文Latest Posts
文章
记录技术、生活和一些阶段性的想法。
React系列六：Context
通常来说，你会通过 props 将信息从父组件传递到子组件。但是，如果你必须通过许多中间组件向下传递 props，或是在你应用中的许多组件需要相同的信息，传递 props 会变的十分冗长和不便。Context 允许父组件向其下层无论多深的任何组件提供信息，而无需通过 props 显式传递。 这里的1是默认值 这里需要用useContext来使用LevelContext 注意！这个示例还不能运行。因…
阅读全文React系列五：状态管理
React 控制 UI 的方式是声明式的。你不必直接控制 UI 的各个部分，只需要声明组件可以处于的不同状态，并根据用户的输入在它们之间切换。这与设计师对 UI 的思考方式很相似。 通俗的说就是根据一个状态来判断展示哪一个组件。 React推荐使用尽量简单但是意义明确的state： 1. 如果两个 state 变量总是一起更新，请考虑将它们合并为一个。 2. 仔细选择你的 state 变量，以避免…
阅读全文React系列四：对象更新
state 中可以保存任意类型的 JavaScript 值，包括对象。但是，你不应该直接修改存放在 React state 中的对象。相反，当你想要更新一个对象时，你需要创建一个新的对象（或者将其拷贝一份），然后将 state 更新为此对象。 在 React 中，状态是不可变的（immutable）。React 不会深入比较对象内部的属性变化，而是通过引用是否变化 来判断是否需要更新组件。 Vue…
阅读全文React系列三：React事件
事件处理函数还将捕获任何来自子组件的事件。通常，我们会说事件会沿着树向上“冒泡”或“传播”：它从事件发生的地方开始，然后沿着树向上传播。 如果你点击任一按钮，它自身的 onClick 将首先执行，然后父级 <div 的 onClick 会接着执行。 在 React 中所有事件都会传播，除了 onScroll，它仅适用于你附加到的 JSX 标签。 事件处理函数接收一个 事件对象 作为唯一的参数。按照…
阅读全文React系列二：基础概念
React 组件是常规的 JavaScript 函数，但 组件的名称必须以大写字母开头，否则它们将无法运行！ 在看到标签时，小写为html标签，大写为自己的组件。 返回语句可以全写在一行上，但是，如果你的标签和 return 关键字不在同一行，则必须把它包裹在一对括号中。没有括号包裹的话，任何在 return 下一行的代码都 将被忽略！不过也要注意：()是(),<\</是<\</，括号只是用于包裹…
阅读全文React系列一：准备入门
在上一章我们学习了基础的react语法，现在我们了解一下企业级开发 安装一个构建工具，如 Vite、Parcel 或 rsbuild。这些构建工具提供了打包和运行源代码的功能，提供本地开发的开发服务器，以及部署应用到生产服务器的构建命令。 使用命令npm create vite\@latest，选择React模板，即可创建React应用。 路由决定了当用户访问特定 URL 时显示的内容或页面。你需…
阅读全文React查缺补漏
当在 React 中调用 useState 提供的 状态更新函数时，React 会触发该组件的重新渲染。也就是说组件的主体部分会再次执行。 Vue在改变某个变量的状态时不会重新执行onMounted。虽然Vue 和 React 都是响应式框架，但它们的更新机制不同。React 是“重新执行组件函数”，而 Vue 是“依赖追踪+局部更新”。 重新渲染 ≠ 重新操作 DOM，React 重新渲染组件时…
阅读全文React机制总览
今天开坑React，本来想看原版文档，奈何英语水平有限。加之最近也许要面试，故先使用中文文档。 本文采用了与vue对照的方式进行对比学习，如果是熟悉vue的人学习起来会更好理解。如果你不了解vue，推荐去看官方文档，也很容易理解：[链接] 按照我的一点印像，react使用js函数return一个html标签，这就是react的组件 React 组件必须以大写字母开头，而 HTML 标签则必须是小写…
阅读全文shell clash
分享一个好东西，可以在Linux上使用节点 原文：[链接]
阅读全文YAGNI
YAGNI 是“You Ain't Gonna Need It”的缩写，意思是“你不会需要它”。它是一种软件开发原则，来自于极限编程（Extreme Programming），主张程序员应该在明确需求出现后才实现相应功能。这个原则的核心是避免过度设计和预先实现不必要的功能，从而降低复杂性，提高代码的可维护性。 YAGNI 强调在现实需求出现之前，不要实现任何功能，即使你认为将来可能会需要。这样可以…
阅读全文20. tsconfig.json文件和tsc命令
这两部分配置内容繁多，推荐查看原文： 1. tsconfig.json文件 2. tsc命令
阅读全文19.注释指令
TypeScript 接受一些注释指令。所谓“注释指令”，指的是采用 JS 双斜杠注释的形式，向编译器发出的命令。 // @ts-nocheck告诉编译器不对当前脚本进行类型检查，可以用于 TypeScript 脚本，也可以用于 JavaScript 脚本。 上面示例中，document.getElementById(123)存在类型错误，但是编译器不对该脚本进行类型检查，所以不会报错。 如果一个…
阅读全文18. 类型工具
TypeScript 提供了一些内置的类型工具，用来方便地处理各种类型，以及生成新的类型。 这些类型工具都是语言本身提供的，可以直接使用。 Awaited<Type用来取出 Promise 的返回值类型，适合用在描述then()方法和 await 命令的参数类型。 上面示例中，Awaited<Type会返回 Promise 的返回值类型（string）。 它也可以返回多重 Promise 的返回值…
阅读全文17. 类型映射
映射（mapping）指的是，将一种类型按照映射规则，转换成另一种类型，通常用于对象类型。 举例来说，现有一个类型A和另一个类型B。 上面示例中，这两个类型的属性结构是一样的，但是属性的类型不一样。如果属性数量多的话，逐个写起来就很麻烦。 使用类型映射，就可以从类型A得到类型B。 上面示例中，类型B采用了属性名索引的写法，\[prop in keyof A]表示依次得到类型A的所有属性名，然后将每…
阅读全文16. TypeScript 类型运算符
TypeScript 提供强大的类型运算能力，可以使用各种类型运算符，对已有的类型进行计算，得到新类型。 注意区分typeof，typeof是用于查看一个变量的类型 keyof 是一个单目运算符，接受一个对象类型作为参数，返回该对象的所有键名组成的联合类型。 由于 JavaScript 对象的键名只有三种类型，所以对于任意对象的键名的联合类型就是string|number|symbol。 keyo…
阅读全文15. declare 关键字与d.ts
declare 是 TypeScript 中的关键字，用于声明变量、函数、类、模块或类型的存在，但不做具体实现。它的作用是告诉 TypeScript 编译器：“这个东西已经存在了，在别的地方定义了，你就不要再报错了”。 declare 关键字用来告诉编译器，某个类型是存在的，可以在当前文件中使用。 它的主要作用，就是让当前文件可以使用其他文件声明的类型。举例来说，自己的脚本使用外部库定义的函数，编…
阅读全文14. 装饰器
装饰器（Decorator）是一种语法结构，用来在定义时修改类（class）的行为。 在语法上，装饰器有如下几个特征。 （1）第一个字符（或者说前缀）是@，后面是一个表达式。 （2）@后面的表达式，必须是一个函数（或者执行后可以得到一个函数）。 （3）这个函数接受所修饰对象的一些相关值作为参数。 （4）这个函数要么不返回值，要么返回一个新对象取代所修饰的目标对象。 举例来说，有一个函数Inject…
阅读全文13. 命名空间namespace
namespace 用来建立一个容器，内部的所有变量和函数，都必须在这个容器里面使用。 上面示例中，命名空间Utils里面定义了一个函数isString()，它只能在Utils里面使用，如果用于外部就会报错。 如果要在命名空间以外使用内部成员，就必须为该成员加上export前缀，表示对外输出该成员。 编译后命名空间Utility变成了 JavaScript 的一个对象，凡是export的内部成员，…
阅读全文12. 模块
任何包含 import 或 export 语句的文件，就是一个模块（module）。相应地，如果文件不包含 export 语句，就是一个全局的脚本文件。 模块本身就是一个作用域，不属于全局作用域。模块内部的变量、函数、类只在内部可见，对于模块外部是不可见的。暴露给外部的接口，必须用 export 命令声明；如果其他文件要使用模块的接口，必须用 import 命令来输入。 如果一个文件不包含 exp…
阅读全文