2019-09 上旬 ✅

  • 创建于：2019-09-01
  • 更新于：2023-03-16

# 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 App() {
  return (
    <Profiler id="Navigation" onRender={onRenderCallback}>
      <Navigation {...props} />
    </Profiler>
  )
}

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 选择器解析顺序 ✅✅

好好想想先 😌
< 2019-08 下旬 ✅ 2019-09 中旬 ✅ >