每日一题

# 2019年11月刊

# 2019/11/18 - 2019/11/26 ⌚️

  • fetch() 与 XMLHttpRequest 的区别

    点击

    1. fetch() 使用 Promise，不使用回调函数，因此大大简化了写法，写起来更简洁。

    2. fetch() 采用模块化设计，API 分散在多个对象上（Response 对象、Request 对象、Headers 对象），更合理一些；相比之下，XMLHttpRequest 的 API 设计并不是很好，输入、输出、状态都在同一个接口管理，容易写出非常混乱的代码。

    3. fetch() 通过数据流（Stream 对象）处理数据，可以分块读取，有利于提高网站性能表现，减少内存占用，对于请求大文件或者网速慢的场景相当有用。XMLHTTPRequest 对象不支持数据流，所有的数据必须放在缓存里，不支持分块读取，必须等待全部拿到后，再一次性吐出来。

  • Hook 和 Mixin & HOC 对比

    点击

    Mixin & HOC 模式缺点：

    1. 渲染上下文中公开的属性的来源不清楚。 例如，当使用多个 mixin 读取组件的模板时，可能很难确定从哪个 mixin 注入了特定的属性。

    2. 命名空间冲突。 Mixins 可能会在属性和方法名称上发生冲突，而 HOC 可能会在预期的 prop 名称上发生冲突。

    3. 性能问题，HOC 和无渲染组件需要额外的有状态组件实例，这会降低性能。

    Hook 优点：

    1. 暴露给模板的属性具有明确的来源，因为它们是从 Hook 函数返回的值。

    2. Hook 函数返回的值可以任意命名，因此不会发生名称空间冲突。

    3. 没有创建仅用于逻辑重用的不必要的组件实例。

  • promise的优缺点?

    点击

    缺点：

    1、无法取消

    2、如果不设置回调函数，promise内部抛出的错误，不会反应到外部。

    3、当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

    优点：

    1、解决回调地狱

    2、可以统一处理错误

# 2019/11/11 - 2019/11/17 ⌚️

  • Tree-shaking及副作用 (opens new window)

  • 如何实现 webpack loader？

  • Webpack 如何实现热更新？

    点击

    Webpack 如何实现热更新的呢？

    首先是建立起浏览器端和服务器端之间的通信，浏览器会接收服务器端推送的消息，如果需要热更新，浏览器发起 http 请求去服务器端获取打包好的资源解析并局部刷新页面。

    详细解说可以查看这篇文章：《把 webpack 热更新原理聊清楚》 (opens new window)

  • 如何判断单链表是否带环？

    点击
    1. 创建哈希表，时间复杂度O(n)，不过会占用较大的空间,不是最佳方法
    function judge(list) {
  var set = new Set()
  while(list) {
    if (set.has(list)) {
      return true
    }
    set.add(list)
    list = list.next
  }
  return false
}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    1. 添加标记法，时间复杂度O(n)，不需要额外的空间
    function judge(list) {
  var set = new Set()
  while(list) {
    if (list.visited) {
      return true
    }
    list.visited = true
    list = list.next
  }
  return false
}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    1. 快慢指针法，设定快指针fast, 慢指针slow, 每次循环快指针fast移动两个位置, 慢指针移动一个位置。快指针fast和慢指针slow若存在相遇，说明链表中存在环
    function judge(list) {
  var fast = list.next.next
  var slow = list.next
  while(list) {
    if (fast === slow) {
      return true
    }
    fast = fast.next.next
    slow = slow.next
  }
  return false
}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

  • 何为纯函数？

    如果函数的调用参数相同，则永远返回相同的结果。它不依赖于程序执行期间函数外部任何状态或数据的变化，必须只依赖于其输入参数。

该函数不会产生任何可观察的副作用，例如网络请求，输入和输出设备或数据突变（mutation）。
    1
    2
    3

  • useEffect 和 useLayoutEffect 的区别？

    点击

    传给 useEffect 的函数会在浏览器完成布局与绘制之后，在一个延迟事件中被调用。这使得它适用于许多常见的副作用场景，比如设置订阅和事件处理等情况，因为绝大多数操作不应阻塞浏览器对屏幕的更新

    useLayoutEffect 会在浏览器执行下一次绘制前被同步执行，这样用户才不会感觉到视觉上的不一致。

  • Hook 使用规则

    只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。

    只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。（还有一个地方可以调用 Hook —— 就是自定义的 Hook 中）

# 2019/11/04 - 2019/11/10 ⌚️

  • 从页面 A 打开一个新页面 B，B 页面关闭（包括意外崩溃），如何通知 A 页面？ (opens new window)

  • js 如何获取和设置 css 变量？

    // 获取一个 Dom 节点上的 CSS 变量
element.style.getPropertyValue("--my-var");

// 获取任意 Dom 节点上的 CSS 变量
getComputedStyle(element).getPropertyValue("--my-var");

// 修改一个 Dom 节点上的 CSS 变量
element.style.setProperty("--my-var", jsVar + 4);
    1
    2
    3
    4
    5
    6
    7
    8

  • React.PureComponent 与 React.Component 的区别

    点击

    两者的区别在于 React.Component 并未实现 shouldComponentUpdate()，而 React.PureComponent 中以浅层对比 prop 和 state 的方式来实现了该函数。

    注意

React.PureComponent 中的 shouldComponentUpdate() 仅作对象的浅层比较。如果对象中包含复杂的数据结构，则有可能因为无法检查深层的差别，产生错误的比对结果。仅在你的 props 和 state 较为简单时，才使用 React.PureComponent，或者在深层数据结构发生变化时调用 forceUpdate() 来确保组件被正确地更新。你也可以考虑使用 immutable 对象加速嵌套数据的比较。

此外，React.PureComponent 中的 shouldComponentUpdate() 将跳过所有子组件树的 prop 更新。因此，请确保所有子组件也都是“纯”的组件。
    1
    2
    3
    4
    5

  • React.memo 的作用

    点击

    React.memo 为高阶组件。

    如果你的组件在相同 props 的情况下渲染相同的结果，那么你可以通过将其包装在 React.memo 中调用，以此通过记忆组件渲染结果的方式来提高组件的性能表现。这意味着在这种情况下，React 将跳过渲染组件的操作并直接复用最近一次渲染的结果。

  • React.StrictMode 的作用

    点击

    StrictMode 是一个用来突出显示应用程序中潜在问题的工具。与 Fragment 一样, StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。

    严格模式检查仅在开发模式下运行；它们不会影响生产构建。

    StrictMode 目前有助于：

    • 识别不安全的生命周期
    • 关于使用过时字符串 ref API 的警告
    • 关于使用废弃的 findDOMNode 方法的警告
    • 检测意外的副作用
    • 检测过时的 context API

  • 受控组件 vs 非受控组件

    点击

    React 有两种不同的方式来处理表单输入。

    如果一个 input 表单元素的值是由 React 控制，就其称为受控组件。当用户将数据输入到受控组件时，会触发修改状态的事件处理器，这时由你的代码来决定此输入是否有效（如果有效就使用更新后的值重新渲染）。如果不重新渲染，则表单元素将保持不变。

    一个非受控组件，就像是运行在 React 体系之外的表单元素。当用户将数据输入到表单字段（例如 input，dropdown 等）时，React 不需要做任何事情就可以映射更新后的信息。然而，这也意味着，你无法强制给这个表单字段设置一个特定值。

    在大多数情况下，你应该使用受控组件

  • react class 组件的缺点

    点击
    • 需要绑定 this 的指向
    • class 不能很好的压缩
    • 会使热重载出现不稳定的情况

←