Keeping Studing

风雨哈佛路,做一个心怀期待的Developer

分类 ★ 前端 下的文章

June 17, 2021

React Hooks - 03 | 内置 Hooks

说明包含内容:03|内置 Hooks(1):如何保存组件状态和使用生命周期?——useState,useEffect04|内置 Hooks(2):为什么要避免重复定义回调函数?——useCallback,useMemo,useRef,useContextReact Hooks 核心原理遇到需求时,是基于 Hooks 去考虑组件的实现,这会是一个非常不同的思路,你完全不用去关心一个组件的生命周...

windows PowerShell 高效开发

前言之前没怎么用过 windows 来开发,现在每天使用,感觉还是得提高基础开发效率才行呀。所以学习研究了下命令行方面的工具使用~ 还需继续拓展。网上相关教程方法很多,摘抄并小结成此文,方便后续查阅。
September 2, 2019

基于 git hooks 的前端代码质量控制解决方案

一、为什么需要在git hook里配置预处理 ?现在确保代码规范及质量,已经有很多的Lint工具,如Eslint,styleLint等。大家在开发过程中会自觉运行这些工具,然后根据工具给出的提示信息进行修复或修改代码。但是,有时候大家一粗心可能就漏看了(或者根本没看。。)这些提示、忘记了部分规范要求而直接把代码提交的情况!!既然这种靠自觉是靠不住的,那我们只能让整个流程自动化、让工具替我们完...
August 22, 2019

关键渲染路径 CRF【摘抄】

前言一直想在前端性能优化方面有所提升,三年来在工作中总结出来的性能优化经验也很零散琐碎,而且有些知其然不知其所以然,越来越感觉系统性地学习这部分知识已经迫在眉睫。了解到想要做好前端性能优化,首先是要知道浏览器渲染原理、关键渲染路径,如何利用工具来衡量性能,并运用简单的策略尽快向屏幕中渲染画面。要学习如何利用 Google Chrome 的开发者工具—— PageSpeed Insights ...

JS单元测试(UT)— Mocha

前言平时经常看到TDD(测试驱动开发)相关的文章或者内容,在上家公司时也常听到后端小伙伴说他正在写单元测试。。。所以心里就埋下了对单元测试的好奇,但由于种种原因没有及时去了解。最近发现单元测试还是有必要学习并使用的,所以就花了些时间学习,并整理成此文,方便后续回顾和查阅。
August 4, 2019

CSS 优先级和权重

前言之前写页面样式时,有时会遇到用多条样式定义规则对同一个元素进行样式设置的时候,当时想到的就是按CSS选择器的优先级来搞定这个问题,也就只记得:内嵌样式 > id > class > 标签 这样简单的规则,虽然基本可以搞定需求,也自以为然的就是这个样子了,但是最近发现原来这部分还要更深层次的内容,所以今天专门学习了下。

《学习JavaScript数据结构与算法》笔记

第二章 数组2.6 二维数组和多维数组 结论:n个乘数的矩阵,则需要n层嵌套的for循环二维数组,需要2层嵌套for循环。一个3×3×3×3的矩阵,代码中就会用四层嵌套的for语句,以此类推。使用map和filter方法map、filter遍历数组,会返回新数组的遍历方法。reducefunction total(array) { return array.reduce((prev,...

js 中的 this 小结

this相关内容总结,比如如何正确判断 this?箭头函数的 this 是什么?流程图【必须牢记】图中的流程只针对于单个规则。小结首先,new的方式优先级最高,——var f = new foo(),foo中的this指向f实例接下来是 fn.bind() 这些函数, ——fn 中的 this 永远由第一次 bind 决定,如果bind第一个参数为空,那么就是 window然后是 obj.f...

Vue 生命周期

1. 概述Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以让我们用自己注册的js方法控制整个大局,在这些事件响应方法中的this直接指向的是vue的实例...
June 13, 2019

React Router 路由【转】

react使用react-router-dom。路由跳转是单页面应用的跳转。即整个网站在访问过程中只会加载一次HTML文件。好处:减少HTML加载次数,提高性能。但如果使用<a />跳转,每点击一次或者一个a标签,都会重新加载整个网页(html)。1. <Link>为你的应用提供声明式的、可访问的导航链接。import { Link, Redirect, withRo...
June 3, 2019

React 虚拟DOM中的Diffing算法

React原理在某一时间节点调用 React 的 render() 方法,会创建一棵由 React 元素组成的树(虚拟DOM)。在下一次 state 或 props 更新时,相同的 render() 方法会返回一棵不同的树。React 需要基于这两棵树之间的差别来判断如何有效率的更新 UI 以保证当前 UI 与最新的树保持同步。难点在于如何判断新旧两个 JS 对象的最小差异并且实现局部更新 ...