乐趣区

关于eventloop:前端笔记杂项二

jiezi

宏工作与微工作

  • 宏工作

    
每次执行栈执行的代码就是一个宏工作（包含每次从事件队列中获取一个事件回调并放到执行栈中执行）。浏览器为了可能使得 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` 比拟算法](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description) 来比拟 state。）*   `useState` 不会主动合并更新对象：setValue(prevState => {
     // 也能够应用 Object.assign
     return {...prevState, ...updatedValues};
    });

  • useEffect

  • effect 的执行机会：尽管 useEffect 会在浏览器绘制后提早执行，但会保障在任何新的渲染前执行。React 将在组件更新前刷新上一轮渲染的 effect

  • useContext

    
*   `useContext` 的参数必须是 context 对象自身
    
*   调用了 `useContext` 的组件总会在 context 值变动时从新渲染。

  • useReducer

    
*   [`useState`](https://react.docschina.org/docs/hooks-reference.html#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 属性被初始化为传入的参数
退出移动版