自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(229)
  • 问答 (1)
  • 收藏
  • 关注

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

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

2019-08-21 13:01:12 1631 1

原创 React源码阅读—React.forwardRef

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

2019-08-20 09:50:29 2466

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

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

2019-08-19 23:40:01 337

原创 TypeScript的数组和元组

数组在TypeScript中数组的定义与JavaScript中别无二致,但是JavaScript中的数组具有很大灵活性,即数组内可以存储任意类型数据。那么在TypeScript中能不能做到呢?答案是肯定的:const arr: (string | number | boolean)[] = [1, '2', true];以上例子都是存储的基础类型数据,对象类型也是可以的,写法基本一致,只...

2020-04-01 16:04:21 4327

原创 TypeScript函数的一些特性

文章目录函数返回值类型never类型解构赋值函数返回值类型function getSum(a: number, b: number): number { return a + b;}在参数声明后面的“: number”就是指明了函数返回值的类型。理论上是可以不用添加的,因为TypeScript可以进行类型推断,从而推断出该函数的返回值类型是number。但是,在开发中还是加上的好,...

2020-04-01 16:02:52 462

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

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

2020-04-01 15:56:33 2175

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

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

2019-11-29 00:49:39 248

原创 WebRTC之MediaRecorder

文章目录构造参数方法MediaRecorder.start(timeslice)MediaRecorder.isTypeSupported()MediaRecorder.resume()MediaRecorder.stop()MediaRecorder.pause()事件下载所录制的数据MediaRecorder这个类是用来对指定的MediaStream进行录制的。构造其构造方法为:con...

2019-11-16 20:05:02 1329

原创 Git--基础

文章目录git init昵称和邮箱查看昵称和邮箱git config user.namegit config user.email.配置昵称和邮箱git config --global user.namegit config --global user.email修改昵称和邮箱git config --global --replace-all user.name 'your name here'g...

2019-11-09 19:49:09 176

原创 RPC(远程过程调用)

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

2019-11-09 19:41:06 284

原创 React--自定义hooks

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

2019-10-16 23:56:54 4441

原创 React—useRef

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

2019-10-16 15:53:04 115538 14

原创 React—useMemo与useCallback

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

2019-10-16 13:25:29 1994

原创 React--useContext

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

2019-10-16 12:50:30 1533

原创 React之lazy与suspense

文章目录动态importlazysuspenseError boundariesgetDerivedStateFromErrorcomponentDidCatch动态import在说lazy和suspense之前,还是先说说动态import这种语法。import语句我们使用的很多,通常是import ... from '...'这样的写法,这样的写法也被称作是静态加载。而所谓的动态impo...

2019-10-15 20:40:05 1265

原创 React之Context

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

2019-10-09 15:36:18 299

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

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

2019-09-17 11:06:54 511

原创 Webpack--自己写一个Loader

先直接来看代码:module.exports = function(source){ return source.replace('Webpack', 'JavaScript');}这三行代码就实现了一个最简单的Loader,它的作用是将源码中出现的所有’Webpack’替换成’JavaScript’。参数source就是所处理的文件的代码,是一个字符串。所导出的函数必须是使用...

2019-09-09 17:42:49 687

原创 Webpack之resolve

文章目录resolve.extensions注意resolve.mainFilesresolve.aliasresolve.extensions我们在引入外部模块的时候,通常会有这种写法:import test from './test/test这种写法就是想从./test目录下去引入test.js。可是再进行React的开发时,我们经常会将文件后缀命名为.jsx。那么再通过上面那样的写法...

2019-09-09 09:52:27 1268

原创 Webpack之DLL

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

2019-09-09 09:17:14 1682

原创 Webpack与ESLint

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

2019-09-07 21:58:30 1012

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

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

2019-09-07 00:24:16 582

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

文章目录引入proxy引入先看一个例子:import React, { Component } from 'react';import ReactDOM from 'react-dom';import axios from 'axios';class App extends Component { componentDidMount(){ axios.get(...

2019-09-06 21:47:28 6749

原创 Webpack与TypeScript

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

2019-09-06 17:15:35 745

原创 Webpack之Shimming

文章目录引入使用this引入首先在index.js内写如下内容:import _ lodash from 'lodash';import { test } from './test';console.log(_.join(['a','b','c'], ''));然后在test.js中:console.log(_.join(['1','2','3'], ''));打包后在浏览器中...

2019-09-02 12:32:30 180

原创 Webpack与浏览器缓存

想必大家都知道浏览器是有缓存的。浏览器缓存分为强缓存和协商缓存,在命中强缓存时就不会像服务器请求数据。那么就产生了一个问题,在强缓存生效的时间内一旦服务器资源发生了变化该怎么办?办法也很简单,修改资源的文件名。只要文件名不一样,那么请求的url也不一样,那么就相当于请求一个新的资源,自然就不会去使用缓存(尽管缓存依然存在)。那么现在我们的需求便是希望文件名能够体现文件有没有被修改过,如果两次...

2019-09-02 11:01:35 282

原创 Webpack之prefetch和preload

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

2019-08-29 13:28:22 3326

原创 Webpack和Code Spliting

文章目录引入Webpack与Code Spliting(代码分割)总结引入首先来看一个例子:我们安装一个ladash的库,引入之后写下列代码:import _ from 'lodash';console.log(_.join(['a','b','c'], ''));...// 假设下面还有许多业务代码首先我们假设lodash的大小为1MB,我们写的业务逻辑代码也有1MB,那么在...

2019-08-28 15:35:40 190

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

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

2019-08-28 13:16:06 1079

原创 Webpack之Tree shaking

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

2019-08-28 01:47:10 203

原创 Webpack之Plugins

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

2019-08-27 11:20:00 554

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

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

2019-08-26 00:52:11 1364

原创 Webpack配置文件初步

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

2019-08-25 21:05:44 120

原创 Webpack概念

文章目录引入概念引入<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...

2019-08-25 20:28:24 245

原创 React源码阅读—React.createRef

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

2019-08-20 09:05:13 436

原创 JSX到JavaScript的转换

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

2019-08-19 22:04:51 4175

原创 react-redux入门

文章目录概念ProviderconnectmapStateToProps参数stateownProps返回值mapDispatchToProps概念React-Redux是Redux的官方React绑定库。它能够使你的React组件从Redux store中读取数据,并且向store分发actions以更新数据。ProviderReact-redux提供了Provider组件,能够使整个a...

2019-07-31 11:29:06 194

原创 Redux入门

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

2019-07-30 16:28:41 165

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

传统的前端编程方式是命令式编程,即直接操纵DOM,告诉浏览器该怎么干。这样的问题就是,大量的代码被用于操作DOM元素,且代码可读性差,可维护性低。而React、Vue这些数据驱动的前端框架的出现,将命令式编程变为了函数式编程,从而大幅提升代码的可读性、可维护性。这些框架纵然摒弃了直接操作DOM,我们只要关心数据的变动,DOM的操作由框架完成。但是这样做带来了一些性能问题。在最原始的情况下,框...

2019-07-24 15:42:53 2626 1

原创 React的PropTypes和DefaultProps

文章目录propTypesPropTypes的验证器基本的JS类型任何可以被渲染的元素react元素某个类的实例枚举类型指定多个类型指定某个类型的数组指定类型为对象且对象的属性是特定类型指定类型为对象且规定哪些属性必须有,哪些可以没有defaultPropspropTypespropTypes是React中组件的一个特殊属性。设置它,可以为组件的props属性进行类型的检查。要设置组件的pr...

2019-07-24 12:59:42 623

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

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