前端开发
文章平均质量分 90
浮沉半生
从事前端开发,喜欢探究源码,研究新技术。
展开
-
React 18 新特性(三):渐变更新
本文详细介绍了 startTransition、useDeferredValue、useTransition 的用法和使用场景。讲述了低优先级更新的优缺点和启用方式。原创 2021-08-24 17:20:45 · 732 阅读 · 0 评论 -
React 18 新特性(二):Suspense & SuspenseList
本文介绍了 React 18 版本中 `Suspense` 组件和新增 `SuspenseList` 组件的使用以及相关属性的用法。并且和 18 之前的版本做了对比,介绍了新特性的一些优势。原创 2021-08-10 13:42:35 · 2148 阅读 · 0 评论 -
React 18 新特性(一):自动批量更新
本文介绍了 React 18 的自动批量更新特性,和之前版本的批量更新进行了对比。并且使用代码模拟了批量更新的不同实现思路。原创 2021-07-30 17:43:20 · 1691 阅读 · 1 评论 -
使用 Vite 尝鲜 React 18
React 18 目前已经开放 alpha 版本可以供我们体验了,那为了更方便快捷的体验 React 18 新特性,今天使用 Vite 搭建一个简易版的 React 开发环境,帮助我们快速尝鲜。原创 2021-07-30 17:40:54 · 714 阅读 · 0 评论 -
TypeScript 高级类型及用法
TypeScript 高级用法一、高级类型交叉类型(&)联合类型(|)类型索引(keyof)类型约束(extends)类型映射(in)条件判断(三目运算)二、工具类型摘取类型(Extract )排除类型(Exclude)可选(Partial)必选(Required)摘取属性(Picker)排除属性(Omit)属性映射(Record)实例类型(InstanceType)构造函数参数类型(ConstructorParameters)不可为空类型(NonNullable原创 2021-07-16 07:20:53 · 750 阅读 · 3 评论 -
从零到一实现 react-redux
文章目录前言核心 API一、Provider二、connect 高阶函数三、useDispatch 获取 dispatch四、useSelector 获取需要的 state 值写在后面前言上一篇文章 React 中使用 Redux 的正确方法 详细讲解了 redux 以及 react-redux 的使用。这篇文章我们按照上一篇的节奏,实现一下 react-redux 的核心代码。本文已收录在 Github: https://github.com/beichensky/Blog 中,欢迎 Star!原创 2021-03-27 15:23:38 · 198 阅读 · 0 评论 -
React Hooks 常见问题及解决方案
React Hooks 常见问题及解决方案常见问题???? useState 和 setState 有什么明显的区别????? useState 和 useReducer 的初始值如果是个执行函数返回值,执行函数是否会多次执行????? 还原 useReducer 的初始值,为什么还原不回去了????? useEffect 如何模拟 componentDidMount、componentUpdate、componentWillUnmount 生命周期????? 如何在 use原创 2020-09-23 10:50:49 · 9538 阅读 · 1 评论 -
react-dnd 用法详解
本文详细讲解了 react-dnd 的 API 以及用法,并且附上了可供参考的 Demo,希望能够给需要的朋友提供一下帮助。一、概念React DnD 是一组 React 高阶组件,使用的时候只需要使用对应的 API 将目标组件进行包裹,即可实现拖动或接受拖动元素的功能。将拖动的事件转换成对象中对应状态的形式,不需要开发者自己判断拖动状态,只需要在传入的 spec 对象中各个状态属性中做对应...原创 2019-04-16 09:36:42 · 13056 阅读 · 3 评论 -
在 create-react-app 中启用装饰器语法
本文简单介绍了一下如何在 create-react-app 中启用装饰器语法的两种方式。方式一:暴露 create-react-app 的配置暴露出 create-react-app 的所有配置运行命令:$ npm run eject项目中就会展示出各种配置文件。在 babel 中添加 plugins 配置在 package.json 文件中找到 babel 的配置,添加如下代码即...原创 2019-04-03 17:48:39 · 1170 阅读 · 0 评论 -
从零开始搭建一个 React + Mobx + React Router 脚手架
本文详细介绍了如何从零开始搭建一个 React 开发的脚手架,包含如何添加 Redux 以及 React Router 的环境。本文代码地址:react-mobx-starter。建议将代码拉下来之后,配合本文一起查看,效果更佳。代码下载命令:git clone https://github.com/beichensky/react-mobx-starter.git最近将脚手架中的 ...原创 2019-04-30 12:56:25 · 907 阅读 · 2 评论 -
JS 小数运算出现误差的两种解决办法
文章目录问题解决方案限制精确位数先将小数转化为整数,运算之后再重新转化为小数总结本文介绍了解决 JS 中小数运算出现误差的两种解决办法问题在 JS 的小数运算中可能会出现一些问题,比如说下面两种情况:0.1 + 0.2 加法出现精度偏差问题0.14 * 100 乘法出现精度偏差问题解决方案下面简单介绍了两种常用的解决方案:限制精确位数可以限制保留几位小数的方式来避免误差:...原创 2019-05-28 15:31:13 · 8806 阅读 · 2 评论 -
TS 结合 Antd 使用时,部分组件的样式(例如 RangePick)出现问题
问题TS 结合 Antd 使用时,部分组件的样式(例如 RangePick)出现问题。解决办法将 tsconfig.json 中的 module属性修改为:es2015。"module": "es2015"将 babel 配置添加到 ts 和 tsx 的文件解析中。 { test: /\.(ts|tsx)$/, include: path.resolve(_...原创 2019-05-31 17:03:42 · 2636 阅读 · 0 评论 -
为VSCode 设置好看的字体:Operator Mono
在 VSCode 中设置好看的 Operator Mono 字体原创 2019-06-29 17:59:14 · 63793 阅读 · 21 评论 -
使用 JSBridge 与原生 IOS、Android 进行交互(含 H5、Android、IOS 端代码,附 Demo)
本文详细讲述了如何使用 JSBridge 在 H5 和原生 Android、IOS之间进行交互。IOS 端包含 OC 和 Swift 的版本,Android 端包含 Java 和 Kotlin 版本。原创 2019-07-11 20:46:10 · 7307 阅读 · 9 评论 -
Express 的基本使用
本文从安装、用法、常用 API 等方面简单介绍了 Express 的用法。原创 2019-08-14 21:01:57 · 6805 阅读 · 0 评论 -
浅显易懂的原型与原型链知识总结
本文总结了原型以及原型链的一些概念和规律,并且提供了代码示例进行说明。有助于更深一步的理解原型与原型链。原创 2019-08-16 17:12:37 · 553 阅读 · 0 评论 -
ExtJs6入门-使用SenchaCmd命令创建第一个ExtJs6的HelloWorld项目
最近在公司里需要用到ExtJs,所以学习了一下,在这里总结一下是如何创建一个简单的ExtJs项目的,避免以后自己忘记,也希望能为以后需要的朋友提供点帮助。1、首先需要安装SenchaCmd工具SenchaCmd下载地址:https://www.sencha.com/products/extjs/cmd-download/,进入之后选择对应版本进行下载。使用这个工具可以更方便的开发...原创 2017-06-15 16:59:00 · 3719 阅读 · 0 评论 -
React Hooks 使用详解
本文对 16.8 版本之后 React 发布的新特性 Hooks 进行了详细讲解,并对一些常用的 Hooks 进行代码演示,希望可以对需要的朋友提供点帮助。一、Hooks 简介Hooks 是 React v16.7.0-alpha 中加入的新特性。它可以让你在 class 以外使用 state 和其他 React 特性。本文就是演示各种 Hooks API 的使用方式,对于内部的原理这里就...原创 2019-04-08 09:53:46 · 2240 阅读 · 0 评论 -
Webpack3 升级到 webpack4 时遇到的问题汇总
项目在对 webpack 的版本升级的过程中,出现了各种各样的问题,今天就把其中比较典型的问题总结一下,作为记录。一、MissingDeps.some is not a function错误提示中,提示 react-dev-utils 包有问题,TypeError: MissingDeps.some is not a function。解决方案:升级 react-utils-dev 包到...原创 2019-04-04 10:48:59 · 1351 阅读 · 0 评论 -
immutability-helper 插件的基本使用(附源码)
本文介绍了 immutability-helper 插件的基本使用,详细介绍了相关 API 的用法及注意事项。概念先理解一下 Immutable 的概念,Immutable数据就是一旦创建,就不能更改的数据。每当对Immutable对象进行修改的时候,就会返回一个新的Immutable对象,以此来保证数据的不可变。但是由于 Immutable 的 API 和用法学习起来比较困难,所以可以使用...原创 2019-01-07 12:30:06 · 4631 阅读 · 0 评论 -
Redux 基础教程以及结合 React 使用方式
本文教你实现一个最简单的 Redux 应用,以及结合 React 如何使用。Redux简介概念状态管理工具,使用之后可以清晰的知道应用里发生了什么。数据如何修改,如何更新的。出现的动机以前我刚接触 Redux 这类状态管理工具的时候就在想:为什么需要这些东西呢,刷新数据就消失了,也不能持久化存储数据,有啥用呢?后来慢慢的应用越做越多,功能越做越复杂,就会发现,很多数据什么原因修改的,...原创 2019-01-08 14:01:51 · 206 阅读 · 0 评论 -
一分钟学会在 Redux 中使用 redux-thunk 进行异步操作
本文主要介绍了在 Redux 中使用 redux-thunk 进行异步操作。如果对 Redux 尚不熟悉,建议先看我的上一篇博客:Redux 基础教程以及结合 React 使用方式。最下方贴上了 applyMiddleware 和 redux-thunk 的实现源码,有兴趣的同学可以看一看。只能用两个字来形容:优秀。在项目中引入安装插件$ npm install redux-thu...原创 2019-01-08 18:03:35 · 1023 阅读 · 0 评论 -
在 Create React App 中使用 CSS Modules
本文介绍了如何在 Create React App 脚手架中使用 CSS Modules 的两种方式前提条件请先进行全局安装 create-react-app 插件哈,安装命令:npm install create-react-app -g先使用 create-react-app 命令下载一个脚手架工程,安装命令:# 使用 npx$ npx create-react-app my-...原创 2019-01-14 15:55:11 · 2284 阅读 · 4 评论 -
使用 redux-devtools-extension 查看 Redux 中状态变化
本文简单介绍了在 Redux 使用 redux-devtools-extension 插件的用法,可以对状态变化进行可视化查看。本文例子源码源码地址欢迎 Star!欢迎 Watch!前提条件请先安装 redux:npm install redux -Sredux-devtools-extension 的使用用法非常简单,只需要三步,而且代码修改极少,跟着下面的提示进行操作即可...原创 2019-01-09 18:54:53 · 8841 阅读 · 2 评论 -
在 Create React App 中启用 Sass 和 Less
本文介绍了如何在 Create React App 脚手架中启用 Sass 和 Less。前言关于创建 create-react-app 项目请查看: create-react-app 的安装与创建。关于在 less 和 sass 如何在 create-react-app 启用 CSS Modules,请查看我的上一篇文章:在 Create React App 中使用 CSS Module...原创 2019-01-15 13:08:20 · 682 阅读 · 0 评论 -
React 组件生命周期详解
本文详细介绍了 React 生命周期的用法以及各个阶段的生命周期进行,并且用实例代码做了详细演示。代码位置话不多说,先上图上图是基于 React 16.4 之后的生命周期图解。如感觉不对,请先查看 React 版本React 生命周期详解各个阶段的生命周期函数constructor 构造函数在 React 组件挂载之前被调用,实现 React.Component 的子类的构造...原创 2019-01-21 15:35:59 · 382 阅读 · 0 评论 -
PureComponent 使用注意事项以及源码解析
本文简要介绍了 React 中 PureComponent 与 Component 的区别以及使用时需要注意的问题,并在后面附上了源码解析,希望对有疑惑的朋友提供一些帮助。前言先介绍一下 PureComponent,平时我们创建 React 组件一般是继承于 Component,而 PureComponent 相当于是一个更纯净的 Component,对更新前后的数据进行了一次浅比较。只有在...原创 2019-01-16 17:27:41 · 758 阅读 · 0 评论 -
Webpack 的简单介绍
本文介绍了一些 webpack 的核心概念以及一些概念术语,并对核心配置做了一些简单的用法讲解。建议刚刚接触 Webpack 的朋友可以先了解一下。想了解更多 Webpack 使用以及配置的话可以参考我的下一篇文章: 从零开始搭建一个 Webpack 开发环境配置(附 Demo)为什么需要使用 webpack模块化开发的趋势我们在开发的过程中,之前都是使用引入 script 的方式进行...原创 2019-02-01 17:22:05 · 379 阅读 · 0 评论 -
从零开始搭建一个 Webpack 开发环境配置(附 Demo)
本文使用 Webpack 从零开始搭建一个开发环境的脚手架配置,在此做个记录,也方便以后使用。前言我的上一篇文章简单介绍了一下 Webpack 的一些核心概念和基本配置,需要了解的朋友可以先参考一下:Webpack 的简单介绍从 webpack v4.0.0 开始,可以不用引入一个配置文件。直接使用 webpack 命令就可进行打包。但是,一般我们需要进行更灵活的配置功能,所以本文我也创...原创 2019-02-02 10:40:58 · 1115 阅读 · 2 评论 -
使用 Webpack 进行生产环境配置(附 Demo)
本文从代码压缩、代码拆分、样式分离等三个方面对生产环境的代码进行了优化。只是最简单的一些配置,如果真正运用到项目中,还需要根据项目添加更多配置。前言本文讲述的是如何对生产环境下的代码进行压缩,如果还不是太了解 Webpack 的朋友,可以先看一下我的上一篇文章:从零开始搭建一个 Webpack 开发环境配置(附 Demo)本文项目代码位置:源码地址环境搭建项目结构首先编写一个项目,...原创 2019-02-15 14:56:04 · 419 阅读 · 0 评论 -
使用 Webpack 的 DllPlugin 提升项目构建速度
本文介绍了 Webpack 中 DllPlugin 插件的使用,以及配合使用 AddAssetHtmlPlugin 将构建好的 JS 文件插入到 html 页面中。本文 Demo 地址本文项目代码位置:源码地址欢迎 Star!DLLPlugin 和 DllReferencePlugin 简介DLLPlugin 就是将包含大量复用模块且不会频繁更新的库进行编译,只需要编译一次,编译完成...原创 2019-02-18 10:58:55 · 620 阅读 · 0 评论 -
使用 happypack 提升 Webpack 项目构建速度
本文简单介绍了 Happypack 的简单使用,不了解的同学可以进来看一看。也许会有所帮助。Happypack 作用在使用 Webpack 对项目进行构建时,会对大量文件进行解析和处理。当文件数量变多之后,Webpack 构件速度就会变慢。由于运行在 Node.js 之上的 Webpack 是单线程模型的,所以 Webpack 需要处理的任务要一个一个进行操作。而 Happypack 的作...原创 2019-03-05 10:59:28 · 18292 阅读 · 2 评论 -
JavaScript 项目迁移到 TypeScript 步骤以及遇到的问题
本文讲述了如何将 JavaScript 项目迁移到 TypeScript 上,以及如何在项目中添加 TypeScript 配置,编写 TypeScript 代码。一、插件安装安装项目所需插件,一般对应的模块都会有对应的 @types 插件可以使用。不知道的是否需要安装对应的 @types 插件的话,可以到 TypeSearch 进行查找。# 安装项目中使用的插件$ npm install...原创 2019-03-15 11:00:19 · 7411 阅读 · 1 评论 -
使用 TypeScript + React + Redux 进行项目开发(入门篇,附源码)
本文详细介绍了如何使用 Create-React-App 编写 TypeScript + React 项目前言对于 TypeScript + React 开发,MicroSoft 编写了一个 TypeScript-React-Starter 的例子,Github 地址。有需要的朋友可以去看一下。我自己也看了一下,文档说明讲解的很好,但是 Demo 拉下来却无法正常运行,一直报错。所以我自己...原创 2019-03-08 11:02:07 · 6449 阅读 · 7 评论 -
nvm 和 nrm 的安装与使用
本文介绍了如何使用 nvm 切换 node 和 npm 版本,以及如何使用 nrm 切换 npm 下载源。一、NVMNvm 可以切换 node 与 npm 版本,在开发不同项目时,可能会用到不同的 node 与 npm 版本,所以使用 nvm 可以方便的在不同 node 与 npm 版本之间进行切换。写在前面在安装 Nvm 之前,先将之前安装的 node 进行卸载。否则可能会出现无法切...原创 2019-03-19 09:15:05 · 1028 阅读 · 0 评论 -
聊聊TypeScript中类、接口之间相互继承与实现的那些事儿
本文讲述了类的继承、接口的实现中需要注意的一些小细节,同时也对类、接口的多继承做了一些讲解。先看一下继承类的继承子类继承了父类之后,就会将父类中定义的非 private 属性以及方法都继承下来 class Animal { public name: string = "Animal"; public age: number; sayHello(...原创 2019-01-11 18:06:51 · 3708 阅读 · 0 评论