Ylushen-CSDN博客

原创 # react-hooks源码解析

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

2021-06-04 09:46:40 218

原创 React源码分析（二） React渲染机制

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

2020-08-18 20:08:39 302

原创 React源码分析（一） React实例化过程

实例化过程一、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

2020-08-18 20:06:41 638

原创基于[email protected]版本配置源码学习环境

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

2020-07-25 15:52:31 378

原创 javascript知识梳理（五）：运行时-代码执行过程（Execution context）

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

2020-07-05 23:48:51 186

原创 javascript知识梳理（四）：运行时-宏任务与微任务

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

2020-06-25 23:18:47 205

原创 javascript知识梳理（三）：运行时-事件循环（event loop）

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

2020-06-22 22:28:48 214

原创 javascript知识梳理（二）：数据结构-原型（prototype）

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

2020-06-18 23:36:16 336

原创 javascript知识梳理（一）：数据结构-类型

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

2020-06-16 23:33:29 491

原创 webpack使用raw-loader内联静态资源失效

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

2020-04-25 13:41:58 1715

原创记录从零搭建一个使用VM虚拟机装linux系统作为服务器，通过scp2实现前端代码自动发布的项目

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

2020-04-12 11:26:12 299

原创 npm run dev卡住即 vue-cli-service serve卡住，不提示错误信息，进程也不关闭

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

2019-07-31 22:26:48 16354 10

ylushen的博客