前端笔记 - 杂项(二)

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 属性被初始化为传入的参数
阅读 49
1 声望
0 粉丝
0 条评论
你知道吗?

1 声望
0 粉丝
宣传栏