weixin_44828588的博客

1.TS全套教程，基础到提升。2. TS 动画讲解。

要注意的是，这里的有些代码假定最新版本的 JavaScript（通常称为“ES6”，ECMAScript 的第六个版本 —— ECMAScript 是 JS 语言规范的官方名称）中引入的功能是存在的。==和===之间的不同通常被描述为，==检查值的等价性而===检查值和类型两者的等价性。描述它们的合理方式是，==在允许强制转换的条件下检查值的等价性，而===是在不允许强制转换的条件下检查值的等价性；因为这些值实际上是通过引用持有的，==和===比较都将简单地检查这个引用是否相同，而不是它们底层的值。

对于多数Web 开发任务来说，选择Object 还是Map 只是个人偏好问题，影响不大。不过，对于在乎内存和性能的开发者来说，对象和映射之间确实存在显著的差别。

输入：beginWord = "hit", endWord = "cog", wordList = ["hot","dot","dog","lot","log","cog"]输出：[["hit","hot","dot","dog","cog"],["hit","hot","lot","log","cog"]]解释：存在 2 种最短的转换序列："hit" -> "hot" -> "dot" -> "dog" -> "cog""hit" -> "hot" -> "lot" -> "log" -> "cog"

TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。TypeScript 提供最新的和不断发展的 JavaScript 特性，包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性，比如异步功能和 Decorators，以帮助建立健壮的组件。

完整的Typescript，由简单到复杂，复杂重点类型操作、联合类型等通过动画和照片形式展示，更容易理解。丰富题目：分位简单，中等、苦难，有简到难。在线编辑器，用于练习，极其方便。

格式化是让代码整洁的一个简单却又重要手段（我在项目组见过，有多年工作经验的老司机也未对代码格式化），但是，格式定义却没有什么硬性规定。争论那种格式更好都是徒劳，浪费时间，在格式化上这点上，最重要的就是要统一，项目或公司级的统一格式规范。确实，很多国内外公司都有自己的代码格式规范。试想，如果一个接口是一个大而全的抽象，那么实现这个接口就会成为一种负担，因为需要实现一些不需要的方法。这个原则的定义是：“如果 S 是 T 的一个子类型，那么类型 T 的对象可以被替换为类型 S 的对象，而不会改变程序的正确性”。

可能因为我们一直关注需求和模型，代码往往被忽略。虽然现在有很多低代码平台可以批量生产代码，但是代码层面的抽象和其呈现的细节是无法被忽视的。我们可能都碰到过类的情况：项目初期迅速迭代，随着项目日渐复杂，维护迭代成本逐渐变大，对A处代码的修改都会影响C和D处代码，甚至你不知道会不会影响其他地方代码。随着混乱增加，团队的生产力下降，开发效率降低，开发成本回增高。为了解决以上因“糟糕”代码带来的各种问题，在读完《Clean Code》后总结一下代码整洁之道，核心围绕“净”。

曾经是否想要一张图片精确地适配某个尺寸大小、但同时还要保持它的长宽比、避免出现图片被压扁的情况？在很长一段时间内，使用 CSS 很难做到这一点。但现在object-fit属性就能解决这个问题了！除了这三个值，object-fitcontaincoverfillnonescale-downcontainnone下面有一张图片， 它的原始尺寸是：宽 1200px，高 674px。我们设置成一半大小显示，即 600px * 337px。如果在不改变高度的情况下，将宽度再设置为 300px。

正文。

本节介绍了 React 源码中,fiber构造循环阶段用于生成下级子节点的函数(函数中的算法被称为调和算法), 并演示了可迭代节点比较的图解示例. 该算法十分巧妙, 其核心逻辑把newChildren序列分为 2 步遍历, 先遍历公共序列, 再遍历非公共部分, 同时复用oldFiber序列中的节点....

由于react内部使用了和fiber两大树形结构, 所以有不少关于节点访问的逻辑.本节主要介绍了DFS的概念和它在react源码中的使用情况. 其中fiber树的DFS遍历, 涉及到的代码多, 分布广, 涵盖了reconciler阶段的大部分工作, 是reconciler阶段工作循环的核心流程.除了DFS之外, 源码中还有很多逻辑都是查找树中的节点(如: 向上查找父节点等). 对树形结构的遍历在源码中的比例很高, 了解这些算法技巧能够更好的理解react源码....

从架构上来讲,打通了从外部原生事件到内部fiber树的交互渠道, 使得react能够感知到浏览器提供的原生事件, 进而做出不同的响应, 修改fiber树, 变更视图等.监听原生事件: 对齐DOM元素和fiber元素收集listeners: 遍历fiber树, 收集所有监听本事件的listener函数.派发合成事件: 构造合成事件, 遍历listeners进行派发....

Context的实现思路还是比较清晰, 总体分为 2 步.在消费状态时,节点调用获取最新状态.在更新状态时, 由节点负责查找所有节点, 并设置消费节点的父路径上所有节点的, 保证消费节点可以得到更新.

本节分析了副作用Hook从创建到销毁的全部过程, 在react内部, 依靠和effect.tag实现了对effect的精准识别. 在commitRoot阶段, 对不同类型的effect进行处理, 先后调用和。

本节深入分析状态Hook即useState的内部原理, 从同步,异步更新理解了update对象的合并方式, 最终结果存储在供给function使用.

本节首先引入了官方文档上对于Hook的解释, 了解Hook的由来, 以及Hook相较于class的优势. 然后从fiber视角分析了fiber与hook的内在关系, 通过函数, 把Hook链表挂载到了之上. 利用fiber树内部的双缓冲技术, 实现了Hook从current到转移, 进而实现了Hook状态的持久化.

本节从fiber视角出发, 总结了fiber节点中可以影响最终渲染结果的 2 类属性(状态和副作用).并且归纳了class和function组件中, 直接或间接更改fiber属性的常用方式. 最后从fiber树构造和渲染的角度对class的生命周期函数与function的Hooks函数进行了比较.

本节分析了fiber 树渲染的处理过程, 从宏观上看fiber 树渲染位于reconciler 运作流程中的输出阶段, 是整个reconciler 运作流程的链路中最后一环(从输入到输出). 本节根据源码, 具体从渲染前, 渲染, 渲染后三个方面分解了函数. 其中最核心的渲染逻辑又分为了 3 个函数, 这 3 个函数共同处理了有副作用fiber节点, 并通过渲染器react-dom把最新的 DOM 对象渲染到界面上.

本节演示了更新阶段fiber树构造(对比更新)的全部过程, 跟踪了创建过程中内存引用的变化情况. 与初次构造最大的不同在于fiber节点是否可以复用, 其中bailout逻辑是fiber子树能否复用的判断依据.