React 须要理解基本知识

限度浏览器疾速响应和渲染速度的因素有哪些？

1. CUP 瓶颈：当须要大量计算和性能操作时遇到的卡顿
2. IO 瓶颈：页面渲染大量 DOM 或更新 DOM 时遇到的卡顿
   在计算机中，GUI 线程和 JS 线程是互斥的，所以 JS 执行和浏览器渲染 DOM、布局等操作是不能同时进行的。(PS: 有趣味的同学能够理解下虚构 DOM、浏览器渲染机制、重绘、重排)

解决浏览器渲染问题的办法——# 工夫切片

• 什么是工夫切片：将一个长工作分解成多个 执行工夫少的小工作 执行，这样在用户感知上就会感觉晦涩

• 工夫切片的例子：

  1. Demo1：用 JS 创立 1W 个 DOM 元素，创立一个增加一个到页面中

      let list = document.querySelector('.list')
      let total = 100000
      for (let i = 0; i < total; ++i) {let item = document.createElement('li')
        item.innerText = ` 我是 ${i}`
        list.appendChild(item)
      }

  2. Demo2: 将 1W 个 DOM 元素分成多个小工作，一个工作对应一个 文档片段，外面蕴含 20 个 DOM 元素，一次增加一个文档片段到页面中

      let list = document.querySelector('.list')
      let total = 100000
      let size = 20
      let index = 0
      const render = (total, index) => {if (total <= 0) {return}
        let curPage = Math.min(total, size)
        window.requestAnimationFrame(() => {let fragment = document.createDocumentFragment()
            for (let i = 0; i < curPage; ++i) {let item = document.createElement('li')
                item.innerText = ` 我是 ${index + i}`
                fragment.appendChild(item)
            }
            list.appendChild(fragment)
            render(total - curPage, index + curPage)
        })
      }
      render(total, index)

• 浏览器渲染的每一帧在底层都有一个工夫范畴，因为工夫很短，所以感知不到。平时说的一帧渲染多少，指的就是在这个工夫范畴内能做多少事。
• 论断：应用工夫切片的概念能解决 CPU 和 IO 的瓶颈，因为造成瓶颈的起因都是工作执行工夫超过 渲染帧工夫 引起的
• React 中的利用：在浏览器每一帧的工夫中，预留一些工夫给 JS 线程，React 利用这部分工夫更新组件，预留的初始工夫是 5ms。当预留的工夫不够用时，React 将线程控制权交还给浏览器使其有工夫渲染 UI，React 则期待下一帧工夫到来持续被中断的工作

什么是代数效应？

• 代数效应是函数式编程中的一个概念，用于将副作用从函数调用中拆散(PS：不说人话😄)
• 我的了解是能够在同步代码中实现异步成果，能够参考 JS 中 Generator 的应用，但要理念比其先进。(PS: React 中 saga 的原理实现就是这个原理，后续会写其源码实现)
• 利用：React 中的 Suspense 和和 Hook 实现参考了代数效应
• 代数效应的代码了解 (PS: 图中你没见过的语法都是虚构的，仅帮忙了解)

参考链接

• React 的 Suspense：https://zh-hans.reactjs.org/d…
• JS 中 Generator 的应用：https://es6.ruanyifeng.com/#d…
• React 技术揭秘：https://react.iamkasong.com/p…