安装 TypeScript
安装 TypeScript命令行运行如下命令，全局安装 TypeScript：
1npm install -g typescript
安装完成后，在控制台运行如下命令，检查安装是否成功(3.x)：
1tsc -V
从box-sizing属性入手，了解盒子模型
从box-sizing属性入手，了解盒子模型背景先声明一下运用的场景，假如项目布局使用的是自适应的布局方式，div给出的宽度是百分比的形式，即占窗口宽度的100%，但边框border和内边距padding是用像素来表示的，此时就会造成一个问题是div总宽度超过窗口宽度。为了避免这种问题，可以使用属性box-sizing:border-box来把 标准盒模型 变成 代替(IE)盒模型 ，从而使div的总宽度依然是100%
什么是CSS 盒模型?页面布局中，一个元素的外边距（margin）、 边框（border）、内边距（padding）、内容（content）组成一个盒模型。盒模型可分为标准盒模型 和 代替（IE）盒模型。
标准盒模型在标准模型中，如果你给盒设置 width 和 height，实际设置的是内容区域( content box)的宽高。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小。
示例：
1234567.box { width: 100px; height: 50px; margin: 10px; padding: 25px ...
nodejs递归读取所有文件
nodejs递归读取所有文件123456789101112131415161718192021var fs = require('fs');var path = require('path'); function readFileList(dir, filesList = []) { const files = fs.readdirSync(dir); console.log(files); files.forEach((item, index) => { var fullPath = path.join(dir, item); const stat = fs.statSync(fullPath); if (stat.isDirectory()) { readFileList(path.join(dir, item), filesList); //递归读取文件 } else { ...
JS基础
说明：本章内容为博主在原教程基础上添加自己的学习笔记，来源https://wangdoc.com/javascript/，教程版权归原作者所有。
基础篇一、JS的一些名词概念什么是作用域？变量存在的范围。
可分为全局作用域和函数作用域，ES6新增块级作用域。
什么是闭包？闭包就是能够读取其他函数内部变量的函数。
闭包的形式：函数内部定义函数
本质上闭包就是将函数内部和外部连接起来的一座桥梁
闭包的作用：
可以读取函数内部变量
让这些变量始终保持在内存中，即闭包可以使得它诞生的环境一直存在。
封装对象的私有属性和私有方法
什么是构造函数？用于构造(生成)实例的一个函数，使实例拥有构造函数内定于的属性和方法。
什么是实例对象？实例对象就是通过new 构造函数生成的，拥有构造函数内定于的属性和方法的一个对象。
什么是this？就是属性或方法当前所在的对象，指向当前运行环境（对象）
什么是原型？每个函数都有一个prototype属性，指向一个对象，该对象称为原型对象。
什么是原型链？所有对象都有自己的原型对象，由于原型对象也是对象，因此它也有自己的原型，这就会形成一个原型链。
最 ...
Css单位px，rem，em，vw，vh的区别
Css单位px，rem，em，vw，vh的区别px
px就是pixel像素的缩写，相对长度单位，网页设计常用的基本单位。像素px是相对于显示器屏幕分辨率而言的
em
em是相对长度单位。相对于当前对象内文本的字体尺寸（参考物是父元素的font-size）如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸
特点：
em的值并不是固定的；
em会继承父级元素的字体大小
rem
rem是CSS3新增的一个相对单位，rem是相对于HTML根元素的字体大小（font-size）来计算的长度单位如果你没有设置html的字体大小，就会以浏览器默认字体大小，一般是16px
123html{font-size: 62.5%} /* 62.5% *16 = 10px */body{font-size: 1.4rem;} /* 1.4 × 10px = 14px *//*在根元素中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准 ）*/
优点是，只需要设置根目录的大小就可以把 ...
自定义 Hook
05. 自定义 Hook通过自定义 Hook，可以将组件逻辑提取到可重用的函数中。
目前为止，在 React 中有两种流行的方式来共享组件之间的状态逻辑: render props 和高阶组件，现在让我们来看看 Hook 是如何在让你不增加组件的情况下解决相同问题的。
提取自定义 Hook自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook。 例如，下面的 useFriendStatus 是我们第一个自定义的 Hook:
123456789101112131415161718import { useState, useEffect } from 'react';function useFriendStatus(friendID) { const [isOnline, setIsOnline] = useState(null); useEffect(() => { function handleStatusChange(status) { setIsOnl ...
Hook规则
04. Hook规则Hook 本质就是 JavaScript 函数，但是在使用它时需要遵循两条规则。我们提供了一个 linter 插件来强制执行这些规则：
只在最顶层使用 Hook不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。
:::tip
React 怎么知道哪个 state 对应哪个 useState？答案是 React 靠的是 Hook 调用的顺序
如果我们想要有条件地执行一个 effect，可以将判断放到 Hook 的内部：
123456useEffect(function persistForm() { // 👍 将条件判断放置在 effect 中 if (name !== '') { localStorage.setItem('formData', name); }});
:::
只在 React 函数中调用 Hook不要 ...
使用Effect Hook
03. 使用Effect Hook（副作用钩子）如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount(挂载完成)，componentDidUpdate(更新完成) 和 componentWillUnmount（即将销毁前） 这三个函数的组合。
Did : 做了… Will: 将要…
数据获取，设置订阅以及手动更改 React 组件中的 DOM 都属于副作用。不管你知不知道这些操作，或是“副作用”这个名字，应该都在组件中使用过它们。
在 React 组件中有两种常见副作用操作：**需要清除的 **和 不需要清除的。我们来更仔细地看一下他们之间的区别。
无需清除的 effect有时候，我们只想在 React 更新 DOM 之后运行一些额外的代码。比如发送网络请求，手动变更 DOM，记录日志，这些都是常见的无需清除的操作。因为我们在执行完这些操作之后，就可以忽略他们了。让我们对比一下使用 class 和 Hook 都是怎么实现这些副作用的。
使用 class 的示例在 React 的 class 组件 ...
使用State Hook
02. 使用State Hook123456789101112131415import React, { useState } from 'react';function Example() { // 声明一个叫 "count" 的 state 变量 const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> );}
我们将通过将这段代码与一个等价的 class 示例进行比较来开始学习 Hook。
等价的Class组件示例1234567891011121314151617 ...
Hook概述
01. Hook概述Hook可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
什么是 Hook?Hook 是一个特殊的函数，可以让你在函数组件里“钩入” React state 及 生命周期 等特性的函数。
Hook 不能在 class 组件中使用 —— 这使得你不使用 class 也能使用 React。
React 内置了一些像 useState 这样的 Hook。你也可以创建你自己的 Hook 来复用不同组件之间的状态逻辑。我们会先介绍这些内置的 Hook。
useState（状态钩子）模式：
1const [<取值>, <设值>] = useState(<初始值>)
上面的三个值均可自定义名称，分别是：
state取值变量名
state设值方法名
初始值
初始值可以是数字、字符串、对象、数组等
例子：
123456789101112131415import React, { useState } from 'react';function E ...
