李刚的学习专栏

024年度回顾 -- 在适应，在努力，在重新出发。2024 个人关键词：坚韧、破局。

类型断言是一种编译时的机制，它不会在运行时检查类型，而是告诉编译器按照指定的类型处理变量。类型守卫是一种运行时的机制，它通过检查来确保变量的类型，并根据检查结果改变类型信息。类型确认是一种更加灵活的机制，它指定一个对象必须满足某种类型的结构，但不会改变该对象的类型。在编写 TypeScript 代码时，推荐尽可能使用类型守卫，因为它们提供了运行时的安全性。类型断言应该谨慎使用，只在你完全确定变量类型的情况下使用，以避免运行时错误。

本文将详细介绍keyof和typeof运算符的基本概念、应用场景以及如何结合使用它们来提高代码的类型安全性。keyof运算符用于获取一个类型的所有键名（属性名）。typeof运算符用于获取一个变量的类型。

泛型（Generics）本质上是一种参数化类型。在定义时不指定具体数据类型，用一个或多个占位符（通常用字母「如TUV」）来表示类型参数；而在使用时指定具体的数据类型。return arg;上述函数返回值的类型与参数类型相关；可以接收任何类型的参数，并返回相同类型的值。指类型参数，可以将其理解为类型声明需要的变量，在调用时传入具体的参数类型。调用时提供具体类型string省略不写，TypeScript 通常可以在泛型调用中推断出预期的类型参数。

在 TypeScript 中，对象类型用于定义对象的形状（shape），即对象包含哪些属性以及这些属性的类型。对象类型可以是具体的，也可以是抽象的，用于类型检查和类型推断。或。🚎 接口interface：适合定义对象的形状，并且可以被扩展和实现，这使得它在面向对象编程中非常有用。🚃 类型别名type：更灵活，可以定义更复杂的类型，包括联合类型、交叉类型、字面量类型和映射类型。

TypeScript 是 JavaScript 的一个超集，添加了类型系统和编译期错误检查等功能 => 静态类型检查。类型指的是一组具有相同特征的值。静态类型系统描述了运行程序时的值的形状和行为。TypeScript 支持块级类型声明，即类型可以声明在代码块（用大括号表示）里面，只在当前代码块有效。

工作中遇到了这样场景：原工程 A 由于业务发展，衍生出了 B 工程，至此两个工程独立迭代。A 工程近期上线了一个功能，B 工程也希望具备该功能，需要研发同学做代码的同步。merge将两个或多个分支的历史合并在一起；cherry-pick允许开发者精确地选择和应用特定的提交到不同的分支。

如果组件的属性和状态是不可变的数据结构，可以显著简化Diff算法的复杂性：引用比较：每次更新都会产生一个完全新的对象，而不是修改原有对象，React可以简单地通过比较对象的引用，来确定数据是否发生了变化。如果两个对象的引用不同，那么肯定不同，这比深度比较数据结构的每个部分要快得多；结构共享：Immutable数据结构在进行更新时，只创建变动部分的新实例，而保留未变部分的引用。这意味着在Diff算法中，React能够迅速识别出哪些部分是完全相同的，从而跳过这些部分的比较，直接关注那些确实发生了变化的部分。

项目使用 npm 安装依赖可以正常运行，而使用 pnpm 安装依赖运行报错！使用 npm 安装，所有依赖都被提升到了 node_modules 下（npm@3之后的依赖扁平化，解决路径地狱）；使用 pnpm 安装，只有直接依赖（package.json dependences 中声明）安装在 node_modules 下，其他在 .pnpm（扁平化） 目录下。

水印是一种用于保护版权和识别内容的技术，通常用于图像、视频或文档中。它可以是文本、图像或两者的组合，通常半透明或以某种方式嵌入到内容中，使其不易被移除或篡改。静态水印易于实现，且不会影响页面的加载和渲染性能；但容易被移除，且不能动态调整文案（在应用系统中，水印往往是登录者信息）。动态水印可以根据用户行为或特定条件动态显示或隐藏水印

循环过程会产生多个 `` 组件实例，进而产生多个获取资源 `loadResources()` 的调用。加载资源是异步过程，`window.videojs` 资源加载完才会追加。解决思路：1. 将实例创建改成串行，确保第二个初始化时，第一个已经处理完毕（存在），这样 `window.videojs` 的判断可以生效。=> 可以解决，但不是最佳方案，整体页面渲染效率下降 2. 初始化多个 `` 实例（并行加载），确保资源只加载一份。=> 资源全局单例

当需要在组件树中深层传递参数以及需要在组件间复用相同的参数时，传递 props 就会变得很麻烦。Context 使组件向其下方的整个树提供信息，会穿过中间的任何组件。子组件可以通过某种方式“访问”到组件树中某处在其上层的数据。无需逐层透传，直接广播形式！需要的组件直接获取。

并发模式（Concurrent Mode）的一个关键特性是渲染可中断。React 18 之前，更新内容渲染的方式是通过一个单一的且不可中断的同步事务进行处理。同步渲染意味着，一旦开始渲染就无法中断，直到用户可以在屏幕上看到渲染结果。在并发渲染中，React 可以开始渲染一个更新，然后中途挂起，稍后又继续；甚至可能完全放弃一个正在进行的渲染。整个过程 UI 会保持一致。为了实现这一点，它会在整个 DOM 树被计算完毕前一直等待，完毕后再执行 DOM 变更。

性能优化的主要点：①减少DOM的渲染频次；②减少DOM的渲染范围；③非必要的内容延后处理。避免不必要的组件重新渲染，是提高程序性能的重要方式之一。

对于拥有许多状态更新逻辑的组件来说，过于分散的事件处理程序可能会令人不知所措。对于这种情况，可以将组件的所有状态更新逻辑整合到一个外部 Reducer 函数中。

React Fiber 是 Virtual DOM 的底层实现，它提供了一种新的调度机制来处理 Virtual DOM 的更新。Fiber 引擎使得 React 能够更细粒度地控制渲染过程。1. Virtual DOM：主要是一种优化技术，用于减少实际 DOM 操作的次数及范围，提高性能；2. Fiber：是一种新的协调引擎，旨在改善 React 的渲染性能、实现更好的并发控制，并支持增量渲染，从而提高 React 的响应能力。

React 16.8 版本引入了 Hooks ，可以在不使用 Class 的情况下使用 React 特性。Hooks 允许从函数组件 “hook into” React 状态和生命周期特性。Hooks 让我们根据代码所做的，而不是生命周期方法名称来分割代码。React 组件一直更像是函数，而 Hooks 则拥抱了函数。

随着 Vue、React 的演进，其各自框架的基本形态和功能已经很完备，最根本差异点逐渐演变成了框架开发者各自的理念差异，不同的理念让框架有了各自的设计模式和最佳实践。然而，对于使用者来说，搞懂其设计模式、沉淀其最佳实践、了解其基本原理，是掌握一门框架的捷径，也是衡量对其熟悉程度的标尺。Vue 更贴近传统前端开发方式，更符合人的直觉，更易上手更简单；React 让函数变得更加复杂，使用者有更大的控制权，更加灵活，从而优雅。

Effect 允许指定由渲染本身，而不是特定事件引起的副作用。React 组件中的两种逻辑类型：① 渲染逻辑代码 位于组件的顶层，接收 props 和 state，进行转换，返回屏幕上看到的 JSX，只计算不做其他任何事情；② 事件处理程序 嵌套在组件内部的函数，由特定的用户操作（如按钮点击）引起的”副作用“（改变了程序的状态）。实际开发过程中，还会遇到当进入页面时触发一些动作（如播放视频、日志发送、连接到聊天服务器等）。其①不能在渲染过程中发生，②也没有一个特定的事件（比如点击。

ref 是一种脱围机制，用于保留不用于渲染的值。同时，ref 是一个普通的 JavaScript 对象，具有一个名为 `current` 的属性，可以对其进行读取或设置。与 state 不同，设置 ref 的 `current` 值不会触发重新渲染**。**不要在渲染过程中读取或写入 `ref.current`。这使组件难以预测。