为什么React的Diff算法不采用Vue的双端对比算法

Created2021-05-03

前言

都说“双端对比算法”，那么双端对比算法，到底是怎么样的呢？跟 React 中的 Diff 算法又有什么不同呢？

要了解这些，我们先了解 React 中的 Diff 算法，然后再了解 Vue3 中的 Diff 算法，最后讲一下 Vue2 中的 Diff 算法，才能去比较一下他们的区别。

最后讲一下为什么 Vue 中不需要使用 Fiber 架构。

Read More

immer.js在Redux项目中的实践

Created2021-04-01

前言

Immer 是 mobx 的作者写的一个 immutable 库，核心实现是利用 ES6 的 proxy，几乎以最小的成本实现了 js 的不可变数据结构，简单易用、体量小巧、设计巧妙，满足了我们对 JS 不可变数据结构的需求。

无奈网络上完善的文档实在太少，所以自己写了一份，本篇文章以贴近实战的思路和流程，对 Immer 进行了全面的讲解。

数据处理存在的问题

先定义一个初始对象，供后面例子使用：

Read More

常见手写题大汇总

Created2020-11-03

1.防抖 debounce

防抖的原理：你尽管触发事件，但是我一定在事件触发的 n 秒之后才执行，如果你在触发事件 n 秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒之后在执行。

1
2
3
4
5
6
7
8
9
10
11
function debounce(func, delay) {
  let timer;
  return function (...args) {
    if (timer) clearTimeout(timer);

    timer = setTimeout(() => {
      func.apply(this, args);
      timer = null;
    }, delay);
  };
}
Read More

关于 event loop 的面试题

Created2020-09-30

题目 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
console.log("1");
setTimeout(function () {
  console.log("2");
  process.nextTick(function () {
    console.log("3");
  });
  new Promise(function (resolve) {
    console.log("4");
    resolve();
  }).then(function () {
    console.log("5");
  });
});

process.nextTick(function () {
  console.log("6");
});

new Promise(function (resolve) {
  console.log("7");
  resolve();
}).then(function () {
  console.log("8");
});

setTimeout(function () {
  console.log("9");
  process.nextTick(function () {
    console.log("10");
  });
  new Promise(function (resolve) {
    console.log("11");
    resolve();
  }).then(function () {
    console.log("12");
  });
});

结果 1 7 6 8 2 4 3 5 9 11 10 12

Read More

从一道 promise 题目来深入理解执行过程

Created2020-09-21

要解决的题目如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Promise.resolve()
  .then(() => {
    console.log(0);
    return Promise.resolve(4);
  })
  .then((res) => {
    console.log(res);
  });

Promise.resolve()
  .then(() => {
    console.log(1);
  })
  .then(() => {
    console.log(2);
  })
  .then(() => {
    console.log(3);
  })
  .then(() => {
    console.log(5);
  })
  .then(() => {
    console.log(6);
  });

输出结果按顺序为 0,1,2,3,4,5,6

Read More

for...in为什么需要hasOwnProperty判断？

Created2017-03-11

我们经常使用 for…in 循环对象输出键和值

如：

1
2
3
4
5
const obj = { a: 1, b: 2 };
for (let key in obj) {
  console.log(key); // => a b
  console.log(obj[key]); // => 1 2
}

但在某些编辑器（如 vscode）中输入 for in，会自动生成如下代码：

1
2
3
4
5
6
for (const key in object) {
  if (Object.hasOwnProperty.call(object, key)) {
    const element = object[key];
    // todo ..
  }
}

每次都会想这句是不是多余的呢？

Read More

万能清除浮动法

Created2015-12-27
1
2
3
4
5
6
7
8
.clear_fix:after {
  content: ""; /* 添加内容 */
  clear: both; /* 清楚两侧浮动 */
  display: block; /* 转换元素类型为块元素 */
  height: 0;
  overflow: hidden; /* 溢出隐藏属性 */
  visibility: hidden; /* 隐藏属性 */
}