自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 解析React 虚拟DOM和Diff算法

一、 JSX众所周知,React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展,其本质是 createElement()方法的语法糖 (语法糖:更加直观、简洁、友好)。JSX 代码会经过babel-loader 会解析为 React.createElement()嵌套对象。React.createElement() 创建的就是一个虚拟DOM结构。二、 虚拟DOM通过React.createElement(…)创建的虚拟DOM描

2022-01-13 17:14:44 418 1

原创 React事件机制 – 合成事件

React事件机制是React重要的基础知识,也是面试过程中经常被提及的问题。本文将介绍React事件机制 - 合成事件的概念以及作用等知识点,本文将重点以React V17版本为准。一、 概念介绍React基于浏览器的事件机制自身实现了一套事件机制,包括事件注册、事件的合成、事件冒泡、事件派发等,在React中这套事件机制被称之为合成事件。与原生事件直接在元素上注册的方式不同的是,React的合成事件不会直接绑定到目标DOM节点上,用事件委托机制,以队列的方式,从触发事件的组件向父组件回溯,直到Ro

2022-01-10 18:50:54 1053

原创 Chrome开发工具使用技巧

一、 打开Chrome开发工具. 在Chrome菜单中选择:更多工具 > 开发者工具. 页面点击右键 > 检查. 快捷键也可以用来打开开发工具: Cmd + Opt+ I (Window:Ctrl + Shift + I )或按 F12二、 Chrome开发简介目前,开发工具工具主要有八个功能(位置可根据自己需求拉拽调整),本文会重点介绍前四个。. 元素: 元素面板让你看到一个 DOM 树的全部相关信息,并允许你检查以及在传输过程中编辑 DOM 元素. 控制台: 为开发者提供了测试

2021-12-14 22:06:45 10249

转载 从零学习Jenkins部署前端项目(MacOs)

Jenkins是现在最常用的部署工具之一,对于开发人员来说,肯定都不陌生。由于项目中,使用到Jenkins已经是前辈配置好的,对其流程,我知之甚少,为了更熟悉Jenkins的配置方式,我打算尝试从零开始学习,尝试Jenkins部署前端项目。1. 安装Jenkins1.1. 安装openjdk-8-jdkJenkins依赖于java的openjdk,所以安装之前先安装openjdk-8-jdk。输入jave-version查看本地是否安装openjdk(因为多数开发人员之前已经安装过openjdk)。如

2021-10-18 18:01:39 470

原创 React和Angular的生命周期解析

React和Angular都具有生命周期,他们的生命周期分别时什么样的?二者生命周期间又有没有什么共同点呢,我们可以一起探讨一下。1、React的生命周期React的生命周期主要分为两个版本(以16.4版本划分),为了更好理解,我们将两个版本分为“初始版本”和“更新版本”。下面我们将首先介绍React “初始版本”的生命周期。**1.1 React “初始版本”的生命周期。**React “初始版本”的生命周期方法主要有以下几种,他们的简要定义如下:constructor:完成了React数据

2021-10-14 21:40:41 250

原创 浅谈EditorConfig、Prettier以及Eslint的使用

浅谈EditorConfig、Prettier以及Eslint的使用EditorConfig、Prettier以及Eslint都用于实现前端代码规范化的工具,它们的功能分别如下: EditorConfig: 专注于统一编辑器编码风格配置 Prettier: 专注于检查并自动更正代码风格,美化代码 Eslint: 专注于 JavaScript 代码质量检查, 编码风格约束等下面将简要介绍一下这三种工具:EditorConfig由于不同开发人员可能使用不同的编辑器,而不同编辑器有不同的编程

2021-10-11 22:13:02 1335

原创 Angular 学习总结

标题 Angular 学习总结 由于博主本人之前只接触过React, 对Angular几乎一无所知。上个月,在我司社区的组织下,截至目前学习了近一个月的Angular,对Angular有了一些非常基础的认识。下面对本月学习心得做总结,期待大家的批评指正。标题 1、Angular的结构 Angular是一个基于 TypeScript 构建的开发平台, 一个基于组件的框架。 Angular的组件包括三个部分:带有 @Component() 装饰器的 TypeScript 类(.ts)、HTML 模

2021-09-07 20:39:50 763

原创 React hooks的使用及其差异

标题React hooks的使用及其差异下面,我将我最近学习到的React Hooks相关的知识整理为博客,给大家一起分享!Hooks是React 16.8中的新增功能。它们使开发者在不编写 class 的情况下使用 state 以及其他的 React 特性。一、 使用Hooks的动机早期的React 只支持纯函数组件,如//纯函数组件function Welcome(props) { return <h1>Hello, {props.name}</h1>;}这种纯函

2021-03-27 17:28:00 477

原创 2020-12-22

**npm 几种安装方式的介绍**1.npm install 本地安装(1)将安装包放在 ./node_modules 下(运行 npm 命令时所在的目录),如果没有 node_modules 目录,会在当前执行 npm 命令的目录下生成 node_modules 目录。(2)可以通过 require() 来引入本地安装的包。2.npm install -g 全局安装(1) 将安装包放在 /usr/local 下或者你 node 的安装目录。(2)可以直接在命令行里使用。3.n

2020-12-22 21:30:54 47

原创 2020-11-19

文章目录前言二、解决步骤1.关闭mysql服务2.在终端中以管理员权限启动mysqld_safe,命令如下:3.不要关闭当前的终端窗口,新建一个终端窗口,输入如下命令,回车登录mysql4.在mysql窗口输入命令5.更改mysql密码总结前言Mac安装mysql时忘记记录初始密码,就这个东西导致运行mysql出错错误如下:ERROR 1045 (28000): Access denied for user ‘root’@‘localhost’ (using password: NO)解决思

2020-11-19 17:06:11 62

原创 2020-11-11

前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例可供参考一、Eslint报错报错如下:Invalid type of template literal expressionimport numpy as npimport pandas as pdimport matplotlib.pyplot as pltimport seabor

2020-11-11 18:10:45 985

原创 学习VUE

关于Vue的可参考博文https://blog.csdn.net/weixin_38318244/article/details/85037067?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

2020-03-24 15:01:30 72

空空如也

空空如也

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

TA关注的人

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