React重新渲染的触发机制及其优化策略

> 在`CSS`中，我们经常需要用到线条来作为分隔符，装饰元素，或者实现一些效果。但是，`CSS`中的最小单位是`1px`，也就是一个像素。如果我们想要画一条更细的线，比如`0.5px`，该怎么办呢？




这是我之前面试遇到过的一个问题，当时只想到一种实现方式，通过`CSS`的缩放属性`scale`。今天我们使用三种方式来实现一下。

这些方法都让我们实现这个需求，但是它们各有优缺点，需要根据不同的场景和需求来选择合适的方法。下面，我们就来介绍几种常用的方法，给出必要的代码示例和原理讲解，以及不同实现方式的优缺点。

## 使用缩放（scale）变换

这种方法的思路是先画一条`1px`的线，然后用`CSS`的`transform`属性来对线条进行缩放（`scale`）变换，使其宽度或高度变为原来的一半，从而达到`0.5px`的效果。例如：

```js
/* 画一条水平方向的0.5px线 */
.line {
  width: 100%;
  height: 1px;
  background: black;
  transform: scaleY(0.5); /* 缩放高度为原来的一半 */
}

/* 画一条垂直方向的0.5px线 */
.line {
  width: 1px;
  height: 100%;
  background: black;
  transform: scaleX(0.5); /* 缩放宽度为原来的一半 */
}
```
这种方法的优点是比较简单易用，不需要额外的元素或者复杂的计算。但是，这种方法也有一些缺点，例如：

- 缩放变换会影响元素的定位和布局，可能导致元素位置偏移或者重叠。
- 缩放变换会导致元素失去像素对齐，可能导致元素模糊或者锯齿化。
- 缩放变换会影响元素的子元素和伪元素，可能导致意外的结果或者不一致性。

## 使用透明度或颜色混合

这种方法的思路是利用人眼对颜色和透明度的感知，来制造出线条比实际更细的视觉效果。我们可以通过调整线条颜色和背景颜色之间的对比度或者透明度，来让线条看起来更细。例如：

```js
/* 使用透明度 */
.line {
  width: 100%;
  height: 1px;
  background: rgba(0,0,0,0.5); /* 使用半透明的黑色 */
}

/* 使用颜色混合 */
.line {
  width: 100%;
  height: 1px;
  background: #ccc; /* 使用接近白色背景的灰色 */
}
```
这种方法的优点是不会影响元素的定位和布局，也不会影响元素的子元素和伪元素。但是，这种方法也有一些缺点，例如：

- 这种方法并不是真正地画出了`0.5px`的线，而只是视觉上的效果。如果背景颜色发生变化，或者用户放大了页面，效果可能就会失效或者不明显。
- 这种方法需要根据背景颜色来调整线条颜色或者透明度，可能需要额外的计算或者工具。

## 使用边框或阴影

这种方法的思路是利用`CSS`中提供的边框或阴影属性来代替线条本身。我们可以通过设置边框或阴影的宽度或偏移量，来实现`0.5px`的效果。例如：

```js
/* 使用边框 */
.line {
  width: 100%;
  height: 0; /* 将高度设为0，只显示边框 */
  border-top: 0.5px solid black; /* 使用0.5px的上边框 */
}

/* 使用阴影 */
.line {
  width: 100%;
  height: 1px;
  background: transparent; /* 将背景设为透明，只显示阴影 */
  box-shadow: 0 -0.5px 0 black; /* 使用向上偏移0.5px的阴影 */
}
```

这种方法的优点是可以比较精确地控制线条的宽度和位置，也不会影响元素的子元素和伪元素。但是，这种方法也有一些缺点，例如：

- 这种方法需要额外的元素或者属性来实现线条，可能增加`HTML`或者`CSS`的复杂度。
- 这种方法可能不兼容一些旧的浏览器或者设备，可能导致线条显示不正常或者不一致。

## 总结

在`CSS`中，画一条`0.5px`的线并不是一件容易的事情，因为`CSS`中的最小单位是`1px`。但是，我们可以通过一些方法来实现这个需求，但是它们各有优缺点，需要根据不同的场景和需求来选择合适的方法。

我们介绍了三种常用的方法，分别是使用缩放变换，使用透明度或颜色混合，以及使用边框或阴影。我们给出了必要的代码示例和原理讲解，以及不同实现方式的优缺点，综合来看，第一种缩放的实现方式可能是大家最容易想到也是最实用的方式。

如何画一条0.5px的线？

> `Map`和`Object`都是`JavaScript`中常用的数据结构，它们都可以用来存储键值对（`key-value pairs`）。但是，它们之间也有一些重要的区别，了解这些区别可以帮助我们选择更合适的数据结构来满足我们的需求。




## Object的特点

`Object`是`JavaScript`中最基本的数据类型之一，它可以用来表示任何事物。我们可以通过字面量（`literal`）的方式来创建一个`Object`，例如：

```js
let obj = {
  name: "Alice",
  age: 25,
  hobbies: ["reading", "writing", "coding"]
};
```

`Object`的键（`key`）必须是字符串（`string`）或者符号（`symbol`），而值（`value`）可以是任意类型。我们可以通过点（`.`）或者方括号（`[]`）来访问或者修改`Object`的属性（`property`），例如：

```js
console.log(obj.name); // Alice
console.log(obj["age"]); // 25
obj.hobbies.push("singing"); // add a new element to the hobbies array
```

`Object`有一些内置的方法（`method`），例如`Object.keys()`，`Object.values()`，`Object.entries()`等，可以用来获取`Object`的键，值或者键值对数组。例如

```js
console.log(Object.keys(obj)); // ["name", "age", "hobbies"]
console.log(Object.values(obj)); // ["Alice", 25, ["reading", "writing", "coding", "singing"]]
console.log(Object.entries(obj)); // [["name", "Alice"], ["age", 25], ["hobbies", ["reading", "writing", "coding", "singing"]]]
```

`Object`的优点是简单易用，灵活多变，可以用来模拟各种复杂的数据结构。但是，`Object`也有一些缺点，例如：

- `Object`的键是无序的，不能保证遍历的顺序。
- `Object`不能有效地存储非字符串或非符号类型的键，例如数字，布尔值，对象等。如果使用这些类型作为键，它们会被自动转换为字符串。
- `Object`不能防止键名冲突，如果有两个相同的键，后面的值会覆盖前面的值。
- `Object`不能直接获取键值对的数量，需要使用`Object.keys().length`或者其他方法来计算。
- `Object`继承了原型链（`prototype`）上的属性和方法，这可能会导致意外的结果或者安全问题。

## Map的特点

`Map`是`ES6`中新增的一种数据结构，它也可以用来存储键值对。我们可以通过`new Map()`来创建一个`Map`，然后通过`set()`方法来添加键值对，例如：

```js
let map = new Map();
map.set("name", "Alice");
map.set("age", 25);
map.set("hobbies", ["reading", "writing", "coding"]);
```

`Map`的键和值可以是任意类型，不会被自动转换。我们可以通过`get()`方法来访问或者修改`Map`中的值，例如：

```js
console.log(map.get("name")); // Alice
console.log(map.get("age")); // 25
map.get("hobbies").push("singing"); // add a new element to the hobbies array
```

`Map`也有一些内置的方法，例如`keys()`，`values()`，`entries()`等，可以用来获取`Map`中的键，值或者键值对迭代器（`iterator`）。例如：

```js
console.log(map.keys()); // MapIterator {"name", "age", "hobbies"}
console.log(map.values()); // MapIterator {"Alice", 25, ["reading", "writing", "coding", "singing"]}
console.log(map.entries()); // MapIterator {["name", "Alice"], ["age", 25], ["hobbies", ["reading", "writing", "coding", "singing"]]}
```

`Map`的优点是更加强大和灵活，可以解决一些`Object`无法解决或者不方便解决的问题。例如：

- `Map`的键是有序的，可以保证遍历的顺序。
- `Map`可以有效地存储任意类型的键，不会发生类型转换或者键名冲突。
- `Map`可以直接获取键值对的数量，通过`size`属性即可。
- `Map`没有继承原型链上的属性和方法，更加安全和纯净。

## Map和Object的比较

`Map`和`Object`都有各自的优缺点，没有绝对的好坏。我们应该根据不同的场景和需求来选择合适的数据结构。一般来说，如果我们需要以下的特性，我们可以考虑使用`Map`：

- 需要保证键的顺序
- 需要使用非字符串或非符号类型的键
- 需要频繁地添加或删除键值对
- 需要直接获取键值对的数量

如果我们不需要以上的特性，或者需要以下的特性，我们可以考虑使用`Object`：

- 需要使用字面量的方式来创建数据结构
- 需要使用点或者方括号来访问或修改属性
- 需要使用原型链上的属性和方法

## 总结

`Map`和`Object`是`JavaScript`中常用的数据结构，它们都可以用来存储键值对。但是，它们之间也有一些重要的区别，了解这些区别可以帮助我们选择更合适的数据结构来满足我们的需求。

`Map`是`ES6`中新增的一种数据结构，它更加强大和灵活，可以解决一些`Object`无法解决或者不方便解决的问题。`Object`是`JavaScript`中最基本的数据类型之一，它简单易用，灵活多变，可以用来模拟各种复杂的数据结构。

我们应该根据不同的场景和需求来选择合适的数据结构，以提高我们的编码效率和质量。

Map和Object：如何根据需求选择键值对数据结构

> 幸存者偏差（`survivorship bias`）是一种认知偏差，指的是我们倾向于关注成功的案例，而忽视失败的案例，从而导致我们对事物的判断和决策出现偏差。这种偏差不仅存在于个人层面，也存在于社会层面，会给我们带来很多问题。那么，我们如何避免幸存者偏差呢？本文将从以下几个方面进行探讨：




## 常见案例
在我们的生活中，幸存者偏差的案例数不胜数，可能你不知道【幸存者偏差】这个名词，但是你一定遇到、感受、听说过这些案例：

- 在探险或旅行时，我们可能会听到一些人分享他们如何在危险的环境中生存下的故事，但很少听到那些没有生存下来的人的故事。这就可能让我们低估了探险或旅行的风险，从而忽视了安全的重要性。

- 在购买商品或服务时，我们可能会受到一些用户或客户的好评或推荐的影响，但很少注意到那些不满意或退货的用户或客户的反馈。这就可能让我们高估了商品或服务的质量和价值，从而忽视了其它的选择或评价标准。

- 在做满意度调查时，我们可能会倾向于收集和分析那些愿意回答问卷或参与访谈的人的意见，但很少考虑那些不愿意回答问卷或参与访谈的人的原因。这就可能让我们忽略了一些不满意或不关于的人群，从而导致了样本偏差。

- 在选择职业或教育时，我们可能会受到一些没有上过大学却成功创业或成名的人的影响，比如马克·扎克伯格、史蒂夫·乔布斯、比尔·盖茨等。但我们可能没有意识到，这些人只是少数例外，而大多数没有上过大学的人并没有取得同样的成功。这就可能让我们高估了自己不上大学也能成功的概率，而低估了大学教育对于职业发展和社会竞争力的作用。

- 在诊断疾病时，我们可能会倾向于关注那些有明显症状或体征的患者，但很少注意到那些没有明显症状或体征的患者。这就可能让我们忽略了一些潜在或隐匿的疾病，而导致了漏诊或误诊。

- 在追求一些高度竞争或受欢迎的职业时，比如演员、歌手、运动员等，我们可能会受到一些成功者的鼓舞或启发，但很少了解那些努力却没有成功者的挫折或困境。这就可能让我们高估了自己能够成功的机会，而忽视了自己需要付出的代价和牺牲。

以上这些例子都说明了幸存者偏差会让我们忽略一些重要的信息和因素，从而影响我们的认知和决策。这是在我们生活中非常常见的一种认知偏差。

## 个人层面的幸存者偏差

在个人层面，我们经常听到一些成功人士的励志故事，但很少了解那些付出了同样努力却没有成功的人的经历。这就可能让我们过分乐观地认为，只要努力就能成功，而忽略了运气、环境、机会等其他因素的影响。

这种幸存者偏差会让我们对成功的原因产生错误的归因，认为成功是由某些特定的因素决定的，而忽视了其他可能更重要的因素。这样就可能导致我们在追求自己的目标时，缺乏对自身和外部环境的客观评估和调整，从而陷入盲目和固执的状态。

## 社会层面的幸存者偏差

在社会层面，我们常常看到一些成功的企业或产品，但很少注意到那些失败的企业或产品。这就可能让我们对某些行业或领域产生过高或过低的期待和评价，而忽视了他们所面临的竞争压力或消费者需求变化。

这种幸存者偏差会让我们对失败的教训缺乏重视，认为失败是由于某些特定的错误或缺陷导致的，而忽视了其他可能更普遍的问题或风险。这样就可能导致我们在创造或选择某些产品或服务时，缺乏对市场和用户的敏感和洞察，从而陷入盲从和浪费的状态。

## 如何避免幸存者偏差

那么，我们如何避免幸存者偏差呢？一个有效的方法是，在分析任何一个案例时，都要尽量考虑到所有可能的情况和结果，并且给予每一种情况和结果相应的权重和概率。这样就可以避免只看到一面，而忽视了另一面。

例如，在学习某个成功人士的故事时，不要只看他是如何成功的，还要看他有多少竞争对手、他面临多大的困难、他有多大的运气等等，并且想象一下如果他没有这些条件或遇到其他情况，他是否还能成功。同样，在分析某个失败的企业或产品时，不要只看他们是如何失败的，还要看他们有多少优势、他们有多少创新、他们有多少潜力等等，并且想象一下如果他们有其他机会或采取其他策略，他们是否还能失败。

## 总结

总之，幸存者偏差是一种常见而危险的认知偏差，它会让我们对事物产生片面和不全面的认识。我们应该通过多角度和全面地分析事物，来避免这种偏差，并且从成功和失败中都汲取有益的经验和教训。只有这样，我们才能更好地认识自己和世界，更好地实现自己的目标和价值。

幸存者偏差：一种让你看不清事实的认知盲点

> 深拷贝是一种复制对象的方法，它可以保证复制出来的对象和原对象完全独立，不会相互影响。本文将从底层原理分析深拷贝和浅拷贝的区别，探讨深拷贝的必要性和应用场景，以及用`JavaScript`语言实现不同情况下的深拷贝方法，包括考虑和不考虑循环引用的情况。





## 什么是深拷贝
在`JavaScript`中，对象是一种复杂的数据类型，它是由多个属性和方法组成的。当我们需要复制一个对象时，有两种方式：浅拷贝和深拷贝。

浅拷贝是指只复制对象的第一层属性，也就是说，如果对象的属性值是基本类型（如字符串、数字、布尔值等），那么就直接复制这个值；如果对象的属性值是引用类型（如数组、对象、函数等），那么就只复制这个引用，也就是内存地址。

这样，浅拷贝出来的对象和原对象共享同一个引用类型的属性，如果修改其中一个对象的引用类型属性，另一个对象也会受到影响。

深拷贝是指完全复制对象的所有层级属性，也就是说，无论对象的属性值是基本类型还是引用类型，都会重新创建一个新的值，并赋给新对象。这样，深拷贝出来的对象和原对象完全独立，不会相互影响。

## 为什么需要深拷贝

深拷贝的必要性主要在于保证数据的安全性和一致性。在一些场景中，我们需要对一个对象进行修改，但又不想影响到原对象，或者我们需要保存一个对象的历史状态，以便于后续的比较或回滚。这些情况下，如果使用浅拷贝，就会导致数据的混乱或丢失。而使用深拷贝，则可以避免这些问题。

例如，在开发一个网页游戏时，我们可能需要保存玩家的角色信息，包括姓名、等级、装备、技能等。如果我们想要给玩家提供一个试穿装备的功能，让玩家可以预览不同装备对角色属性的影响，但又不改变玩家当前的装备状态，那么我们就需要对玩家的角色信息进行深拷贝，然后在新对象上进行修改。如果使用浅拷贝，则会导致玩家当前的装备被修改，影响游戏体验。

## 如何实现深拷贝
实现深拷贝有多种方法，其中最常见和最简单的一种是使用递归。递归是指函数自己调用自己的过程，它可以处理任意层级的嵌套结构。递归实现深拷贝的基本思路是：

- 判断输入是否是一个对象（包括数组、函数等），如果不是，则直接返回输入；
- 创建一个新对象（或数组），用于存放复制出来的属性；
- 遍历输入对象的所有属性（或元素），对每个属性（或元素）进行以下操作：
  - 如果属性值（或元素）是一个对象（或数组），则递归调用自身函数，传入该属性值（或元素），并将返回值赋给新对象（或数组）对应的属性（或元素）；
  - 如果属性值（或元素）不是一个对象（或数组），则直接复制该属性值（或元素），并赋给新对象（或数组）对应的属性（或元素）；
- 返回新对象（或数组）。

用`JavaScript`语言实现的递归深拷贝函数如下：

```js
function deepClone(obj) {
  // 判断输入是否是一个对象
  if (typeof obj !== 'object' || obj === null) {
    // 如果不是，则直接返回输入
    return obj;
  }
  // 创建一个新对象（或数组）
  let result = Array.isArray(obj) ? [] : {};
  // 遍历输入对象的所有属性（或元素）
  for (let key in obj) {
    // 如果属性值（或元素）是一个对象（或数组）
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      // 则递归调用自身函数，传入该属性值（或元素），并将返回值赋给新对象（或数组）对应的属性（或元素）
      result[key] = deepClone(obj[key]);
    } else {
      // 如果属性值（或元素）不是一个对象（或数组），则直接复制该属性值（或元素），并赋给新对象（或数组）对应的属性（或元素）
      result[key] = obj[key];
    }
  }
  // 返回新对象（或数组）
  return result;
}
```

除了递归，还有其他的实现深拷贝的方法，例如：

- 使用`JSON.stringify()`和`JSON.parse()`方法，将对象转换为字符串，再转换为新对象。这种方法简单易用，但是有一些局限性，比如不能处理函数、循环引用、日期、正则表达式等特殊类型的数据；
- 使用`Object.assign()`方法，将源对象的所有可枚举属性复制到目标对象。这种方法可以处理一层的深拷贝，但是如果源对象的属性值是引用类型，那么还是会出现浅拷贝的问题；
- 使用展开运算符(`...`)，将源对象的所有可枚举属性展开，然后赋给目标对象。这种方法和`Object.assign()`方法类似，也只能处理一层的深拷贝。

## 如何处理循环引用

循环引用是指一个对象的属性值引用了自身或者自身的某个祖先对象。例如：

```js
let a = {};
let b = {};
a.b = b;
b.a = a;
```

这种情况下，如果使用递归深拷贝函数，就会出现无限递归的问题，导致栈溢出错误。为了解决这个问题，我们需要在递归过程中记录已经访问过的对象，并判断当前对象是否已经被访问过。

如果已经被访问过，则直接返回之前复制出来的对象，而不再进行递归。这样就可以避免无限递归的问题。

为了实现这个功能，我们需要使用一个额外的数据结构来存储已经访问过的对象和它们对应的复制出来的对象。

在本文中，我们使用`Map`来实现，因为`Map`可以使用任意类型的值作为键，并且有更好的性能。

修改后的考虑循环引用的递归深拷贝函数如下：

```javascript
function deepClone(obj, map = new Map()) {
  // 判断输入是否是一个对象
  if (typeof obj !== 'object' || obj === null) {
    // 如果不是，则直接返回输入
    return obj;
  }
  // 判断当前对象是否已经被访问过
  if (map.has(obj)) {
    // 如果已经被访问过，则直接返回之前复制出来的对象
    return map.get(obj);
  }
  // 创建一个新对象（或数组） 
  let result = Array.isArray(obj) ? [] : {}; 
  // 将当前对象和新对象存入Map中 
  map.set(obj, result); 
  // 遍历输入对象的所有属性（或元素） 
  for (let key in obj) { 
  // 如果属性值（或元素）是一个对象（或数组） 
  if (typeof obj[key] === 'object' && obj[key] !== null) { 
      // 则递归调用自身函数，传入该属性值（或元素）和Map，并将返回值赋给新对象（或数组）对应的属性（或元素） 
      result[key] = deepClone(obj[key], map); 
  } else { 
      // 如果属性值（或元素）不是一个对象（或数组），则直接复制该属性值（或元素），并赋给新对象（或数组）对应的属性（或元素） 
      result[key] = obj[key]; 
      } 
  } 
      // 返回新对象（或数组） 
      return result; 
  }
  
```

## 总结

深拷贝是一种复制对象的方法，它可以保证复制出来的对象和原对象完全独立，不会相互影响。深拷贝和浅拷贝的区别在于是否复制引用类型的属性值。

深拷贝的必要性在于保证数据的安全性和一致性。实现深拷贝有多种方法，其中最常见和最简单的一种是使用递归。

递归实现深拷贝需要注意处理循环引用的问题，可以使用一个额外的数据结构来记录已经访问过的对象。

深入理解深拷贝：原理与实现

欢迎来到我的博客，这里是我分享前端、web3、理财、互联网等方面的知识和心得的地方。我是一名热爱编程的前端程序员，我希望通过我的博客能够帮助更多的人学习和进步。在这里，你可以找到最新最实用的前端技术教程，了解最前沿的互联网动态和趋势，掌握最有效的理财方法和策略。我也会不定期地发布一些个人项目和作品，展示我的创意和能力。如果你对我的博客感兴趣，欢迎你留言、评论、收藏、关注，也可以通过邮箱或社交媒体与我联系，交流学习和合作。谢谢你的支持！