一些知识点总结

css3大特性 层叠性（就近选择） 优先级 （important > 行内 > id >类选择器 >元素选择器 >继承或者通配符选择器） 继承性 （继承行高）

flex布局的属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
display：flex; 设置给父级，开启flex布局

flex-direction 设置主轴方向 row column

justify-content 设置主轴上子元素的排列方式 flex-start（默认值）：左对齐 flex-end：右对齐 center： 居中 space-between：两端对齐，项目之间的间隔都相等。space-around：每个项目两侧的间隔相等。

flex-wrap 设置子元素是否换行，默认是不换行，子元素会进行宽度缩小； nowrap | wrap

align-content 设置多行子元素在侧轴上的排列方式；

align-items 设置单行子元素在侧轴上的排列方式；

align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

css盒子模型
概念：html元素都是盒子
组成 ：content padding border margin
IE盒模型的width/height = content + border + padding
标准盒模型的width/height = content
通过box-sizing 可以修改盒子的模式
content-box
border-box（设置盒子的宽度 会内减掉border 和padding）

Position的取值：
static(静态定位) : 表示块保留在原本应该在的位置，不会重新定位。
fixed（固定定位）：元素就被固定不会随着滚动条的拖动而改变位置。
relative(相对定位) ：相对定位是通过将元素从原来的位置向上、向下、向左或者向右移动来定位的。
absolute(绝对定位)：绝对定位，是相对于最近的且不是static定位的上级元素来定位。

新增声明命令 let 和 const
在 ES6 中通常用 let 和 const 来声明，let 表示变量、const 表示常量
1.1）特点
let 和 const 都是块级作用域。以{}代码块作为作用域范围 只能在代码块里面使用
不存在变量提升，只能先声明再使用，否则会报错。语法上，称为“暂时性死区”
在同一个代码块内，不允许重复声明
const 声明的是一个只读常量，在声明时就需要赋值。（如果 const 的是一个对象，对
象所包含的值是可以被修改的。抽象一点儿说，就是对象所指向的地址不能改变，而
变量成员是可以修改的。）

1px的问题

CommonJS 主要是 Node.js 使用，通过 require 同步加载模块，exports 导出内容。
ESM[5]: 官方模块化规范，现代浏览器原生支持，通过 import 异步加载模块，export 导出内容。

模块化可以解决代码之间的变量、函数、对象等命名的冲突/污染问题，良好的模块化设计可以降低代码之间的耦合关系，提高代码的可维护性、可扩展性以及复用性。

模块化规范的作用是为了规范 JavaScript 模块的定义和加载机制，以统一的方式导出和加载模块，降低学习使用成本，提高开发效率。

webpack 的 工作流程（loader和plugin）

如何判断一个对象为空对象 json.strinfy() 序列化

useEffect 依赖项的作用是：可以决定本次渲染是否执行 effect，避免 effect 不必要的重复调用。
React 在对比依赖项是否发生改变时，实际上是用 JavaScript 原生的 API Object.is() 方法来对比的。

effect 的清除函数在什么时候执行呢？默认在下一次组件重新渲染时，在 UI 渲染（DOM 更新完毕）完成后再执行。假如依赖是 []，则会等到组件销毁之前才会执行清除函数。

useMemo接受两个参数，第一个参数是一个函数，返回值用于产生保存值。 第二个参数是一个数组，作为dep依赖项，数组里面的依赖项发生变化，重新执行第一个函数，产生新的值。

可以把一些昂贵的计算逻辑放到 useMemo 中，只有当依赖值发生改变的时候才去更新。

useCallback 的作用 简单来说就是返回一个函数，只有在依赖项发生变化的 时候才会更新（返回一个新的函数）。

简单理解呢 useCallback 与 useMemo 一个缓存的是函数，一个缓存的是函数的返回的结果。useCallback 是来优化子组件的，防止子组件的重复渲染。useMemo 可以优化当前组件也可以优化子组件，优化当前组件主要是通过 memoize 来将一些复杂的计算逻辑进行缓存。

数组reduce的使用-------> 归并类方法

最常见的应用场景就是，计算数组中每一项的总和。
reduce()方法会遍历数组的每一项，它接收两个参数：

第一个参数是：每次遍历都会调用的函数，而这个函数又接收四个参数，分别为：前一个值、当前项、项目的索引和数组对象，

而这个函数的返回值，会传给下一次遍历时，执行的这个方法的第一个参数。

第二个参数是：归并基础的初始值。

 

Object.assign方法用来将源对象（source）的所有可枚举属性，复制到目标对象（target）。它至少需要两个对象作为参数，第一个参数是目标对象，后面的参数都是源对象。

 

React 在对比依赖项是否发生改变时，实际上是用 JavaScript 原生的 API Object.is() 方法来对比的。
Object.is() 方法主要用来判断两个值是否为同一个值。其中要注意的一点是：Object.is 在对比引用类型（数组、对象、函数）的数据时，实际上对比的是它们的引用（内存地址）。（点 这里 跳转到 MDN 文档查看其用法和 polyfill）
了解到依赖对比的原理（Object.is()）后，我们可以清楚地知道 React 是怎判断依赖是否发生改变了：

对于基本类型的依赖（数字、字符串），直接判断依赖的值，如果值发生了改变，则判断依赖发生了改变
对于引用类型的依赖（数组、对象、函数），判断的是依赖的引用，如果引用发生了改变，则判断依赖发生了改变

每一次判断依赖是否有改变时，结果都是判断为“依赖有改变”。相当于传了依赖和没传依赖的效果都一样：每次组件重新渲染都会执行 effect。原因是，由于函数的定义写在最外层，当组件重新渲染的时候，都会重新创建一遍这个函数，导致函数索引变更。前面我们也提到，useEffect 底层用的是 Object.is() 去比较依赖，而函数属于引用类型，Object.is() 在比较引用类型的数据时实际上比较的是他们的索引。因此，每一次比较的结果都是“依赖有改变”。

当useEffect没有第二个参数时,组件的初始化和更新都会执行。

 

使用hooks遇到好多坑

1 useState 的初始化值 只有第一次有效

2 不能直接在useEffect中使用async函数 控制台会报错 因为 每个async函数都会默认返回一个隐式的promise对象。但是，useEffect不应该返回任何内容。 我们可以不直接调用async函数，而是定义一个函数 重新调用这个函数

3 useeffect 中 依赖项如果是 对象 数组 函数 可能会导致 死循环 因为 react 底层对于依赖项的对比 是通过object.is()方法 其实是浅对比 只比较 栈内存地址有没有变化 如果地址变化了 就判定依赖发生变化 如果地址没变 就判定 依赖没变 但是 如果 调用sState会触发重新render 此时生成一个引用地址改变 但是内容不变的函数 导致依赖项改变 从而导致每次更新 数组和对象同理 另外要注意的一点是，如果将对象的某个属性作为依赖，并且这个属性的值属于基本类型（或者以数组的某个元素作为依赖，并且这个元素的值属于基本类型），那么进行的就是值比较，而不是引用比较了。 （useCallback 可以解决这个问题 第一个传入一个函数 第二个参数为空数组[] useCallback的返回值即为它接收的第一个参数（传入的函数），直到依赖更新（第二个参数为[]生命周期是初次渲染更新 后面更新不渲染）。因此使用 useCallback 包裹的 fetchApi 函数，在依赖更新之前，总是同一个函数。也就不会触发 useEffect。）

4 如果 useeFFEct没有写第二个参数 即 依赖性为空的时候 不要在useEffect中 修改状态 因为 此时 挂载和更新都会执行 useeffect 修改状态导致更新 更新导致挂载 挂载执行useeffect 执行useeffect 导致 更新 陷入死循环