ylushen的博客

react-hooks源码解析 参考资料 掘金用户：????holyZhengs 导语 hooks是function组件渲染中的一个环节。作用是将一部分组件的数据处理逻辑独立出来，以渐进式方式的加入到函数组件中。 源码地址packages/react-reconciler/src/ReactFiberHooks.js 根据源码实现简易hookDemo的代码地址：src/hookDemo目录下的CommonDemo组件 来玩局游戏吧! 废话不多说，上图: 整个hooks执行阶段，可以类比成开一局

React渲染机制 一、react-dom 渲染 模块说明 作用：React的DOM和服务器渲染器的入口点。它可以与通用的React包配对，一般用于渲染web端 执行过程 执行react-dom的render方法。// ReactDOM.render render( element: React$Element<any>, // react创建的基础对象 container: DOMContainer, // 根节点 callback: ?Function, //

实例化过程 一、ReactBaseClasses基类解析 1. Component // 构建方法 function Component(props, context, updater) { this.props = props; this.context = context; // If a component has string refs, we will assign a different object later. this.refs = emptyObjec

基于react源码16.8.6版本搭建学习环境 导言 参考资料 segmentfault用户：A_大白 https://segmentfault.com/a/1190000020239791 react版本（16.8.6分支）以及这么做的原因 react跟vue不同，react没有保留run dev的环境，本人没找到直接通过源码构建执行环境的方法，如果有成功的，期待分享一下啦。 所以通过同源react项目，直接引入react源码中，react/src/react目录下的文件。 因为其中使用了flow的语法

一、前言 本篇文章的目的是尽可能的解释清楚在js中的代码执行过程，通过三个阶段着手： 代码执行前的准备 代码执行过程 总结 二、执行前的准备 代码执行前分为两个阶段： 语法分析：检查代码语法是否存在错误 预编译：创建执行上下文 语法分析 检查代码词法与语法有无错误，如有错误打印错误并停止执行。 预编译(解析声明创建执行上下文) 变量提升：let c = 3 console.log(add(1, 2)) // 3 console.log(add2) // undefined console.log(

一、前言 本篇文章的目的是解释清楚事件循环中的宏任务与微任务，还是三个问题着手： 什么是宏任务与微任务？ 为什么需要微任务？ 微任务的应用？ 二、什么是宏任务与微任务？ 宏任务 主线程任务队列中的任务： 加载的js文件执行 各种交互事件 浏览器渲染事件 setTimeout，setInterval定时器 I/O线程加入的事件 微任务 主线程运行时，作用域栈中维护的队列： promise MutationObserver 代码示例： const promise = new Promise(r

一、前言 本片文章的目的是尽可能的解释清楚在js中的事件循环，继续通过三个问题着手： 什么是事件循环机制？ javascript为什么需要事件循环？ 事件循环的优缺点？ 二、什么是事件循环？ 简单的说，程序在执行代码的过程中，在主线程之外，维护一个事件队列。主线程在执行的过程中，循环的读取事件队列中的任务并执行。这一个整个流程就是事件循环机制。如图： 事件循环的核心，是通过事件触发的方式，将一个个任务排队放进事件队列，根据队列先进先出的特点。在不影响主线程执行的情况下，将任务按规则排列。既保

一、前言 本篇文章的目的是尽可能的解释清楚在js运行时的原型链。我准备从三个问题着手： 原型是什么？ 原型链是什么？ 原型链的应用？ 二、什么是原型？ 在编写javascript代码过程中，经常会用到Array、Object、Function等构造器创建对象。如下： const obj1 = {} const obj2 = new Object() console.log(obj1.toString) // [object Object] console.log(obj2.toStrin

一、前言 众所周知，javascript的数据类型，可以分为两种：基础类型和对象类型。那么，这两种类型到底差别在哪里呢？这是区分这两种类型最核心的问题。 二、运行时环境 要说清楚这两种类型最核心的区别。那么必须要从他们存储在内存中的结构说起。这就是这两者最核心的区别。即堆和栈的存储结构。 1、堆和栈 堆和栈，是javascript中，存储数据唯二的两种方式。是宿主环境给v8引擎提供的 栈：栈空间在内存中，是一块连续的内存地址。因此，它的查找效率非常的高。但是，想要分配到很大一块的连续内存，在内存中是很难的

失效代码 <script>${ require('raw-loader!babel-loader!./page/demo.js') }</script> 原因及解决办法 由于html-webpack-plugin解析语法的改变，将${ "code" }写法改为了<%= "code" %> 将原有的写法改为新写法即可 // 由于html-webpack-plug...

通过vm安装linux,我使用的版本CentOS7.6。 启动虚拟机，先查看是否已连接外网，输入命令ip addr查看网卡状态。 如图所示，本虚拟机目前未连接外网。 输入命令cd /etc/sysconfig/network-scripts/，然后输入ls查看文件列表，找到名称ifcfg-eth***的文件 输入vi ifcfg-ens33查看文件，如果文件内ONBOOT=n...

如图，运行过程中，代码编译不懂，npm run build 也能运行，热加载有问题。 解决办法： 我的问题出现在使用template时，外层没有给根div，两个组件并行，导致死循环 <template> <children></children> <base-video src="//vjs.zencdn.net/v/oceans.mp4">&l...