与前端沾边-腾讯云开发者社区

开发者社区

文档建议反馈控制台

腾讯云架构师技术同盟

文章/答案/技术大牛

发布

与前端沾边

专栏成员

33

文章

43410

阅读量

13

订阅数

mini react-window(二) 实现可知变化高度虚拟列表

上一小节我们了解了固定高度的滚动列表实现，因为是固定高度所以容器总高度和每个元素的 size、offset 很容易得到，这种场景也适合我们常见的大部分场景，例如新闻列表左图右文、会话消息这种。但是也有一些场景是例如有图片，我们的高度是一种，没有是另一种，这种情况也适合一些常见场景即高度可控，本小节我们看下不同子项高度情况下容器的总高度和每个元素的 size 和 offset 如何计算得到。

2022-10-20

1.7K0

mini react-window(一) 实现固定高度虚拟滚动

react javascript

我们在平常的开发中不可避免的会有很多列表渲染逻辑，在 pc 端可以使用分页进行渲染数限制，在移动端可以使用下拉加载更多。但是对于大量的列表渲染，特别像有实时数据需要更新的场景（股票价格），会导致页面有很多计算和重绘，内存占用也会变多，这就需要我们对长列表处理进行优化。

2022-09-25

2K0

实现简版 react 状态管理器 mobx

mobx 是一个简单可扩展的状态管理库，中文官网链接。小编在接触 react 就一直使用 mobx 库，上手简单不复杂。

2022-08-07

1.4K0

react 学习（14）实现 React.memo

上一小节我们学习了 react 中类组件的优化方式，对于 hooks 为主流的函数式编程，react 也提供了优化方式 memo 方法，本小节我们来了解下它的用法和实现原理。

2022-06-19

1.2K0

react 学习（13）实现 PureComponent

我们知道 react 进行页面渲染或者刷新的时候，会从根节点到子节点全部执行一遍，即使子组件中没有状态的改变，也会执行。这就造成了性能不必要的浪费。之前我们了解了泪组件内部可以使用 shouldComponentUpdate 返回布尔值进行判断，本小节我们了解下基于该生命周期实现的另一个判断渲染机制的内置组件。

2022-06-18

3240

react 学习（12）实现 cloneElement

react 本身提供了克隆组件的方法，但是平时开发中可能很少使用，可能是不了解。我公司的项目就没有使用，但是在很多三方库中都有使用。本小节我们来学习下如果使用该方法和他的实现原理。

2022-06-17

9630

react 学习（11）高阶组件

react 中的高阶组件主要是对于 hooks 之前的类组件来说的，如果组件之中有复用的代码，需要重新创建一个父类，父类中存储公共代码，返回子类，同时把公用属性传到子类中的形式。当然对于现在的 hooks 来说基本用不到了。但是 HOC 的形式也是对应 react 而衍生出来的一种设计形式。我们仅需了解一下它的形式，你可能不会在工作中用到，但是当你维护老的项目时，也可能会接触到。本节只了解简单的使用（小编也没有深入使用过），不做深入探讨。

2022-06-12

4350

react学习(十) React 中的 context

在平时工作中的某些场景下，你可能想在整个组件树中传递数据，但却不想手动地通过 props 属性在每一层传递属性，contextAPI 应用而生。

2022-06-09

2.4K0

react学习(九) React 新的生命周期

我们在之前已经学习过 react 生命周期，但是在 16 版本中 will 类的生命周期进行了废除，虽然依然可以用，但是需要加上 UNSAFE 开头，表示是不安全的。

2022-05-29

3760

react学习(八) diff 算法实现

前面几节我们学习了解了 react 的渲染机制和生命周期，本节我们正式进入基本面试必考的核心地带 -- diff 算法，了解如何优化和复用 dom 操作的，还有我们常见的 key 的作用。

2022-05-22

1K0

react 学习(六) 函数组件实例及类组件生命周期

react javascript

本小节开始前，我们先答复下一个同学的问题。上一小节发布后，有小伙伴后台来信问到：‘小编你只讲了类组件中怎么使用 ref，那在函数式组件中怎么使用呢？’。确实我们只分享了类组件中获取实例的方式没提函数式组件。那是因为函数组件是一个函数，执行完之后就会被销毁，所以正常我们不能直接获取函数组件的实例的。

2022-04-18

8610

react 学习(五) 完善 setState 及实现 ref

上一小节我们处理了 setState 的批量更新机制，但是我们有两个遗漏点，一个是源码中的 setState 可以传入函数，同时 setState 可以传入第二参数作为回调函数。我们先把上一节的工作收个尾再介绍 ref 的实现。

2022-04-12

4570

react 学习(四) 批量更新及合成事件

javascript react

我们上一节了解了组件的更新机制，但是只是停留在表层上，例如我们的 setState 函数式同步执行的，我们的事件处理直接绑定在了 dom 元素上，这些都跟 react 自身的逻辑不符。本小节我们学习下数据的批量更新和 react 中的事件处理。

2022-04-12

7640

react 学习(三) 组件更新

react javascript

我们上一节了了解了函数式组件和类组件的处理方式，本质就是处理基于 babel 处理后的 type 类型，最后还是要处理虚拟 dom。本小节我们学习下组件的更新机制。

2022-04-08

1.1K0

react 学习(二) 实现类和函数式组件

我们上一节了解了 react 的虚拟 dom 的格式，如何把虚拟 dom 转为真实 dom 进行挂载。其实函数是组件和类组件也是在这个基础上包裹了一层，一个是调用函数返回虚拟 dom，一个是调用实例的 render 方法，返回虚拟 dom，进而转换为真实 dom，本小节我们了解一下具体的实现原理。

2022-04-06

2.2K6

react 学习(一) 实现简版虚拟 dom 和挂载

react javascript

楼主最近入职新单位了，恰好新单位使用的技术栈是 react，因为之前一直进行的是 vue2/vue3 和小程序开发，对于这些技术栈实现机制也有一些了解，最少面试的也都能答出来。但对于 react 只是有一定的了解，没有真实的学习过实现，虽然之前也看过一些文章，但是只停留在表面，因为别人这么写了，也就下意识的认为是这样。本次正好配合工作的契机，我们从零开始学习一下，使用的话呢就简单一过，相信大家也都用过或者看完官网也都了解了。如果您是大佬，欢迎批评指正；如果您是初级选手，希望能够一起学习。

2022-04-05

5610

Vite 学习（四） - vite 插件开发预学习

javascript rollup.js

上一小节我们对 rollup 和 esbuild 的使用有了基本的了解，了解了二者主要的 hook 使用。vite 插件需要兼容 rollup 和 esbuild 的插件机制，虽然 vite 兼容大部分 rollup 插件，但不是所有钩子都支持，本小节介绍下 vite 中的钩子及插件开发流程。

2022-02-19

2.2K0

Vite 学习（三） - rollup & esbuild 基础学习

本小节介绍下 rollup 和 esbuild 的基础用法，我们都知道 vite 本身使用的 rollup 打包，vite 的插件也和 rollup 的插件机制相吻合； esbuild 是用于在开发环境中对文件进行处理，也有自己的声明周期钩子函数，由于对文件的分割和 css 支持还不太友好，暂未应用到打包环节。

2022-02-13

2.3K0

Vite 学习（二） - 基本使用配置

因为 vite 是使用原生浏览器的模块化功能，内部不能使用 node，也就没有了 require 方法。本小节主要介绍 vite 中常见的使用，包括 css、ts、env 环境变量，import.meta 等功能。

2022-01-26

2.3K0

Vite 学习（一） - 介绍

vite 是一个基于浏览器原生 ES-Module 的前端构建工具。官网描述为下一代前端开发与构建工具。

2022-01-14

5450

点击加载更多

社区活动

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·干货材料·成员作品最新动态