wlqdbtx-优快云博客

原创 React源码解析系列(六) —— ReactDOM.render

在React当中，可以导致更新的方法有三种，setState、forceUpdate和ReactDOM.render这三种。当我们初始化应用时，会在入口js文件中调用ReactDOM.render函数去挂载组件。下面让我们来看看这个方法到底做了什么事情。 ReactDOM的代码在: /packages/react-dom/src/client/ReactDOM.js 我们先来看下Reac...

2019-12-23 20:53:32 706

原创 js深拷贝

function deepClone(obj) { var clone = Array.isArray(obj) ? [] : {}; // 数组和对象 if (obj && typeof obj === 'object') { for (var key in obj) { if (obj.hasOwnPropert...

2019-12-23 16:45:11 235

原创 vue-bus插件的实现

vue-bus又叫中央事件总线，是vue中实现跨级组件和兄弟组件之间通信的方式。它的原理是额外定义一个vue的实例，所有的事件监听和触发都是通过这个函数进行的。什么是插件 Vue提供了插件机制，让我们可以在全局添加一些功能。它可以只是提供几个简单的方法或熟悉，也可以是复杂的组件库。往Vue中注册插件需要提供一个install方法，如下实例所示： MyPlugin.install = ...

2019-12-23 14:41:39 684

原创 React源码解析系列(五) —— Fiber树

前面几篇文章已经介绍了React相关的api，接下来我们开始进入ReactDOM源码的学习。本文和大家聊聊react中的虚拟DOM到底是什么？我们来看个例子 <App> <Card> <div>title</div> <div>content</div> </Card> <p>h...

2019-12-21 15:34:36 1030

原创 React源码解析系列(四) —— React剩余的api

现在让我们对React剩下的一些api进行讲解，下面的这些api其实就是每种类型对格式定义，让后续更新流程中能根据这些格式进行渲染。 const React = { Children: { map, forEach, count, toArray, only, }, createRef, Component, PureCompone...

2019-12-20 17:12:31 485

原创 React源码解析系列(三) —— React.Component

我们平常写的class组件都需要继承React.Component这个基类，从而在类都实例中能使用相应的方法。下面让我们看看React.Component这个类究竟长什么样。 Component const emptyObject = {}; function Component(props, context, updater) { this.props = props; this...

2019-12-20 16:37:00 833

原创 React源码解析系列(二) —— React.Children

Children 这个对象提供了帮你处理组件内部props.children的相关方法。这里我们挑map这个方法进行讲解，其它方法逻辑类似。 map方法定义如下： // React.Children.map(this.props.children, (child) => null) function mapChildren(children, func, context) { ...

2019-12-20 16:36:52 368

原创 React源码解析系列(一) —— React.createElement

在开始看react源码前觉得代码量应该会非常庞大，然而在看完react源码后发现实际上react的源码只是一些API和数据结构的定义，真正的更新渲染逻辑是react-dom这块源码里控制的。本此源码解析系列不包括dev环境下的代码，只对主流程代码进行讲解。 react的源码地址为：react 我们先来看下react的目录结构：下面让我们看下react对我们暴露的API：/p...

2019-12-20 16:36:42 819

原创 useEffect和useLayoutEffect的区别

这两者的区别可以用2句话概括： useLayoutEffect和平常写的ClassComponent的'componentDidMount'和'componentDidUpdate'同时执行。 useEffect会在本次更新完成后，也就是第1点的方法执行完成后，在开启一次任务调度，在下次任务调度中执行useEffect。查看源码可以发现useLayoutEffect和componentDid...

2019-12-19 23:44:20 2339

原创 React Hooks如何获取远程数据

让我们来看一个hooks展示数据的简单的例子 import React, { useState } from 'react'; function App() { const [data, setData] = useState({ list: [] }); return ( <ul> {data.list.map(item => ( ...

2019-12-19 23:25:23 580

原创 onload和DOMContentLoaded事件

1.onload事件在页面的所有资源加载完成时，window对象上会触发一个onload事件。此时页面的DOM树已经构建完成，并且完成了所有图片、样式表、脚本等资源也已经加载完成。但是存在的问题是，当资源过多过大时，onload会出现比较严重的延迟问题，严重影响用户体验。 2.DOMContentLoaded事件对比onload事件，DOMContentLoaded事件就更加合...

2019-12-19 20:23:48 1290

原创 js中generator函数的原理和使用

generator又名生成器函数，它是一个崭新的函数类型，它和标准的普通函数完全不同。通过显式的调用生成器函数，能对应的产生一个新的值。通过多次调用后，产生一组值的序列，直到生成器告诉我们无法在产生新的值了。每当生成器函数产生一个新值后，它的执行状态会被保留，直到下次请求到来，它就会从上次离开的位置恢复执行。 1、如何定义generator函数下面我们来看一个简单的例子： // 通过在f...

2019-12-17 17:27:38 2266

原创浅谈js中的闭包、作用域和执行上下文

闭包是JavaScript的的显著特征，使用闭包可以减少代码量来添加高级特性，下面让我们来探讨下什么是闭包。 1、理解闭包让我们看下一个简单的闭包: var outer = 'outer'; function outerFunc() { console.log(outer); } outerFunc(); 我们在全局作用域中定义了一个变量outer和函数outerFunc，然后...

2019-12-15 15:12:15 332

原创 koa2简单实现

koa2的思想就是把一个个用于处理用户请求的中间件串联起来，并支持异步中间件。下面是一个使用koa2的简单示例 const Koa = require('koa') const app = new Koa() app.use(async (ctx, next) => { console.log('a1') await next() console.log('a2') })...

2019-12-11 23:18:00 340

原创 react-redux的原理及简单实现

前面一篇文章已经讨论了redux的实现原理，如果没看过的小伙伴可以点击链接查看redux的原理及简单实现下面让我们先看下在react中使用redux的例子： import React from 'react'; import ReactDOM from 'react-dom'; import { createStore, applyMiddleware } from 'redux'; ...

2019-12-10 14:46:43 610

原创 redux的原理及简单实现

1、redux 抛开react，如果只是仅仅使用redux，就像如下示例： const initialState = { name: 'Jack', age: 27, gender: 'boy' }; function reducer(state = initialState, action) { switch(action.type) { ...

2019-12-10 12:24:12 352

原创 Promise简易实现

仅供自己学习记录 const PENDING = Symbol.for('pending'); const FULFILLED = Symbol.for('fulfilled'); const REJECTED = Symbol.for('rejected'); class MyPromise { constructor(func) { this.state = PENDING;...

2019-11-29 18:05:26 166

原创 line-height的继承

当前元素的line-height的值分为几种情况：当前元素本身设置了line-height值：设置的值为固定值，如：22px，1em等，则line-height为设置的值；设置的值为百分比，如：120%，则line-height为120% * 当前元素的font-size；设置的值为缩放因子，如：1.4，则line-height为1.4 * 当前元素的font-size；当前元素...

2019-07-05 14:58:07 996

wlqdbtx的博客