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...