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 导致 更新 陷入死循环