自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(324)
  • 收藏
  • 关注

原创 react 从入门到实践之 react 的虚拟 DOM 和 Diff 算法

一、react 的虚拟 DOM 和 Diff 算法虚拟 DOM和diff算法是 React中非常核心的两个概念, 我们需要对此有一个很全面的认知。这对于我们用脚手架开发项目, 尤其是企业中前后端分离的项目(类似: 后台管理系统)等有很大的帮助。对于虚拟 DOM的内部执行流程,如下所示:用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中;当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异;把

2021-05-05 15:29:42 46

原创 react 从入门到实践之 react 的生命周期函数和原理

一、react 的生命周期函数组件的生命周期可以帮助我们清楚的剖析一个组件从创建到销毁的全部流程。如果能够做到知其然且知其所以然, 那么在后期多组件、中大型项目开发过程中,就能够很好的把控项目的性能细节。react 生命周期阶段划分,如下所示:初始化阶段,在组件初始化阶段会执行,主要有 constructor、componentWillMount、render 和 componentDidMount更新阶段,props 或 state 的改变可能会引起组件的更新,组件重新渲染的过程中

2021-05-05 15:25:50 56

原创 react 从入门到实践之基础总结二

一、React中的组件/模块、 组件化/模块化对于组件,如下所示:一个应用/版块/页面中用于实现某个局部的功能(包括 html, js, css 等)把这些局部功能组装到一起就形成了完整的一个大的功能主要目的在于: 复用代码, 提高项目运行效率对于组件化,如果一个应用是用多组件的方式进行综合开发的, 那么这个应用就是一个组件化应用。对于模块,多个组件形成模块, 或者是一个提供特定功能的 js 文件, 主要特点在于耦合性低, 可移植性高, 执行效率好。对于模块化,如果一个

2021-05-05 15:20:43 55 2

原创 react 从入门到实践之基础总结一

一、为什么要学习React前言,选择任何一门语言学习都是有时间和金钱的成本的,那么 React 值得学习。学习的必要性,如下所示:使用组件化开发方式,符合现代 Web 开发的趋势; 企业前后端项目分离,唯有 React 是首选;技术成熟,社区完善,配件齐全,适用于大型 Web 项目(生态系统健全);由 Facebook 专门的团队维护,技术支持可靠;ReactNative - Learn once, write anywhere: Build mobile apps with React

2021-05-05 15:07:50 49 2

原创 对于 React 结合 Antd 的 Table 组件实现表格的渲染、新增、修改和删除

一、React 结合 Antd 实现表格的渲染、新增、修改和删除引入所需相关的组件和文件,代码如下所示:import React, { Component } from 'react'import { Card, Button, Table, Modal, message } from 'antd'import LinkButton from '../../components/linkButton/index'import { formateDate } from '../../utils/

2021-03-21 22:55:42 159

原创 对于 React 结合 Antd 实现富文本编辑功能

一、React 结合 Antd 实现富文本编辑引入所需相关的组件和文件,代码如下所示:import React, { Component } from 'react'import PropTypes from 'prop-types'import {EditorState, convertToRaw, ContentState} from 'draft-js'import {Editor} from 'react-draft-wysiwyg'import draftToHtml from '

2021-03-21 22:47:00 90

原创 对于 React 结合 Antd 的 Upload 组件实现图片上传

一、 React 结合 Antd 实现图片上传引入所需相关的组件和文件,代码如下所示:import React, { Component } from 'react'import PropTypes from 'prop-types'import { Upload, Icon, Modal, message } from 'antd'import { reqDeleteImg } from '../../api'import { BASE_IMG_URL } from '../../util

2021-03-21 22:42:49 125

原创 对于 React 结合 Antd 实现左侧菜单的权限列表

一、React 结合 Antd 实现权限列表引入所需相关的组件和文件,如下所示:import React, { Component } from 'react'import { Link, withRouter } from 'react-router-dom'import { Menu, Icon } from 'antd'import logo from '../../assets/images/logo.png'import menuList from '../../config/me

2021-03-21 11:08:32 33

原创 对于 React 结合 Antd 的 Form 组件实现登录功能

一、React 结合 Antd 实现登录功能引入所需的 Antd 组件,代码如下所示:import { Form, Icon, Input, Button, message } from 'antd'在 Login.jsx 中,创建一个 Login 组件。当对外暴露组件时,需要使用 Form 组件进行包装,包装 Form 组件生成一个新的组件 Form(Login),同时新组件会向 Form 组件传递一个强大的对象属性 form,这样就可以取到 Form 表单的值,这也是高阶组件和高阶函数的体

2021-03-21 11:02:37 89

原创 对于 React 中 高阶函数和高阶组件的理解

一、高阶函数和高阶组件高阶函数,是一类特别的函数,接受函数类型的参数,返回值是函数。对于常见的高阶函数,如下所示:定时器: setTimeout()/setInterval()Promise: Promise(() => {}) then(value => {}, reason => {})数组遍历相关的方法: forEach()/filter()/map()/reduce()/find()/findIndex()函数对象的 bind()Form.create(

2021-03-21 10:04:51 25

原创 对于 React 中 context 的理解

一、Context 的认识在 React 中,父子组件通信的机制,父子组件的通信是通过 props 进行数据的传递,如下所示:父组件向子组件传递数据(状态)时,是在调用子组件的时候通过参数传递给子组件,子组件通过 this.props 进行接收子组件如果更改父组件的一些属性,则是通过父组件定义的方法来传递给子组件,子组件调用更改如果父组件想要更改子组件的一些状态时,通过 ref 进行标记,可以获取子组件的所有信息,从而调用子组件的方法和值当层级很多时,使用 props 进行逐层的传递,是不行

2021-03-20 23:16:48 39

原创 对于 React 中 key 的理解

一、React 中的 key在 React 中,虚拟 DOM 的 key 的作用,如下所示:简单的说,key 是虚拟 DOM 对象的标识, 在更新显示时 key 起着极其重要的作用详细的说,当列表数组中的数据发生变化生成新的虚拟 DOM 后, React 进行新旧虚拟 DOM 的 diff 比较对于虚拟 DOM 的 diff 比较,如下所示:key 没有变,item 数据没变, 直接使用原来的真实 DOM;item 数据变了, 对原来的真实 DOM 进行数据更新key 变了,销毁原

2021-03-20 23:15:24 22

原创 对于 React 中 Component 和 PureComponent 的理解

一、Component 和 PureComponent在 React 中,Component 存在的问题,如下所示:父组件重新 render(), 当前组件也会重新执行 render(), 即使没有任何变化当前组件 setState(), 重新执行 render(), 即使 state 没有任何变化对于 React 中解决 Component 存在的问题,如下所示:原因,组件的 componentShouldUpdate() 默认返回 true, 即使数据没有变化 render()

2021-03-20 23:13:23 11

原创 对于 React 中 setState() 的理解

一、setState() 的使用setState() 更新状态的两种写法,如下所示:setState(updater, [callback]),updater 为返回 stateChange 对象的函数: (state, props) => stateChange,接收的 state 和 props 被保证为最新的setState(stateChange, [callback]),stateChange 为对象,callback 是可选的回调函数,在状态更新且界面更新后才执行对于 s

2021-03-20 23:10:15 15

原创 react 的性能优化

一、性能永远是第一需求,时刻考虑性能问题如何避免应用出现性能问题,如下所示:了解常见的性能问题场景时刻注意代码的潜在性能问题注重可重构的代码了解如何使用工具定位性能问题二、网络性能优化,自动化按需加载如何在 React 中实现按需加载,如下所示:什么是按需加载使用 webpack 的 import API使用 react-loadable 库实现 React 异步加载三、使用 Reselect 避免重复计算Reselect,创建自动缓存的数据,处理流程四、下一代

2021-03-20 23:07:17 23

原创 react 构建可维护可扩展的前端应用

一、前端项目的理想架构前端项目的理想架构,可维护、可扩展、可测试、易开发、易构建对于易于开发,如下所示:开发工具是否完善生态圈是否繁荣社区是否活跃对于易于扩展,如下所示:增加新功能是否容易新功能是否会显著增加系统复杂度对于易于维护,如下所示:代码是否容易理解文档是否健全对于易于测试,如下所示:功能的分层是否清晰副作用少尽量使用纯函数对于易于构建,如下所示:使用通用技术和架构构建工具的选择二、拆分复杂度,按领域模型组织代码,

2021-03-20 23:05:45 14

原创 react 生态圈之 React Router

一、React Router,路由不止是页面切换,更是代码组织方式为什么需要路由,如下所示:单页应用需要进行页面切换通过 URL 可以定位到页面更有语义的组织资源React Router 的特性,如下所示:声明式路由定义动态路由三种路由实现方式,如下所示:URL 路径hash 路由内存路由基于路由配置进行资源组织,如下所示:实现业务逻辑的松耦合易于扩展,重构和维护路由层面实现 Lazy LoadReact Router API,如下所示:

2021-03-20 23:04:17 16

原创 react 生态圈之 Redux

一、Redux 前端为何需要状态管理库Redux,JS 状态管理框架,Redux 让组件通信更加容易,把 store 放在组件外,所有组件和 store 进行中转Redux 特性,如下所示:单向数据流可预测性,state + action = new state纯函数更新 Store二、Redux 深入理解 Store、Action 和 Reducerstore 可以通过 createStore,传入 reducer 进行创建,包含三个方法,如下所示:getState(

2021-03-20 23:02:47 18

原创 react 的基础认识二

一、理解 Virtual DOM 及 key 属性的作用JSX 的运行基础,Virtual DOM虚拟 DOM 的工作,如下所示:广度优先分层比较根节点开始比较属性变化及顺序节点类型发生变化节点跨层移动虚拟 DOM 的两个假设,如下所示:组件的 DOM 结构是相对稳定的类型相同的兄弟节点可以被唯一标识二、组件设计模式,高阶组件和函数作为子组件组件复用的另外两种形式,高阶组件和函数作为子组件高阶组件 HOC,高阶组件接受组件作为参数,返回新的组件

2021-03-20 23:01:27 15

原创 react 的基础认识一

一、React 出现的历史背景及特性介绍传统 Web UI 开发问题出现的根源,如下所示:传统 UI 操作关注太多细节应用程序状态分散在各处,难以追踪 和维护传统 DOM API 关注太多细节,React 始终整体刷新页面,无需关心细节React 很简单,如下所示:1个新概念4个必须 API单向数据流完整的错误提示React 解决了 UI 细节问题,数据模型使用 Flux 架构,单向数据流二、以组件方式考虑 UI 的构建以组件方式考虑 UI,将 UI

2021-03-20 23:00:19 20

原创 TypeError: this.getOptions is not a function 的解决

一、问题的出现:在进行 react 项目开发的时候,出现了这个错误,TypeError: this.getOptions is not a function,如下所示:二. 问题的分析及解决:问题的分析:这个实际上就是 less-loader 的版本过高,不兼容 getOptions 函数方法,所以需要对 less-loader 进行降级处理问题的解决:通过 npm uninstall less-loader 命令卸载原版本的 less-loader,然后 通过 npm i

2021-02-07 23:31:05 20574 7

原创 findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which 的解决

一、问题的出现:在进行 react 项目开发的时候,出现了这个错误,findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. 如下所示:二. 问题的分析及解决:问题的分析:这个错误描

2021-02-04 18:50:16 171

原创 Error: Actions must be plain objects. Use custom middleware for async actions. 的解决

一、问题的出现:在进行 react 项目开发的时候,出现了这个错误,Error: Actions must be plain objects. Use custom middleware for async actions. 如下图所示:二. 问题的分析及解决:问题的分析:这个实际上是异步操作缺少使用自定义中间件,需要使用中间件 redux-thunk问题的解决:通过 npm i redux-thunk --save 命令下载 redux-thunk,然后进行配置使用,如下所示:im

2021-02-03 21:00:33 99

原创 node JS 中 单元测试的应用

一、单元测试单元测试,如下所示:单个功能或接口,给定输入,得到输出,看输出是否符合要求需手动编写用例代码,然后统一执行能一次性执行所有单测,短时间内验证所有功能是否正常通过 npm i jest supertest --save 命令下载 jest 和 supertest在 package.json 文件中 scripts 进行配置,如下所示:"scripts": { "start": "node bin/www", "dev": "cross-env NO

2021-01-26 23:14:36 54

原创 node JS 中 redis 的应用

一、node JS 中的 redis解决方案 redis,如下所示:将 web server 和 redis 拆分为两个单独的服务双方都是独立的,都是可扩展的,例如都扩展成集群包括 mysql,也是一个单独的服务,也可扩展session 适用于 redis,如下所示:session 访问频繁,对性能要求极高session 可不考虑断电丢失数据的问题,这也是内存的硬伤session 数据量不好太大,相比于 mysql 中存储的数据网站数据不适合用 redis,如下所示:

2021-01-17 14:54:15 49

原创 node JS 中 JWT 的应用

一、node JS 中 JWT 的应用JWT,如下所示:JWT,json web token用户认证成功以后,server 端返回一个加密的 token 给客户端客户端后续每次请求都带 token,以示当前的用户身份JWT 和 session,如下所示:为了解决登录和存储登录用户的信息JWT 用户信息加密存储在客户端,不依赖 cookie,可跨域session 用户信息存储在服务端,依赖 cookie,默认不可跨域一般情况下,两者都能满足,大型系统中两者可共用JWT 更适合

2021-01-16 12:16:53 31

原创 node JS 中 sequelize 结合 mysql 实现增加、查询、修改和删除

一、node JS 中 sequelize 结合 mysql 实现增加、查询、修改和删除sequelize 结合 mysql 实现增加,create.js 代码如下所示:const { Blog, User } = require('./model')!(async function () { // 创建用户 const zhangsan = await User.create({ userName: 'zhangsan', password: '123',

2020-12-15 01:18:51 125

原创 node JS 中 sequelize 结合 mysql 的应用配置

一、node JS 中 sequelize 结合 mysql 的应用配置通过 npm i sequelize mysql2 --save 命令下载 sequelize 和 mysql2。seq.js 代码如下所示:const Sequelize = require('sequelize')const config = { // 端口号 host: 'localhost', // 数据库名称 dialect: 'mysql'}// 线上环境,使用连接池config.po

2020-12-13 09:10:55 110

原创 node JS 中安全和防范之 sql 注入、XSS攻击 和 密码加密

一、安全对于安全,如下所示:sql 注入:窃取数据库内容XSS 攻击:窃取前端的 cookie 内容密码加密:保障用户信息安全server 端攻击方式非常多,预防手段也非常多nodejs 可以通过 web server 层面预防有些攻击需要硬件和服务来支持,需要 OP 支持,如 DDOS二、sql 注入sql 注入,如下所示:最原始、最简单的攻击,从有了 web2.0 就有了 sql 注入攻击攻击方式:输入一个 sql 片段,最终拼接成一段攻击代码预防措施:使用 MyS

2020-12-12 00:38:38 115

原创 node JS 中 Koa2 中间件实现原理分析

一、koa2koa2,如下所示:express 中间件是异步回调,koa2 原生支持 async/await新开发框架和系统,都开始基于 koa2,例如 egg.jsexpress 虽然未过时,但是 koa2 肯定是未来趋势async 和 await 要点:await 后面可以追加 promise 对象,获取 resolve 的值await 必须包裹在 async 函数里面async 函数执行返回的也是一个 promise 对象try-catch 截获 promise 中 r

2020-12-10 00:25:29 72 1

原创 node JS 中 express 中间件实现原理分析

一、expressexpress 中间件,如下所示:app.use 用来注册中间件,先收集起来遇到 http 请求,根据 path 和 method 判断触发哪些实现 next 机制,即上一个通过 next 触发下一个express 中间件的实现内部原理,代码如下所示:const http = require('http')const slice = Array.prototype.sliceclass LikeExpress { constructor () {

2020-12-09 00:52:30 150

原创 node JS 项目中日志的应用、拆分及分析

一、nodeJS 中的日志日志,如下所示:访问日志 access log,server 端最重要的日志自定义日志,包括自定义事件、错误记录等nodejs 文件操作,nodejs stream日志功能开发和使用日志文件拆分,日志内容分析日志要存储到文件中,不存储到 mysql 和 redis 中日志的简单应用,代码如下所示:// process.stdin.pipe(process.stdout)// const http = require('http')// cons

2020-12-08 00:11:45 86

原创 node JS 处理 http 请求之 GET 和 POST 请求

一、httphttp 请求概述,如下所示:DNS 解析,建立 TCP 连接,发送 http 请求server 接收到 http 请求,处理,并返回客户端接收到返回数据,处理数据,如渲染页面,执行 JSnode JS 处理 http 请求,如下所示:get 请求和 querystringpost 请求和 postdata路由二、node JS 处理 get 请求node JS 处理 get 请求,如下所示:get 请求,即客户端要向 server 端获取数据,如查询

2020-12-06 14:28:29 103

原创 Node JS 初识

一、NVMnvm 可以切换 node 版本,管理 node,下载地址 https://github.com/coreybutler/nvm-windows/releases,如下所示:nvm-noinstall.zip:绿色免安装版,但使用时需进行配置。nvm-setup.zip:安装版,推荐使用nvm 常用命令,如下所示:nvm list 查看当前所有的 node 版本nvm install v10.13.0 安装指定的版本nvm use -delete-prefix 10.1

2020-12-05 00:23:31 86

原创 webpack 工程实践化总结之常用 loader 和 plugin 总结

一、常用 loaderJavaScript 相关,如下所示:babel-loader:把 ES6 转换成 ES5;script-loader:可以将指定的模块 JavaScript 文件转成纯字符串通过 eval 方式执行;exports-loader:可以导出指定的对象,例如 window.Zepto;ts-loader:把 TypeScript 转换成 JavaScript;imports-loader:将任意三方的对象添加到 window 对象中。样式相关,如下所示:st

2020-12-04 01:10:44 111

原创 webpack 工程化实践总结之webpack 核心模块、Compiler 和 Compilation、基本流程和 HMR

一、webpack 核心模块Webpack 工程相当庞大,但 Webpack 本质上是一种事件流机制。通过事件流将各种插件串联起来,最终完成 Webpack 的全流程,而实现事件流机制的核心是 Tapable 模块。Webpack 负责编译的 Compiler 和创建 Bundle 的 Compilation 都是继承自 Tapable。Webpack 核心库 Tapable 的原理和 EventEmitter 类似,但是功能更强大,包括多种类型,通过事件的注册和监听,触发 Webpack 生命周期

2020-12-03 00:40:31 641

原创 webpack 工程化实践总结之 NPM Scripts 及 Webpack 综合配置最佳实践

一、使用 NPM Scripts 来管理开发命令使用 NPM Scripts 来配置开发命令,即 package.json 的 scripts 字段,这样即使我们修改脚本甚至切换 Webpack 到其他的打包工具,对于团队其他成员来说,使用的命令还是不变的,建议的命令包括:npm start:相当于 npm run start,用于开发命令,快速启动本地开发服务;npm run build:用于生产环境打包;其他命令,类似 npm run test/lint 等,根据相关的需要添加即可在

2020-11-24 01:26:44 126

原创 webpack 工程化实践总结之性能优化

一、代码体积优化JavaScript 压缩:在 mode=production 下,Webpack 会自动压缩代码,我们可以自定义自己的压缩工具,这里推荐 terser-webpack-plugin,它是 Webpack 官方维护的插件,使用 terser 来压缩 JavaScript 代码。UglifyJS 在压缩 ES5 方面做的很优秀,但是随着 ES6 语法的普及,UglifyJS 在 ES6 代码压缩上做的不够好,所以有了uglify-es 项目,但是之后 uglify-es 项目不在维护了,

2020-11-22 15:13:20 138 1

原创 微信小程序的视图层总结

一、微信小程序的WXML语法数据绑定将 data 中的变量用大括号进行包裹起来,{{}},类似插值表达式,如 {{ message}}列表渲染列表渲染通过wx:for指令可以对data数据进行渲染,渲染时加上wx:key,进行唯一标识,通过wx:for-item可以指定数组当前元素的变量名,通过wx:for-index可以指定数组当前下标的变量名,代码示例如下 <view wx:for="{{ items }}" wx:key="{{ index }}"> {{ item

2020-11-14 00:43:48 309

原创 微信小程序的逻辑层总结

一、全局配置文件 App.jsonLaunch(Object object) 小程序初始化完成时触发,全局只触发一次,生命周期回调—监听小程序初始化onShow(Object object)小程序启动,或从后台进入前台显示时触发,生命周期回调-监听小程序启动或切前台onHide()小程序从前台进入后台时触发,生命周期回调—监听小程序切后台onError(String error)小程序发生脚本错误或 API 调用报错时触发onPageNotFound(Object object)小程序要

2020-11-13 00:23:47 191

空空如也

空空如也

空空如也

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

TA关注的人 TA的粉丝

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