前端笔记 - 杂项(二）

Posted 2021-09-14 tanyioO

宏任务与微任务

• 宏任务
  每次执行栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行）。
  浏览器为了能够使得javascript内部宏任务与DOM任务能够有序的执行，会在一个宏任务执行结束后，在下一个宏任务执行开始前，对页面进行重新渲染。
  宏任务包括：script(整体代码)、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境)
• 微任务
  可以理解是在当前 task 执行结束后立即执行的任务。也就是说，在当前task任务后，下一个task之前，在渲染之前。
  微任务的响应速度相比宏任务会更快，因为无需等渲染。也就是说，在某一个宏任务执行完后，就会将在它执行期间产生的所有微任务都执行完毕（在渲染前）。
  微任务主要包含：Promise.then、MutaionObserver、process.nextTick(Node.js 环境)

Set

• 向 Set 加入值的时候，不会发生类型转换，所以5和"5"是两个不同的值
• 扩展运算符（...）内部使用for...of循环

• WeakSet

  • WeakSet 的成员只能是对象，而不能是其他类型的值。
  • WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用，也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于 WeakSet 之中

  Map

• Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现

React Hooks

• useState

  • setState 函数用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列。在后续的重新渲染中，useState 返回的第一个值将始终是更新后最新的 state。
  • 惰性初始 state：initialState 参数只会在组件的初始渲染中起作用，后续渲染时会被忽略。如果初始 state 需要通过复杂计算获得，则可以传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用
  • 跳过 state 更新：调用 State Hook 的更新函数并传入当前的 state 时，React 将跳过子组件的渲染及 effect 的执行。（React 使用 Object.is 比较算法 来比较 state。）

  • useState 不会自动合并更新对象：

     setValue(prevState => {
     // 也可以使用 Object.assign
     return {...prevState, ...updatedValues};
     });

• useEffect
  effect 的执行时机：虽然 useEffect 会在浏览器绘制后延迟执行，但会保证在任何新的渲染前执行。React 将在组件更新前刷新上一轮渲染的 effect

• useContext

  • useContext 的参数必须是 context 对象本身
  • 调用了 useContext 的组件总会在 context 值变化时重新渲染。

• useReducer

  • useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。
  • 指定初始 state：将初始 state 作为第二个参数传入 useReducer 是最简单的方法
  • 惰性初始化：
  • 如果 Reducer Hook 的返回值与当前 state 相同，React 将跳过子组件的渲染及副作用的执行

• useCallback

  • 把内联回调函数及依赖项数组作为参数传入 useCallback，它将返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时才会更新
  • useCallback(fn, deps) 相当于 useMemo(() => fn, deps)
• useRef：useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数