自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 React源码阅读—React.Children.map

文章目录React.map源码阅读React.jsReactChildren.jsmapChildren()mapIntoWithKeyPrefixInternal()getPooledTraverseContext()getPooledTraverseContext()对象池traverseAl...

2019-08-21 13:01:12 293 0

原创 React源码阅读—React.forwardRef

文章目录React.forwardRef源码 React.forwardRef 在有些时候我们想要操作子组件中的DOM节点,说到获取DOM节点,可能我们会第一时间想到ref。可是,如果我们是直接在子组件上写ref,获得的只是子组件,而不是子组件下的某个DOM节点。 这个时候就可以通过React.f...

2019-08-20 09:50:29 607 0

原创 React源码阅读--React.createElement和ReactElement

文章目录React.createElement源码ReactElement React.createElement 在React中,JSX语法糖都会被转换为React.createElement的形式。 例如: <div id='div'>hello</div...

2019-08-19 23:40:01 50 0

原创 TypeScript的数组和元组

数组 在TypeScript中数组的定义与JavaScript中别无二致,但是JavaScript中的数组具有很大灵活性,即数组内可以存储任意类型数据。那么在TypeScript中能不能做到呢? 答案是肯定的: const arr: (string | number | boolean)[] = ...

2020-04-01 16:04:21 199 0

原创 TypeScript函数的一些特性

文章目录函数返回值类型never类型解构赋值 函数返回值类型 function getSum(a: number, b: number): number { return a + b; } 在参数声明后面的“: number”就是指明了函数返回值的类型。理论上是可以不用添加的,因为TypeS...

2020-04-01 16:02:52 48 0

原创 TypeScript的类型注解和类型推断

TypeScript希望开发者写出的代码中每个变量的类型都是确定的,而想要做到这一点就需要类型注解和类型推断。 类型注解(Type annotation) 所谓类型注解,就是人为为一个变量指定类型,例如: const count: number = 123; const word: word = ...

2020-04-01 15:56:33 242 0

原创 再理解—JavaScript的变量提升

学习过前端的同学们应该都对变量提升的概念不陌生,这对于没有接触过JavaScript开发的同学来说是一种极其反常识的现象。当时对这种现象并没有什么理解,只是了解并记住了这种现象。到了今天,我想重新描述我的理解,当然,未必准确,纯当抛砖引玉。 首先来看一段代码: console.log(test) ...

2019-11-29 00:49:39 65 0

原创 WebRTC之MediaRecorder

文章目录构造参数方法MediaRecorder.start(timeslice)MediaRecorder.isTypeSupported()MediaRecorder.resume()MediaRecorder.stop()MediaRecorder.pause()事件下载所录制的数据 Medi...

2019-11-16 20:05:02 143 0

原创 Git--基础

文章目录git init昵称和邮箱查看昵称和邮箱git config user.namegit config user.email.配置昵称和邮箱git config --global user.namegit config --global user.email修改昵称和邮箱git config...

2019-11-09 19:49:09 56 0

原创 RPC(远程过程调用)

文章目录概念RPC与RESTFUL 概念 所谓远程过程调用是相对本地调用来说的。例如现在有一个计算器类,类中有一个成员方法叫add。那如果我们想调用ada方法用本地调用就是new一个计算器类对象,然后执行该对象的add方法即可。 如果是远程过程调用,那么就意味着所调用的函数的真正逻辑并不是在本地而...

2019-11-09 19:41:06 79 0

原创 React--自定义hooks

React内置的hooks函数解决了函数组件无法使用state以及在传统写法中生命周期函数混乱和this指向的问题。 而hooks所带来的组件复用性的提升则是由自定义hooks来体现的。 传统的组件复用多是渲染属性或者是高阶组件这两种方式,缺点除了写起来会相对复杂,还会造成组件层级过多。 先来看一...

2019-10-16 23:56:54 1341 0

原创 React—useRef

相信有过React使用经验的人对ref都会熟悉,它可以用来获取组件实例对象或者是DOM对象。 而useRef这个hooks函数,除了传统的用法之外,它还可以“跨渲染周期”保存数据。 首先来看一下它传统的用法: import React, { useState, useEffect, useMemo...

2019-10-16 15:53:04 23044 1

原创 React—useMemo与useCallback

看到“memo”这个字眼,很多人应该会想到memo方法。这是一个高阶函数,它会返回一个函数组件,作用相当于PureComponent。 而useMemo的作用也有点像,只不过它不是作用在函数组件上,而是在一段逻辑上,例如: const [count, setCount] = useState(0)...

2019-10-16 13:25:29 200 0

原创 React--useContext

在出现useContext之前,使用context的方式主要是两种,第一种需要使用Consumer: class Component2 extends Component{ render(){ return ( <CountContext.Consumer> ...

2019-10-16 12:50:30 441 0

原创 React之lazy与suspense

文章目录动态importlazysuspenseError boundariesgetDerivedStateFromErrorcomponentDidCatch 动态import 在说lazy和suspense之前,还是先说说动态import这种语法。 import语句我们使用的很多,通常是im...

2019-10-15 20:40:05 56 0

原创 React之Context

文章目录概念APIcreateContext使用注意 概念 Context可以让数据在组件树中自上而下自由传递,而不需要在树中层层的传递。层层传递不仅在编写代码的时候会十分繁琐,而且中间层级可能根本不关心所要传递的数据,所以也为后期的维护制造理解上的障碍。 可以将Context简单理解为一个全局变...

2019-10-09 15:36:18 19 0

原创 实现一个类似Webpack的基础打包工具

文章目录引入步骤简述具体实现分析文件源码解析分析依赖关系源码解析生成最终代码源码解析 引入 其实在Webpack官网,可以看到官方对于Webpack的定位是一个打包工具。而它最基础的使用就是在浏览器中实现JS的模块化和将ES6转为ES5。 浏览器中引入一个JS文件,如果文件中有使用import语句...

2019-09-17 11:06:54 82 0

原创 Webpack--自己写一个Loader

先直接来看代码: module.exports = function(source){ return source.replace('Webpack', 'JavaScript'); } 这三行代码就实现了一个最简单的Loader,它的作用是将源码...

2019-09-09 17:42:49 101 0

原创 Webpack之resolve

文章目录resolve.extensions注意resolve.mainFilesresolve.alias resolve.extensions 我们在引入外部模块的时候,通常会有这种写法:import test from './test/test 这种写法就是想从./test目录下去...

2019-09-09 09:52:27 301 0

原创 Webpack之DLL

文章目录引入流程问题 引入 在我们的项目中,免不了要引入许多的第三方模块。这些第三方模块在打包的时候就会被打包进最后生成的文件之中。导致最后生成的文件过大的同时也增加了打包的时间。 这时我们就会想,如果这些第三方模块能只打包一次,之后就直接使用这些打包好的模块多好,毕竟这些第三方的模块代码不会有变...

2019-09-09 09:17:14 161 0

原创 Webpack与ESLint

文章目录概念使用 概念 在团队中,每个人的代码风格都不尽相同。自然的,提交到代码库里的代码也就风格多样。 这不是一个好事,统一的代码风格有助于团队成员理解他人写的代码,也易于维护。 那么想要所有人的代码风格统一,我们就需要用到ESLint。 使用 首先得要安装eslint: yarn add es...

2019-09-07 21:58:30 161 0

原创 webpack-dev-server与单页应用路由

首先是三个使用React编写的文件: index.js: import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { BroswerRouter, ...

2019-09-07 00:24:16 112 0

原创 webpack-dev-server的代理(proxy)

文章目录引入proxy 引入 先看一个例子: import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import axios from 'axios&...

2019-09-06 21:47:28 846 0

原创 Webpack与TypeScript

文章目录引入使用问题 引入 TypeScript是最近一段时间非常火的一个JavaScript的超集。说是超集,那么自然TypeScript也完整的支持JavaScript语法,同时还提供了许多新特性。 那么Webpack也能够对TypeScript的源文件进行打包。 使用 首先创建一个新项目,就...

2019-09-06 17:15:35 78 0

原创 Webpack之Shimming

文章目录引入使用this 引入 首先在index.js内写如下内容: import _ lodash from 'lodash'; import { test } from './test'; console.log(_.join(['a'...

2019-09-02 12:32:30 30 0

原创 Webpack与浏览器缓存

想必大家都知道浏览器是有缓存的。浏览器缓存分为强缓存和协商缓存,在命中强缓存时就不会像服务器请求数据。 那么就产生了一个问题,在强缓存生效的时间内一旦服务器资源发生了变化该怎么办? 办法也很简单,修改资源的文件名。只要文件名不一样,那么请求的url也不一样,那么就相当于请求一个新的资源,自然就不会...

2019-09-02 11:01:35 91 0

原创 Webpack之prefetch和preload

文章目录引入例子 引入 所有新技术的出现都是为了解决现有的问题或者是旧技术没法解决的问题。prefetch和preload也是如此。 现在有两个问题: 首先,代码的懒加载固然能是首页加载的速度变快,可是相应的,待到用户与页面交互再加载交互相关代码会使得用户首次交互的体验不佳(长时间没有对操作进行...

2019-08-29 13:28:22 525 0

原创 Webpack和Code Spliting

文章目录引入Webpack与Code Spliting(代码分割)总结 引入 首先来看一个例子: 我们安装一个ladash的库,引入之后写下列代码: import _ from 'lodash'; console.log(_.join(['a','...

2019-08-28 15:35:40 42 0

原创 Webpack之不同模式的区分打包

文章目录引入初步的区分打包更进一步的区分打包 引入 Webpack针对development和production两种模式各自有一些默认的配置,以及个人设置的一些配置。 例如在开发环境中,我们通常会使用devServer搭配HMR,而且错误信息也会更加全面。而到了生产环境时,Webpack则会默认...

2019-08-28 13:16:06 137 0

原创 Webpack之Tree shaking

文章目录引入使用问题 引入 了解Tree Shaking之前先来看一个例子: math.js: export const add = (a, b) => { console.log(a+b); } export const minus = (a, b) => { co...

2019-08-28 01:47:10 30 0

原创 Webpack之Plugins

文章目录概念HTMLWebpackPlugin使用clean-webpack-plugin使用 概念 plugin可以在Webpack运行到某个时刻的时候,来自动做一些事情,类似于React里的生命周期函数。 HTMLWebpackPlugin 这个插件的主要功能是在打包结束之后,自动在输出目录下...

2019-08-27 11:20:00 71 0

原创 Webpack打包静态资源之图片篇

文章目录占位符更改输出目录url-loader 占位符 我们知道,在打包图片的时候,名字是被file-loader重新命名过的。那如果我想使用图片本身的名字该怎么办呢?同样的,可以在webpack.config.js里配置。 const path = require('path'...

2019-08-26 00:52:11 422 0

原创 Webpack配置文件初步

在命令行中输入: npx webpack 需要打包的文件名 这样便可以对文件进行打包,似乎并不需要所谓的配置文件。而实际上,并不是不需要配置文件,而是因为Webpack自身有一个比较完善的默认配置。 Webpack的默认配置文件名是webpack.config.js。 我们来看一个比较基础的配置...

2019-08-25 21:05:44 28 0

原创 Webpack概念

文章目录引入概念 引入 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi...

2019-08-25 20:28:24 156 0

原创 React源码阅读—React.createRef

文章目录ref的用法源码 ref的用法 在使用React的开发过程中,我们经常会需要获取挂载到网页上的DOM节点,为它绑定事件或者是获取它的值(value)。那么这个时候我们就需要用到ref了。 ref的用法有三种: 第一种是传入一个字符串: <div ref="div&quo...

2019-08-20 09:05:13 181 0

原创 JSX到JavaScript的转换

可能初次接触React的人会惊讶于为什么可以在JS文件中写HTML的语句,例如return <div>hello</div>。 其实这种语法就是JSX,它实际上是一种语法糖。我们想“All-in-JS”,但是无奈HTML那样的标签语法更适合表示界面的结构与层次,于是人们便想...

2019-08-19 22:04:51 780 0

原创 react-redux入门

文章目录概念ProviderconnectmapStateToProps参数stateownProps返回值mapDispatchToProps 概念 React-Redux是Redux的官方React绑定库。它能够使你的React组件从Redux store中读取数据,并且向store分发act...

2019-07-31 11:29:06 76 0

原创 Redux入门

文章目录概念工作流程ActionReducerstorestore的创建 概念 React作为一个视图层框架,天然是不适合用来管理数据的。因为React框架中,父子组件的通信通过props(父向子传递),或者是回调函数(子向父传递)两种方式实现。 若是只是父子组件之间的通信,实现起来还不算太麻烦,...

2019-07-30 16:28:41 30 0

原创 虚拟DOM为何出现以及性能问题

传统的前端编程方式是命令式编程,即直接操纵DOM,告诉浏览器该怎么干。这样的问题就是,大量的代码被用于操作DOM元素,且代码可读性差,可维护性低。 而React、Vue这些数据驱动的前端框架的出现,将命令式编程变为了函数式编程,从而大幅提升代码的可读性、可维护性。 这些框架纵然摒弃了直接操作DOM...

2019-07-24 15:42:53 1162 0

原创 React的PropTypes和DefaultProps

文章目录propTypesPropTypes的验证器基本的JS类型任何可以被渲染的元素react元素某个类的实例枚举类型指定多个类型指定某个类型的数组指定类型为对象且对象的属性是特定类型指定类型为对象且规定哪些属性必须有,哪些可以没有defaultProps propTypes propTypes...

2019-07-24 12:59:42 159 0

提示
确定要删除当前文章?
取消 删除