liuqinh2s' blog

行内元素和块级元素

发表于 2022-12-08 更新于 2026-08-17 分类于编程本文字数： 741 阅读时长 ≈ 3 分钟

行内元素和块级元素算是 css 中最基础，也是最重要的部分了。需要彻底掌握才行。

比如，width 和 height 跟父节点和子节点的关系到底是什么，默认是什么？行内元素的 padding 和 margin 能设置吗？

发表于 2022-11-30 更新于 2026-08-17 分类于投资本文字数： 259 阅读时长 ≈ 1 分钟

发表于 2022-11-29 更新于 2026-08-17 分类于编程本文字数： 367 阅读时长 ≈ 1 分钟

这题是数位 dp 类型的题，遍历对象有两个：

问题规模是 N 的位数。

状态转移方程是这样思考得出：

在遍历 digits 时，设当前 digits 的值为 digits[i]：

如果 digits[i]比 N 的第 j 位的数字小，则低位的数字就可以任意，那么由 digits[i]开头所产生的组合数是：digits.length**(j-1)。
如果 digits[i]等于 N 的第 j 位数字，则还要继续对比第 j-1 位才知道能否凑出一个比 N 小的，也即递归，缩小问题规模。产生组合：dp[j-1]
如果 digits[i]大于 N 的第 j 位数字，则后面低位的数字不管是什么，都已经不能产生小于 N 的组合了。产生组合：0

把每个 digits[i]对应的结果加起来，就是当前问题规模（问题规模为：j）的答案。

状态转移方程：

if (digits[i] < N[j]) {
  dp[j] += digits.length ** (j - 1);
} else if (digits[i] == N[j]) {
  dp[j] += dp[j - 1];
}

发表于 2022-11-06 更新于 2026-08-17 分类于编程本文字数： 2k 阅读时长 ≈ 7 分钟

如果一个函数只是接收输入，然后输出，没有影响外部（比如修改外部变量），那么我们就说这个函数没有副作用，反之就是有副作用。理想的情况下，我们希望所有的函数都很纯粹，没有副作用。

举个例子：

1
2
3

function effect() {
  document.body.innerText = "hello vue3";
}

发表于 2022-08-15 更新于 2026-08-17 分类于编程本文字数： 456 阅读时长 ≈ 2 分钟

每次面试问到了解 React Diff 算法吗？我都不知道说什么，这次总结一下，该怎么说。

首先我们应该思考为什么要有这么一个东西，也就是它的目的是什么？

React Diff 算法的目的是优化真实 DOM 更新，手段是搞一套虚拟 DOM 树，并对比新旧虚拟 DOM 树的差异，然后只对有虚拟 DOM 树中有差异的地方去更新真实 DOM。

时间复杂度：通过启发式策略（如：同层比较、Key 标识）将传统 $$O(n^3)$$ 复杂度降至 O(n)

Tree Diff（树层比较）
- 仅比较同一层级节点，跨层级移动会触发销毁和重建（如：节点从父节点 A 移动到节点 B，视为删除后重建），疑问？假如父节点 A、B 是同层级，那么它们的子节点（A+B）算同一层级吗
- 优化建议：避免频繁跨层级操作，可用 CSS 隐藏代替 DOM 移除
Component Diff（组件比较）
- 相同类型组件：递归比较子节点，触发更新生命周期（如：componentDidUpdate）
- 不同类型组件：直接销毁旧组件（触发 componentWillUnmount）并创建新组件（触发 componentDidMount）
Element Diff（元素比较）
- 节点类型不同：直接替换整个节点（如<div>变为<span>）
- 节点类型相同：仅更新属性和子节点（如修改 className 或文本内容）