关于react hooks的一些Q&A

2022-03-12
阅读 2 分钟
1.2k
每一次组件的重新渲染,都会有链表(假设这个链表叫link1)依次记录useState -> useState -> useRef -> useCallback -> useMemo -> useEffect

react hooks核心:hooktype和ReactCurrentDispatcher

2022-03-12
阅读 5 分钟
2.7k
接下来有7个对象:HooksDispatcherOnMountInDEVHooksDispatcherOnMountWithHookTypesInDEVHooksDispatcherOnUpdateInDEVHooksDispatcherOnRerenderInDEVInvalidNestedHooksDispatcherOnMountInDEVInvalidNestedHooksDispatcherOnUpdateInDEVInvalidNestedHooksDispatcherOnRerenderInDEV这7个对象里都实现了一整套的useM...

react hooks源码核心:ReactCurrentDispatcher

2022-03-12
阅读 3 分钟
3.4k
我们大部分的use逻辑(包括useState、useCallback等等,所有的use)都是写在react-dom这个库里,但是ReactCurrentDispatcher的逻辑有一部分在react库里。

react hooks 本质探索 - useMemo、useEffect源码解析

2022-03-12
阅读 4 分钟
2.1k
两者的区别只有 ReactCurrentDispatcher$1部分。为什么会有这个区分?因为useMemo是在渲染中的时候执行,而useEffect是在渲染后执行。

react hooks 本质探索 - useCallback源码解析

2022-03-12
阅读 3 分钟
2k
这次来看useCallback。useCallback是所有原生use中比较简单的函数其实整体跟useRef/useState类似。我们直接看源码。初始化的时候,主要执行如下代码: {代码...} 关键是第二次渲染functional component时做的事情: {代码...} 附上areHookInputsEqual的源码: {代码...}

react hooks源码核心:workInProgressHook函数

2022-03-12
阅读 4 分钟
2.2k
目前可以确定,useRef和useState类似,每一个useState/useRef都可以理解为一个钩子,钩子(指针)存储在workInProgressHook中

react hooks本质探索 - useRef源码详解

2022-03-12
阅读 2 分钟
2k
先要知道几点前提要点在functional component中,每一次props的变化、执行setState操作都会导致组件方法重新执行。基于1,组件方法执行后,所有的直接定义的const、let变量都会重新定义。所以对于不需要变化的常量,一般用useRef封装起来。常见的使用方法:const a = useRef(initalValue);在执行组件方法的时候,a不会被...

手写Promise:从易到难,一步一步补完Promise,讲解每一行代码的作用

2020-11-26
阅读 10 分钟
1.5k
手写Promise一直是前端童鞋非常头疼的问题,也是面试的高频题。网上有很多手写Promise的博客,但大部分都存在或多或少的问题。下面我们根据A+规范,手写一个Promise

react fiber的实现逻辑

2020-09-21
阅读 2 分钟
2.5k
react在16版本实现了react fiber。那么react fiber到底是什么呢?官方的一句话解释是“React Fiber是对核心算法的一次重新实现”对于使用者而言,不需要做什么额外操作来使用它。

vue懒加载组件应用实践

2020-09-02
阅读 2 分钟
2.9k
router/index.js在router文件中,需要将普通的import引用改成import()引用,具体的import()知识点不在这里赘述,只需要知道这是个异步引用即可。

为自己的项目添加eslint,并给vscode添加保存自动按照eslint格式化

2020-07-01
阅读 4 分钟
3.6k
一、安装eslint相关依赖 {代码...} 二、配置eslint文件 放在项目根目录下.eslintrc.js文件配置信息 {代码...} .eslintignore文件配置信息 {代码...} 三、添加vscode设置 vscode安装插件eslintctrl+P输入setting,打开setting.json添加以下参数 {代码...} 四、重启vscode 重启vscode之后,测试保存有没有自动格式化。如果...

JavaScript原生函数Array.prototype.reduce用法实战、本质详解

2020-06-21
阅读 3 分钟
1.8k
实际上,如果不用Set,咋一看可以用filter实现,但是由于filter拿不到迭代的结果array,所以用filter或者forEach、map实现都需要借助外部定义的数组,比如

自己手动撸一个前端脚手架

2019-09-29
阅读 4 分钟
2.1k
写脚手架基本都是这么个流程,当然可能一些复杂的定制化项目小步骤比较多,那就按需再做额外考虑1.输入基本信息2.下载基础代码3.对基础代码进行一定的修改4.额外的事

react源码解析:JSX如何转化为javascript

2019-05-12
阅读 2 分钟
6.1k
什么是语法糖? 语法糖就是提供了一种全新的方式书写代码,但是其实现原理与之前的写法相同。语法糖可以说是广泛存在于各种计算机代码中,包括C语言中的a[i]其实就是*a+i的语法糖。而今天对于我们来说,a[i]其实已经很普遍和常用了,所以也没有人提这是语法糖这回事了。因为终极来说,所有语言都是汇编语言的语法糖:)

从settimeout看javascript的运行机制

2019-05-10
阅读 1 分钟
1.3k
我们知道JS是一个单线程的语言,而且其运行机制比较特殊。下面我们通过settimeout的几个示例来展现javascript的运行机制的特殊点

ES6的class本质和react中需要使用bind(this)的原因

2019-05-08
阅读 2 分钟
3.8k
我们知道ES6新出一个规范是使用class关键字来定义一个类,这在以前是没有的在以前,需要在javascript里实现面向对象,就需要使用prototype

简述dom diff原理

2019-04-18
阅读 1 分钟
2.8k
关于react的虚拟dom以及每次渲染更新的dom diff,网上文章很多。但是我一直信奉一个原则,即:但凡复杂的知识,理解之后都只需要记忆简单的东西,而想简单、精确描述一个复杂知识,是极困难的事。

解析带emoji和链接的聊天系统消息

2019-01-31
阅读 7 分钟
3.3k
在写聊天系统的时候,不可避免地要对聊天系统中的消息做一些解析常见的比如一句话中带有emoji、link等信息的时候,要把emoji解析成图片、把link转成可以点击的(项目中没有做对图片做行内处理,而是把图片像微信一样作为单独消息发送)我们知道react的标签都是jsx的,所以在解析消息的时候,就必须在得到消息内容的时候...

对console.log的一种封装

2019-01-31
阅读 1 分钟
3k
对于一个特别喜欢用console.log来调试代码的人来说,console.log的一些坑和console.log的详细用法确实是一件值得深究的事。

使用webpack + electron + reactJs开发windows桌面应用

2019-01-31
阅读 2 分钟
2.8k
electron是一两年前挺火的一个框架本质上是一个浏览器,但是集成了很多windows系统的功能,让前端开发也可以直接操作windows的窗体,做成一个实打实的桌面软件

使用webpack打包多页jquery项目

2019-01-31
阅读 6 分钟
10.2k
虽然已经2019年了不过有一些项目还是需要用到jquery的不过考虑到使用jquery的一堆兼容性问题也为了可以顺利地使用ES6来撸代码研究使用webpack+babel打包代码来发布