全部文章all(329)
    简洁模式
1

Javascript进阶-长任务优化:WebWorker与时间分片

## 前端长任务js 是单线程的语言。如果一段 js 代码的逻辑占用了大量 CPU,那么就会造成「阻塞」,从而导致后面的渲染逻辑迟迟无法执行。一般来说,超过 50ms 的任务,就是「长任务」。## 长任务优化 1: 使用 Web Worker对于长任务,在浏览器环境下,可以使用 Worker 规范,来开启子线.....

2021-01-11
2

React合成事件原理

阅读 [《React 事件代理与 stopImmediatePropagation》](https://github.com/youngwind/blog)的笔记。## React 的事件实现:合成事件在 reactjs 中,react 没有使用浏览器原生的事件模型,而是使用了「合成事件」。**「合成事件」是.....

2021-01-10
3

topK 问题:如何在N个数中找到前K个最大的数

## 方案 1: 排序 + 遍历先对 N 个数做一次整体从大到小的快速排序,然后返回排序结果集合的前 K 个数。**优点**:思路简单,时间复杂度是 O(NlogN)**缺点**:当数据量(N)过大的时候,例如 10 亿个数字,一次读入内存不现实,需要考虑其它方案。## 方案 2: 排序 + 文件切分借助分布.....

2021-01-10
4

自定义React Hooks

挑选了 2 个最常用以及有代表性的自定义 hooks:- useRequest:和数据有关,用于处理异步请求- useScroll:和操作有关,用于监听鼠标滚动,并且实时拿到最新的滚动数据## DIY 一个简易的 useRequest这里模仿 ahooks.js,简单封装下 useRequest 方法参数是要.....

2021-01-08
5

react-router 实现原理

## Hash Router 实现原理**实现思路**:监听路由 hash 的变化,调用路由对应的回调函数。**实现代码**:```js/* * @Author: dongyuanxin * @Date: 2021-01-07 23:15:50 * @Github: https://github.com/do.....

2021-01-07
6

性能优化Hooks:React.memo和useMemo

## 原:不使用 React.memo 和 useMemo```jsfunction C() { console.log(">>> C: render"); return <div>C</div>;}function B() { console.log(">>> B: render"); return.....

2021-01-06
7

状态Hooks:useContext和useReducer

## 前言对于 react 函数组件,管理组件状态最常用的 hooks 就是`useState`。但在某些场景下,例如需要跨多层组件传递状态,或者组件中状态过多(一堆 useState),react hooks 提供了更优雅的解决方法。## useContext1、可以用来传递状态和方法(例如修改状态的方法).....

2021-01-05
8

JavaScript-位图

## 位图(bitmap)介绍**什么是位图?**用 1 个(或多个)bit 位,来表示某个值。**位图的好处?**1、使用 bit 位,相较于使用原生数据结构,占用内存更少。例如,对于 0、6 这 2 个数字,一个 int 类型的数字,是 4 个字节,也就是 2\*8=16 个 bit 位。如果用 bitm.....

2020-12-27
9

处理Redux异步状态更新

## 纯 redux 如何处理异步状态按照 redux 的编程方式,其实可以不借助任何中间件实现异步状态更新。假设是异步读取文件,大概代码如下:```jsdispatch({ type: "START_REQUEST" });fs.readFile(filename, (err, content) => { .....

2020-12-25
10

redux的reducer管理

## 如何封装多个 reducer?可以将多个 reducer 合并到一个 reducer 中。例如将`setTodoList`和`setNum`,都收归到`setAppState`中。注意:- setAppState 中的子 reducer 都会触发,所以 type 不要重复- setAppState 中的.....

2020-12-25