前端学习笔记-React原理笔记

已于 2024-01-06 20:22:34 修改
阅读量111 收藏
点赞数
分类专栏： 阅读笔记 文章标签： react.js
于 2021-09-20 19:48:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/melxy1997/article/details/120128216
版权

手写笔记

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

标记与数据结构

在这里插入图片描述

Fiber

在这里插入图片描述
、
在这里插入图片描述

双缓存

在内存中构建 并直接替换的技术 叫做双缓存（强调它并不会 先清除上一状态 再更新这一个状态，而是直接替换）

React使用“双缓存”来完成Fiber树的构建与替换——对应着DOM树的创建与更新。

当前屏幕上显示内容对应的称为current Fiber树，在内存中构建的称为workInProgress Fiber树。

current Fiber树中的节点跟WIP Fiber树中的节点 通过alternate属性相互连接。
在这里插入图片描述

currentFiber.alternate === workInProgressFiber;
workInProgressFiber.alternate === currentFiber;

React18

ReactDOM.render不再支持，改为createRoot
改进已有属性，如自动Batch处理、Suspense、
正式加入并发模式(CM)

科粒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React 学习笔记 - create-react-app踩坑 & eslint
绿胡子大叔的博客
03-26 2750
React 学习笔记 - create-react-app踩坑 & eslint问题解决方案eslintrc配置文件解析parserOptions 解析器配置env 代码运行环境extendsrulesplugins使用TypeScript 问题 最近使用create-react-app创建了一个项目，然后使用npm run eject使配置文件暴露 此时，产生了错误 Using babel-preset-react-app requires that you specify NODE_ENV or
【前端学习】React学习笔记-ReactRouter6
SDUzzy的博客
03-30 1555
跟着尚硅谷的天禹老师学习React 看视频可以直接点击 b站视频地址 概述 在2021年11月，React官方将ReactRouter6调整为ReactRouter的默认版本 1.React Router以3个不同的包发布到npm上，它们分别为： react-router：路由的核心库，提供了很多的组件和钩子。 react-router-dom：包含了react-router所有内容，并添加了一些专门用于DOM的组件，例如<BrowserRoute/r> react-router-native
【学习笔记】前端学习-React18-第一章 起步
最新发布
大漠狼烟的博客
08-04 817
SWC就是JavaScript编译器，将ES2015或者TypeScript等高级JavaScript语法编译为浏览器可支持的JavaScript语法，据说比传统的babel快十倍。!
前端学习笔记202307学习笔记第六十二天-react原理之3
qq_41632427的博客
07-27 146
前端
前端学习笔记202307学习笔记第六十二天-react原理之4
qq_41632427的博客
07-27 144
前端
前端学习笔记202307学习笔记第六十二天-react原理之2
qq_41632427的博客
07-27 141
前端
前端学习笔记202307学习笔记第六十二天-react原理之12
qq_41632427的博客
07-28 46
前端
前端学习笔记202307学习笔记第六十二天-react原理之6
qq_41632427的博客
07-28 45
前端
前端学习笔记202307学习笔记第六十二天-react原理之11
qq_41632427的博客
07-28 44
前端
前端学习笔记202307学习笔记第六十二天-react原理之1
qq_41632427的博客
07-27 45
前端
前端工程师学习笔记 超级详细
10-31
正则表达式学习笔记 ...React笔记 ReactHooks笔记 Promise学习笔记 Mobx学习笔记 HTML+CSS+JS基础笔记 Git学习笔记 ES6及后续版本 Chrome开发使用笔记 Ajax、Axios学习笔记 前端工具使用A 前端代码规范
react学习笔记-附件资源
03-02
react学习笔记-附件资源
react 学习笔记
11-16
React 学习笔记 React 是一个流行的前端框架，用于构建用户界面。学习 React 需要掌握其核心概念，包括组件生命周期、状态管理、事件处理等。本节笔记将记录 React 学习过程中的关键知识点。 一、React 组件生命...
bootcamp-react:训练营React学习笔记
03-19
在React训练营的学习笔记中，我们深入探讨了React——一个由Facebook开发并维护的JavaScript库，用于构建用户界面，特别是单页应用。React以其组件化、声明式编程风格和高效的虚拟DOM更新机制著称，是现代Web开发的...
frontend-notes:前端学习笔记
05-24
home heroImage actionText actionLink features footer true ./logo.jpg 开始阅读 → ...包含页面布局、BFC、清除浮动、CSS3 和屏幕适配 ...包含 JS 数据类型、闭包、原型链、JS 继承、执行上下文、事件...常见的 React、Vu
前端学习笔记-RxJS与Redux-Observable (一)
KL's Notebook
07-21 1329
文章目录RxJS可观察对象Observable观察者Observers多播的Subjects操作符OperatorsRedux-ObservableEpic 承接前文提到的异步Action话题，中间件redux-thunk易于编写和理解，但它也存在实践上的不足： 你最终可能会回调地狱，特别是在发出API请求时， 需要使用业务逻辑填充回调函数 或reducer函数去整理数据（数据格式不总是完美的，特别是使用第三方API时） 不利于测试（必须使用Spy方法来检查是否使用正确的对象进行dispatch） 然后
前端学习笔记-内容交付网络 Content delivery networks (CDNs)
KL's Notebook
08-10 549
文章主体来自 https://web.dev/content-delivery-networks/ 的节选及翻译 文章目录资源交付 Resource delivery缓存 Caching向缓存添加资源从缓存删除资源cache evictionPurging性能特点 Performance features图像优化Minification数据压缩HTTP/2 和 HTTP/3TLS 1.3结论 CDN通过使用分布式服务器网络向用户交付资源来提高站点性能。 因为 CDN 减少了服务器负载，所以它们降低了服务.
代码片段-Promise异步请求超时重连
KL's Notebook
08-04 491
本文不是Promise超时重试，而是XHR异步请求与Promise结合后的自动重连 如何发现请求超时？依靠XHR自身就有的超时属性和事件 var xhr = new XMLHttpRequest(); xhr.open('GET', '/server', true); // 1. timeout属性：超时时间，单位是毫秒 xhr.timeout = 2000; xhr.onload = function () { /* onload事件请求完成 */ }; // 2. ontimeout事件回调
前端学习笔记-React Hooks-自定义Hooks
KL's Notebook
07-19 361
自定义Hooks Hooks 两个核心优点：方便逻辑复用；帮助关注分离。 理论 形式上，要求名字以use开头的函数；语义上，内部使用了其他的hooks；实操上，当作普通函数，该传参传参，该返回返回； 把现有的逻辑提取出来，以方便使逻辑可被重用，一方面也能让代码语义化 易于理解维护。 实例1 发起异步请求 获取数据并显示在界面上。 关注点有3： 请求正确返回时，UI 会如何展现数据； Loading 状态 UI 与交互的差异； 处理请求出错时，UI 会如何展现错误； 流程梳理4： 创建 data，loa
前端开发学习笔记：从入门到精通
6. **前端书单**：推荐了一些前端学习的经典书籍，可能是关于JavaScript、前端框架、用户体验设计等方面的读物。 7. **前端技术栈**：列举了当前前端常用的开发框架和技术，如React、Vue.js、Angular，以及构建工具...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值