前端问题总结 - day5

什么是属性选择器?

属性和值选择器

把包含标题（title）的所有元素变为蓝色：[title] { color:blue; }

属性和值选择器

改变了标题title='runoob'元素的边框样式: [title=runoob] { border:5px solid green; }

属性和值的选择器 - 多值

属性值包含指定值的title属性的元素样式，使用（~）分隔属性和值（只要属性中包含这个字符串就行）：[title~=hello] { color:blue; }

属性值包含指定值开头的lang属性的元素样式，使用（|）分隔属性和值（属性值的开头必须为指定值才满足）:

[lang|=en] { color:blue; }

注： IE7和IE8需声明!DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。

错误的依赖导致UseEffect无限渲染？

当UseEffect依赖钩子外部的对象时，可能会导致组件的无线重复渲染，哪怕对象的值并不发生变化。

根本原因是 React 在重新渲染组件时，会比较依赖项列表中的值是否发生变化。

• 如果是基本类型（如数字、字符串等），React 会比较它们的值是否相等来确定是否需要重新渲染。

• 如果是引用类型（如对象、数组等），React 则会比较它们的引用是否相等，而不是比较其内容。

• 在 React 中，状态的更新是不可变的，这意味着每当你更新状态时，都会创建一个新的状态副本，而不是修改原始状态。对于基本类型的值，这通常不会成为问题，因为它们的值直接比较即可。但是对于引用类型的值，即使其内容没有发生变化，但是每次都创建了一个新的对象或数组，它们的引用也会发生变化，从而导致 React 认为它们发生了变化，触发重新渲染。

解决办法

• 保持使用UseEffect函数是使用基本类型作为依赖项的良好习惯。

• 使用 useMemo 来缓存对象，避免组件每次更新时重新更新对象的引用。