乐趣区

关于前端:React源码学习之路漫漫

jiezi

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…
退出移动版