- 博客(229)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 React源码阅读—React.Children.map
文章目录React.map源码阅读React.jsReactChildren.jsmapChildren()mapIntoWithKeyPrefixInternal()getPooledTraverseContext()getPooledTraverseContext()对象池traverseAllChildren()releaseTraverseContext()traverseAllChild...
2019-08-21 13:01:12
1597
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
2441
原创 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
313
原创 TypeScript的数组和元组
数组在TypeScript中数组的定义与JavaScript中别无二致，但是JavaScript中的数组具有很大灵活性，即数组内可以存储任意类型数据。那么在TypeScript中能不能做到呢？答案是肯定的：const arr: (string | number | boolean)[] = [1, '2', true];以上例子都是存储的基础类型数据，对象类型也是可以的，写法基本一致，只...
2020-04-01 16:04:21
4215
原创 TypeScript函数的一些特性
文章目录函数返回值类型never类型解构赋值函数返回值类型function getSum(a: number, b: number): number { return a + b;}在参数声明后面的“: number”就是指明了函数返回值的类型。理论上是可以不用添加的，因为TypeScript可以进行类型推断，从而推断出该函数的返回值类型是number。但是，在开发中还是加上的好，...
2020-04-01 16:02:52
398
原创 TypeScript的类型注解和类型推断
TypeScript希望开发者写出的代码中每个变量的类型都是确定的，而想要做到这一点就需要类型注解和类型推断。类型注解（Type annotation）所谓类型注解，就是人为为一个变量指定类型，例如：const count: number = 123;const word: word = '123';// TypeScript中一个变量的类型并不一定是固定的，例如let temp: ...
2020-04-01 15:56:33
2116
原创 再理解—JavaScript的变量提升
学习过前端的同学们应该都对变量提升的概念不陌生，这对于没有接触过JavaScript开发的同学来说是一种极其反常识的现象。当时对这种现象并没有什么理解，只是了解并记住了这种现象。到了今天，我想重新描述我的理解，当然，未必准确，纯当抛砖引玉。首先来看一段代码：console.log(test)var test = 'Hello world'foo()function foo(){ ...
2019-11-29 00:49:39
222
原创 WebRTC之MediaRecorder
文章目录构造参数方法MediaRecorder.start(timeslice)MediaRecorder.isTypeSupported()MediaRecorder.resume()MediaRecorder.stop()MediaRecorder.pause()事件下载所录制的数据MediaRecorder这个类是用来对指定的MediaStream进行录制的。构造其构造方法为：con...
2019-11-16 20:05:02
1278
原创 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
157
原创 RPC（远程过程调用）
文章目录概念RPC与RESTFUL概念所谓远程过程调用是相对本地调用来说的。例如现在有一个计算器类，类中有一个成员方法叫add。那如果我们想调用ada方法用本地调用就是new一个计算器类对象，然后执行该对象的add方法即可。如果是远程过程调用，那么就意味着所调用的函数的真正逻辑并不是在本地而是在远端服务器上。那么该怎么去调用服务器上的相关逻辑呢？我们第一个想到的肯定是B/S结构，即服务器上...
2019-11-09 19:41:06
260
原创 React--自定义hooks
React内置的hooks函数解决了函数组件无法使用state以及在传统写法中生命周期函数混乱和this指向的问题。而hooks所带来的组件复用性的提升则是由自定义hooks来体现的。传统的组件复用多是渲染属性或者是高阶组件这两种方式，缺点除了写起来会相对复杂，还会造成组件层级过多。先来看一个自定义hooks的例子：function useSize(){ const [size. ...
2019-10-16 23:56:54
4387
原创 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
115372
14
原创 React—useMemo与useCallback
看到“memo”这个字眼，很多人应该会想到memo方法。这是一个高阶函数，它会返回一个函数组件，作用相当于PureComponent。而useMemo的作用也有点像，只不过它不是作用在函数组件上，而是在一段逻辑上，例如：const [count, setCount] = useState(0);const doubleCount = useMemo(() => { retur...
2019-10-16 13:25:29
1945
原创 React--useContext
在出现useContext之前，使用context的方式主要是两种，第一种需要使用Consumer：class Component2 extends Component{ render(){ return ( <CountContext.Consumer> { count => <div>{count}&l...
2019-10-16 12:50:30
1504
原创 React之lazy与suspense
文章目录动态importlazysuspenseError boundariesgetDerivedStateFromErrorcomponentDidCatch动态import在说lazy和suspense之前，还是先说说动态import这种语法。import语句我们使用的很多，通常是import ... from '...'这样的写法，这样的写法也被称作是静态加载。而所谓的动态impo...
2019-10-15 20:40:05
1193
原创 React之Context
文章目录概念APIcreateContext使用注意概念Context可以让数据在组件树中自上而下自由传递，而不需要在树中层层的传递。层层传递不仅在编写代码的时候会十分繁琐，而且中间层级可能根本不关心所要传递的数据，所以也为后期的维护制造理解上的障碍。可以将Context简单理解为一个全局变量。APIcreateContext这是Context的一个核心API，从名字就可以看出，这是用...
2019-10-09 15:36:18
252
原创 实现一个类似Webpack的基础打包工具
文章目录引入步骤简述具体实现分析文件源码解析分析依赖关系源码解析生成最终代码源码解析引入其实在Webpack官网，可以看到官方对于Webpack的定位是一个打包工具。而它最基础的使用就是在浏览器中实现JS的模块化和将ES6转为ES5。浏览器中引入一个JS文件，如果文件中有使用import语句进行模块的引入，浏览器是会报错的。那么我们要实现的这个基础的打包工具也就是用来解决这个问题的。步骤...
2019-09-17 11:06:54
493
原创 Webpack--自己写一个Loader
先直接来看代码：module.exports = function(source){ return source.replace('Webpack', 'JavaScript');}这三行代码就实现了一个最简单的Loader，它的作用是将源码中出现的所有’Webpack’替换成’JavaScript’。参数source就是所处理的文件的代码，是一个字符串。所导出的函数必须是使用...
2019-09-09 17:42:49
662
原创 Webpack之resolve
文章目录resolve.extensions注意resolve.mainFilesresolve.aliasresolve.extensions我们在引入外部模块的时候，通常会有这种写法：import test from './test/test这种写法就是想从./test目录下去引入test.js。可是再进行React的开发时，我们经常会将文件后缀命名为.jsx。那么再通过上面那样的写法...
2019-09-09 09:52:27
1218
原创 Webpack之DLL
文章目录引入流程问题引入在我们的项目中，免不了要引入许多的第三方模块。这些第三方模块在打包的时候就会被打包进最后生成的文件之中。导致最后生成的文件过大的同时也增加了打包的时间。这时我们就会想，如果这些第三方模块能只打包一次，之后就直接使用这些打包好的模块多好，毕竟这些第三方的模块代码不会有变动。那么，我们再次打包目标代码时就不需要再从node_modules中去寻找第三方模块，而是从我们预...
2019-09-09 09:17:14
1658
原创 Webpack与ESLint
文章目录概念使用概念在团队中，每个人的代码风格都不尽相同。自然的，提交到代码库里的代码也就风格多样。这不是一个好事，统一的代码风格有助于团队成员理解他人写的代码，也易于维护。那么想要所有人的代码风格统一，我们就需要用到ESLint。使用首先得要安装eslint：yarn add eslint然后进行ESLint的初始化：npx eslint --init初始化过程会让我们...
2019-09-07 21:58:30
983
原创 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
556
原创 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
6699
原创 Webpack与TypeScript
文章目录引入使用问题引入TypeScript是最近一段时间非常火的一个JavaScript的超集。说是超集，那么自然TypeScript也完整的支持JavaScript语法，同时还提供了许多新特性。那么Webpack也能够对TypeScript的源文件进行打包。使用首先创建一个新项目，就叫typescript。然后在项目根目录下新建src文件夹、webpack.config.js配置文...
2019-09-06 17:15:35
708
原创 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
161
原创 Webpack与浏览器缓存
想必大家都知道浏览器是有缓存的。浏览器缓存分为强缓存和协商缓存，在命中强缓存时就不会像服务器请求数据。那么就产生了一个问题，在强缓存生效的时间内一旦服务器资源发生了变化该怎么办？办法也很简单，修改资源的文件名。只要文件名不一样，那么请求的url也不一样，那么就相当于请求一个新的资源，自然就不会去使用缓存（尽管缓存依然存在）。那么现在我们的需求便是希望文件名能够体现文件有没有被修改过，如果两次...
2019-09-02 11:01:35
249
原创 Webpack之prefetch和preload
文章目录引入例子引入所有新技术的出现都是为了解决现有的问题或者是旧技术没法解决的问题。prefetch和preload也是如此。现在有两个问题：首先，代码的懒加载固然能是首页加载的速度变快，可是相应的，待到用户与页面交互再加载交互相关代码会使得用户首次交互的体验不佳（长时间没有对操作进行响应）。其次，在SplitChunksPlugin的默认配置中，chunks字段默认是为async的...
2019-08-29 13:28:22
3243
原创 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
179
原创 Webpack之不同模式的区分打包
文章目录引入初步的区分打包更进一步的区分打包引入Webpack针对development和production两种模式各自有一些默认的配置，以及个人设置的一些配置。例如在开发环境中，我们通常会使用devServer搭配HMR，而且错误信息也会更加全面。而到了生产环境时，Webpack则会默认开启Tree shaking，也会对代码进行压缩。用过create-react-app的人肯定都知道...
2019-08-28 13:16:06
1046
原创 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
163
原创 Webpack之Plugins
文章目录概念HTMLWebpackPlugin使用clean-webpack-plugin使用概念plugin可以在Webpack运行到某个时刻的时候，来自动做一些事情，类似于React里的生命周期函数。HTMLWebpackPlugin这个插件的主要功能是在打包结束之后，自动在输出目录下生成一个html文件，并把打包生成的JS文件自动的引入到这个html文件中。使用const pat...
2019-08-27 11:20:00
531
原创 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
1332
原创 Webpack配置文件初步
在命令行中输入：npx webpack 需要打包的文件名这样便可以对文件进行打包，似乎并不需要所谓的配置文件。而实际上，并不是不需要配置文件，而是因为Webpack自身有一个比较完善的默认配置。Webpack的默认配置文件名是webpack.config.js。我们来看一个比较基础的配置写法：const path = require('path');module.exports =...
2019-08-25 21:05:44
105
原创 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
237
原创 React源码阅读—React.createRef
文章目录ref的用法源码ref的用法在使用React的开发过程中，我们经常会需要获取挂载到网页上的DOM节点，为它绑定事件或者是获取它的值（value）。那么这个时候我们就需要用到ref了。ref的用法有三种：第一种是传入一个字符串：<div ref="div"></div>那么当节点渲染到页面上之后，通过this.ref.div就可以获取到这个节点对应的...
2019-08-20 09:05:13
413
原创 JSX到JavaScript的转换
可能初次接触React的人会惊讶于为什么可以在JS文件中写HTML的语句，例如return <div>hello</div>。其实这种语法就是JSX，它实际上是一种语法糖。我们想“All-in-JS”，但是无奈HTML那样的标签语法更适合表示界面的结构与层次，于是人们便想出了JSX这种方法，即在JS中写标签，但是实际上最终编译时又会被转换为JavaScript。那么，被...
2019-08-19 22:04:51
4041
原创 react-redux入门
文章目录概念ProviderconnectmapStateToProps参数stateownProps返回值mapDispatchToProps概念React-Redux是Redux的官方React绑定库。它能够使你的React组件从Redux store中读取数据，并且向store分发actions以更新数据。ProviderReact-redux提供了Provider组件，能够使整个a...
2019-07-31 11:29:06
179
原创 Redux入门
文章目录概念工作流程ActionReducerstorestore的创建概念React作为一个视图层框架，天然是不适合用来管理数据的。因为React框架中，父子组件的通信通过props（父向子传递），或者是回调函数（子向父传递）两种方式实现。若是只是父子组件之间的通信，实现起来还不算太麻烦，若是跨层级的通信，则需要多个组件之间层层通信，实现起来不仅麻烦而且性能也不好。还有我们知道React...
2019-07-30 16:28:41
148
原创 虚拟DOM为何出现以及性能问题
传统的前端编程方式是命令式编程，即直接操纵DOM，告诉浏览器该怎么干。这样的问题就是，大量的代码被用于操作DOM元素，且代码可读性差，可维护性低。而React、Vue这些数据驱动的前端框架的出现，将命令式编程变为了函数式编程，从而大幅提升代码的可读性、可维护性。这些框架纵然摒弃了直接操作DOM，我们只要关心数据的变动，DOM的操作由框架完成。但是这样做带来了一些性能问题。在最原始的情况下，框...
2019-07-24 15:42:53
2588
1
原创 React的PropTypes和DefaultProps
文章目录propTypesPropTypes的验证器基本的JS类型任何可以被渲染的元素react元素某个类的实例枚举类型指定多个类型指定某个类型的数组指定类型为对象且对象的属性是特定类型指定类型为对象且规定哪些属性必须有，哪些可以没有defaultPropspropTypespropTypes是React中组件的一个特殊属性。设置它，可以为组件的props属性进行类型的检查。要设置组件的pr...
2019-07-24 12:59:42
601
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人