女王控的博客

React

16 篇文章

React技术解密笔记——实现篇

Diff 算法 概览 在 beginWork 一节我们提到 对于 update 的组件,他会将当前组件与该组件在上次更新时对应的 Fiber 节点比较(也就是俗称的 Diff 算法),将比较的结果生成新 Fiber 节点。 这一章我们讲解 Diff 算法的实现。 你可以从 这里 看到 Diff 算法的介绍。 为了防止概念混淆,这里再强调下 一个 DOM 节点在某一时刻最多会有 4 个节点和他相关。 current Fiber。如果该 DOM 节点已在页面中,current Fiber… »

React技术解密笔记——架构篇

render 阶段 流程概览 本章我们会讲解 Fiber 节点是如何被创建并构建 Fiber 树的。 render 阶段开始于 performSyncWorkOnRoot 或 performConcurrentWorkOnRoot 方法的调用。这取决于本次更新是同步更新还是异步更新。 我们现在还不需要学习这两个方法,只需要知道在这两个方法中会调用如下两个方法: 可以看到,他们唯一的区别是是否调用 shouldYield。如果当前浏览器帧没有剩余时间,shouldYield… »

React技术解密笔记——理念篇

React 理念 React 理念 我们可以从官网看到 React 的理念: 我们认为,React 是用 JavaScript 构建快速响应的大型 Web 应用程序的首选方式。它在 Facebook 和 Instagram 上表现优秀。 可见,关键是实现快速响应。那么制约快速响应的因素是什么呢? 我们日常使用 App… »

React之createContext入门学习

初识 context 在典型的 React 应用中,数据是通过 props 属性显式的由父及子进行传递的,但这种方式,对于复杂情况(例如,跨多级传递,多个组件共享)来说,是极其繁琐的。 组件的封装与组合,将组件自身传递下去 在项目中,我们在父层获取数据,不同层级的子组件访问时,我们可以使用将子组件的公共组件封装,将公共组件传递下去 这种对组件的控制反转减少了在应用中要传递的 props… »

React之createRef入门学习

引言 本篇从 React Refs 的使用场景、使用方式、注意事项,到 与 Hook 的对比使用,最后以 React 源码结束,剖析整个 React Refs,关于 会在下一篇文章深入探讨。 Refs React 的核心思想是每次对于界面 state 的改动,都会重新渲染整个 Virtual DOM,然后新老的两个 Virtual DOM 树进行 diff(协调算法),对比出变化的地方,然后通过 render 渲染到实际的 UI 界面, 使用 Refs… »

0%