React组件重新渲染理解 & 优化大全
前言React组件的渲染,是React机制中非常重要的部分,出于对性能优化的考虑,在开发过程中我们应该尽可能去避免重新渲染。但很多时候,由于缺乏对React组件重新渲染的理解和意识,导致代码并未按照设想避免重复渲染。由此可见,要想写出性能高效的React代码,就必须了解组件渲染的机制。在开始之前,我 ...
WebRTC学习终章:建立连接
通过前两章的学习,已经对WebRTC有了大致的理解,那么作为前端开发,最关键的就是要通过WebRTC提供sdk来建立P2P的连接。
两端建立连接
AB两端通过信令服务器交换各自的SDP信息
AB两端通过实现STUN协议的STUN Server,获取各自的NAT结构,子网IP,公网IP和端口(Cand ...
WebRTC学习中章:通话原理
连接的建立离不开Offer与Answer的交换流程先来看个场景,两个端通信,和我们平时和服务器通信类似(http三次握手),都需要进行一些信息的交换。对WebRTC来说,至少需要如下步骤:
创建Offer,发送Offer
创建Answer,发送Answer
发送 / 接收媒体信息和网络信息
创建P ...
WebRTC学习初章:基础知识
WebRTC简介什么是WebRTC网页即时通信(Web Real-Time Communication),是一个支持浏览器进行实时语音对话或视频对话的API。能通过简单的API为Browser和App提供实时通信(RTC)的功能。WebRTC 是一种 HTML5规范,是无需在浏览器中安装任何插件就可 ...
深入理解ESModule
前言2022了,自从CommonJS奠定了javascript的模块基调后,近十多年来,ESModule作为EcmaScript钦定的模块标准,早已经深入人心,其静态连接的特性在使用中能帮我们避免类似循环引用等之前CommonJS无法解决的问题。再加上现代打包工具的支持,让我们在编写代码的时候也能按 ...
现代浏览器原理
前言浏览器作为前端开发工程师的主战场,每天我们都要和它打交道,因此能更好的搞懂现代高级浏览器(以Chrome为例),对前端工程师的开发和性能优化的理解,都有很大的帮助。本文在经典系列文章Inside look at modern web browser的基础上,结合我的实际经验,尽可能通俗易懂的解释 ...
React 18源码分析:新的挂载方式
前沿React从18版本起,不推荐再使用老版本的ReactDOM.render方法,建议用两个新方法,createRoot和root对象的render来替代:
1234import { createRoot } from 'react-dom/client';const root ...
React知识理解拾遗备忘录
前言自从进入tx,项目都是采用vue,使用多了难免怀旧react。而且react自从16.8.0版本后发布hooks的后,更是风靡前端界,react-router,react-redux 等陆续拥抱hooks,就可以看出业界对此的赞同。耐不住真香的诱惑,在工作之余,自己用react hooks体验了 ...
React Suspense实现图片懒加载
前沿React发展至今,针对页面复杂渲染会导致卡顿、组件渲染waterfall的不合理性、不能及时响应用户操作等,提出了一些很棒的设计思想和解决方案:
CPU密集型问题(渲染卡顿,不及时响应用户事件),16版本推出了fiber架构,重构了以前的stack架构。
I/O密集型问题(组件渲染water ...
react运行过程随记
ReactDOM.render
判断container容器是否合法
容器是否标记为root
legacyRenderSubtreeIntoContainer
topLevelUpdateWarnings: 判断是否是合法的container,否则会抛出warning
warnOnInval ...