2019-09 上旬 ✅

# 2019-09-10: useMemo, React.memo, shouldComponentUpdate, PureComponent 应用场景 ✅

好好想想先 😌
  • 一句话

    • useMemo
      • 适用于函数式组件
      • 用来缓存计算值,依赖更新后重新计算
      • demo
      const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])
      
    • React.memo
      • 适用于函数式组件
      • demo
      function MyComponent(props) {
        /* 使用 props 渲染 */
      }
      function areEqual(prevProps, nextProps) {
        /*
        如果把 nextProps 传入 render 方法的返回结果与
        将 prevProps 传入 render 方法的返回结果一致则返回 true,
        否则返回 false
        */
      }
      export default React.memo(MyComponent, areEqual)
      
    • PureComponent
      • React.PureComponent 与 React.Component 很相似。两者的区别在于 React.Component 并未实现 shouldComponentUpdate(),而 React.PureComponent 中以浅层对比 prop 和 state 的方式来实现了该函数。

# 2019-09-09: 什么是 React Suspense? ✅

好好想想先 😌
  • 参考链接

  • 一句话

    • Suspense 让你的组件在渲染之前进行“等待”,并在等待时显示 fallback 的内容。

# 2019-09-08: 什么是 React Profiler? ✅

好好想想先 😌
  • 参考链接

  • 一句话

    • Profiler 测量渲染一个 React 应用多久渲染一次以及渲染一次的“代价”。 它的目的是识别出应用中渲染较慢的部分,或是可以使用类似 memoization 优化的部分,并从相关优化中获益。
    • Profiling 增加了额外的开支,所以它在生产构建中会被禁用。
    • onRender 回调
    function onRenderCallback(
      id, // 发生提交的 Profiler 树的 “id”
      phase, // "mount" (如果组件树刚加载) 或者 "update" (如果它重渲染了)之一
      actualDuration, // 本次更新 committed 花费的渲染时间
      baseDuration, // 估计不使用 memoization 的情况下渲染整颗子树需要的时间
      startTime, // 本次更新中 React 开始渲染的时间
      commitTime, // 本次更新中 React committed 的时间
      interactions // 属于本次更新的 interactions 的集合
    ) {
      // 合计或记录渲染时间。。。
    }
    

# 2019-09-07: webpack 中的 chunks 是什么?和 bundle 有何区别? ✅

好好想想先 😌
  • 一句话
    • bundle: 由多个不同的模块生成,bundles 包含了早已经过加载和编译的最终源文件版本
    • chunk: 这是 webpack 特定的术语被用在内部来管理 building 过程。bundle 由 chunk 组成,其中有几种类型(例如,入口 chunk(entry chunk) 和子 chunk(child chunk))。通常 chunk 会直接对应所输出的 bundle,但是有一些配置并不会产生一对一的关系

# 2019-09-06: 什么是函数式编程 ✅

好好想想先 😌
  • 一句话
    • "函数式编程"是一种"编程范式"(programming paradigm),也就是如何编写程序的方法论。
    • 它属于"结构化编程"的一种,主要思想是把运算过程尽量写成一系列嵌套的函数调用。
    • 特点
      • 函数是"第一等公民"
      • 只用"表达式",不用"语句"
      • 没有"副作用"
      • 不修改状态
      • 引用透明
    • 意义
      • 代码简洁,开发快速
      • 接近自然语言,易于理解
      • 更方便的代码管理
      • 易于"并发编程"
      • 代码的热升级

# 2019-09-05: 浏览器内置 Intl 有哪些方法 ✅

好好想想先 😌
  • 一句话
    • Intl.Collator
    • Intl.DateTimeFormat
    • Intl.ListFormat
    • Intl.NumberFormat
    • Intl.PluralRules
    • Intl.RelativeTimeFormat

# 2019-09-04: children 和 childNodes 的区别 ✅

好好想想先 😌
  • 一句话
    • children:返回父元素所有的直系子节点的集合,注意,children 只返回 HTML 元素节点,不包括文本节点和属性节点
    • childNodes:返回父元素所有的直系子节点的集合,注意,与 children 不同的是,childNodes 会返回 HTML 元素节点,属性节点,文本节点

# 2019-09-03: 什么是 redis,和数据库的区别 ✅

好好想想先 😌
  • 一句话
    • REmote DIctionary Server(Redis) 是一个由 Salvatore Sanfilippo 写的 key-value 存储系统。
    • Redis 是一个开源的使用 ANSI C 语言编写、遵守 BSD 协议、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。
    • 它通常被称为数据结构服务器,因为值(value)可以是 字符串(String), 哈希(Hash), 列表(list), 集合(sets) 和 有序集合(sorted sets)等类型。
    • 特性:速度快、数据结构、持久化、自动操作、支持多种编程语言
    • Redis 所有数据都是放在内存中的,持久化是使用 RDB 方式或者 aof 方式

# 2019-09-02: https 通信端口 ✅

好好想想先 😌
  • 一句话
    • 443: 验证证书合法性
    • 80: 验证证书合法后用来传输数据

# 2019-09-01: 浏览器 CSS 选择器解析顺序 ✅

好好想想先 😌