Joel in The House

关于我

xmasuhai@163.org (Joel Xu) — Wed, 20 Nov 2019 21:38:52 +0800

Hugo is a static site engine written in Go.

It makes use of a variety of open source projects including:

Learn more and contribute on GitHub.

【CSS非全解01】CSS基础初识CSS

xmasuhai@163.org (Joel Xu) — Fri, 02 Jan 2026 17:42:23 +0800

引入 `css` 的方式 ⇧

三种引入方式

行内样式在元素上添加属性 style
页面级样式使用 style 标签
外部css文件使用 link 标签

行内样式表：行内样式 ⇧

<div style="
  width: 100px;
  height: 100px;
  "></div>

直接写 css 属性
无需 css 选择器

内部样式表：页面级样式 `<style>` 元素中 ⇧

<head>
  <style type="text/css">
    div {
      width: 100px;
      height: 100px;
    }
  </style>
</head>

<body>
  <div></div>
</body>

style标签属性 type="text/css"
一般放在 head 元素中，先于 body 内容加载，防止页面闪烁

外部样式表：外部`css`文件使用`<link>` 元素 ⇧

使用单独文件 xxx.css
使用 link 标签引入

一般放在 head 元素中，先于 body 内容加载，防止页面闪烁

<head>
<link rel="stylesheet" type="text/css" href="xxx.css">
</head>

<body>
<div></div>
</body>

优点

外部样式可以解决多页面样式重复的问题
有利于浏览器缓存，从而提高页面响应速度
有利于代码分离(HTML和C5S)，更容易阅读和维护

`css`资源文件 ⇧

服务器上 192.168.xxx.xxx:xxxx/xxx.css
开启新线程下载该css文件，同时不阻塞原html下载线程
- 异步加载，同时下载另一个文件

`CSS`基本语法一：样式语法 ⇧

CSS规则 = 选择器 + 声明块

selectors-list {
  properties-list
}

选择器 {
  属性名:属性值;
  /* 注释语法：只有多行注释 */
}

selectors-list ::= selector[:pseudo-class] [::pseudo-element] [, selectors-list]

properties-list ::= [property : value] [; properties-list]

eg.

.a,
#b,
[c="d"]>e f,
g+h,
i~j{
    border: 1px red solid;
}

strong {
  color: red;
}

div.menu-bar li:hover > ul {
  display: block;
}

基本语法注意事项 ⇧

所有符号都是英文符号，IDE只开英语输入，中文从记事本里粘贴进来（开不同应用不同输入法：both Win & Mac）；标点写错，浏览器会警告，但不报错 > 有可能犯错的地方终究会错——墨菲定律
区分大小写，a 和 A 不同
没有//注释，只是把选择器拼错不生效而已
最后一个分号建议不要省略
任何地方写错了，都不报错，浏览器会直接忽略，继续渲染，只给警告⚠️
怎么纠错？调试看下文

注意，规则定义中的任何CSS语法错误都将使整个规则无效。无效的规则将被浏览器忽略。

注意CSS定义完全是基于文本(ASCII)的。

eg.

p {
  /* 正确 */
  color:red;

  /* 不正规的“注释”：拼错 */
  xcolor: red;
  // color: red;

  /* 正确的注释 */
  /* color:red; */
  /*
  color:red;
  */
}

行内元素标签换行间距问题

<head>
  <style>
    h1 {
      font-size: 12px;
    }
    h1 span {
      font-size: 12px;
    }
  </style>
</head>

<body>
  <h1 class="article-title">
    <span>Xxx</span>
    <span>123</span>
  </h1>
</body>

<span>元素间为保持代码格式而换行，页面显示时会多处一个空格
可以在父元素统一加上 font-size: 0;，在子元素中添加 font-size: 12px; 处理

样式选择器 ⇧

选择器：帮助你精准地选中想要的元素基本选择器：

ID 选择器
类选择器
属性选择器
类型选择器 (元素/标签选择器)
通用选择器（通配符选择器）

`id` 选择器 ⇧

<head>
  <style>
    #abc {
      width: 100px;
      height: 100px;
      background-color: #060;
    }
  </style>
</head>

<body>
  <div id="abc"></div>
</body>

需要确保 id 唯一对应一个标签
如果重复，后面的会覆盖掉前面的

类型选择器 `Type selectors` (元素/标签选择器) ⇧

<head>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: #060;
    }
  </style>
</head>

<body>
  <div></div>
</body>

会匹配所有该标签

一般用来初始化浏览器中默认样式 reset.css

a {
text-decoration: none;
}

ul {
list-style: none;
padding: 0;
margin: 0;
}

类型选择器 `(class` 类选择器) ⇧

<head>
  <style>
    .abc {
      width: 100px;
      height: 100px;
      background-color: #060;
    }
  </style>
</head>

<body>
  <div class="abc"></div>
</body>

属性选择器 ⇧

根据属性名和属性值选中元素

<head>
  <style>
    [xxx="yyy"] {
      width: 100px;
      height: 100px;
      background-color: #060;
    }

    /* 选中所有具有href属性的元素 */
    [href] {color: red;}

    /* 选中所有具有href属性并且值为 https://zzz.com 的元素 */
    [href='https://zzz.com'] {color: orange;}

    /* 一般配合元素选择器一起使用 */
    a[href] {color: red;}
    a[href='https://zzz.com'] {color: orange;}
  </style>
</head>

<body>
  <div xxx="yyy"></div>
  <a href="https://xxx.com">xxx</a>
  <a href="https://yyy.com">yyy</a>
  <a href=:"https://zzz.com">zzz</a>
</body>

参考

属性选择器 MDN

通配符选择器 ⇧

选中所有元素

<head>
  <style>
    * {
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <div></div>
</body>

通用选择器（*）、组合符（+、>、~、’ ‘）和调整优先级的选择器（:where()）不会影响优先级。

一般用来初始化浏览器中默认样式 reset.css

* {
box-sizing: border-box;
padding: 0;
margin: 0;
}

伪选择器（Pseudo） ⇧

包括伪类选择器和伪元素选择器

伪类 ⇧

选中某些元素的某种状态，先介绍几种常用的

/* 超链接未访问时的状态 */
a:link {}
/* 超链接已访问时的状态 */
a:visited {}
/* 鼠标悬停状态 */
a:hover {}
/* 用户激活状态 一般为鼠标按下状态 */
a:active {}

在浏览器开发者工具中，打开 :hov 状态，查看

伪类一般书写顺序，保证符合用户直觉的样式

link
visited
hover
active

子伪类选择器 ⇧

:first-child 选中第一个子元素（当前范围内的第一个子元素）
- a:first-child 当前范围内的第一个子元素，并且为a标签的元素
- a > :first-child 表示a标签内的第一个子元素
:first-of-type 表示一组兄弟元素中其类型（比如标签名）的第一个元素
- a:first-of-type 当前范围内的第一个a元素
:last-child
:last-of-type
:nth-child() 选中指定的第几个子元素
- :nth-child(n)
- :nth-child(-n)
- :nth-child(2n)
- :nth-child(n + 1)
- :nth-child(odd)
- :nth-child(even)
- p:nth-child(n+8):nth-child(-n+15) 表示兄弟元素列表中的第 8 到第 15 个，且为
  元素的元素
- of <selector> 语法 chrome@111+
- :nth-child(-n + 3 of li.important) {} 匹配属于前三个子元素，且与选择器 li.important 匹配的列表项
- :nth-child(n of :not())
:nth-of-type()

参考

:nth-child()

否定伪类（negation pseudo-class）（`:not()`） ⇧

聚焦内部（`:focus` 和 `:focus-within`） ⇧

`:has()`

`:where`

`:is`

前后伪元素 ⇧

在元素中的内容前或后插入一个额外元素

<head>
  <style>
  /* 插入前后书名号 */
  .pseudo ::before {
    content: '《',
  }
  .pseudo ::after {
    content: '》',
  }
  </style>
</head>

<body>
  <p>
    <span class="pseudo">JS高级程序指南</span>
  </p>
</body>

首字母伪元素 `::first-letter` ⇧

选中元素中的第一个字母或文字

<head>
<style>
</style>
</head>

<body>
<p>
<span class="pseudo"></span>
</p>
</body>

首行伪元素 `::first-line` ⇧

选中元素中第一行的文字

<head>
<style>
</style>
</head>

<body>
<p>
<span class="pseudo"></span>
</p>
</body>

选中伪元素 `::selection` ⇧

选中被用户框选的文字

<head>
<style>
</style>
</head>

<body>
<p>
<span class="pseudo"></span>
</p>
</body>

分组选择器（Grouping selector） ⇧

就是不同选择器的组合方式，可以组合任意选择器，以类选择器为例

选择器并列 ⇧

表示需要同时满足多个选择器

/* id已经唯一匹配了，所以没有什么必要 */
span#word {}
/* 匹配多个类型的标签，最为常用 */
div.a.b {}
/* 匹配多个属性的标签 */
p[attrs="abc"] {}
/* 组合使用 */
p[attrs="abc"].abc {}
a:hover {}

选择器列表 ⇧

语法糖

1
2
3

.a,
#b,
span {}

使用逗号分隔，共用相同样式

组合器（Combinator） ⇧

后代组合器
直接子代组合器
一般兄弟组合器

紧邻兄弟组合器

.a .b {}
.a > .b {}
.a ~ .b {}
.a + .b {}

后代组合器 ⇧

`1`	`.a .b {}`

匹配所有位于任意元素之内

选择器匹配顺序

`1`	`section p ul li a span em {}`

从右往左匹配

直接子代组合器 ⇧

`1`	`.a > .b {}`

前一个元素的直接子代

一般兄弟组合器 ⇧

`1`	`.a ~ .b {}`

共享同一个父节点
匹配到在前一个节点后面的任意位置的选择器

紧邻兄弟组合器 ⇧

`1`	`.a + .b {}`

共享同一个父节点
匹配到相邻元素，紧跟在前一个选择器之后的那个选择器

样式层叠 ⇧

样式声明冲突

同一个样式，多次应用到同一个元素

自定义样式表与浏览器默认样式（用户代理样式表）的冲突

user agent stylesheet 通常被用户自定义样式覆盖

利用层叠样式的特性，可以先声明一个通用的样式，再对具体每一个选择器，声明特殊的样式

层叠：解决声明冲突的过程，浏览器自动处理(权重计算)
不用自己计算，主流 IDE 和 浏览器元素选项卡 中，都有明确提示 (0, 0, 0)

样式层叠的顺序，即权重计算顺序 ⇧

比较重要性
比较特殊性
比较源次序

选择器优先级-简单判断 ⇧

!important > 行内样式 > id选择器 > class选择器 | 属性选择器 > 标签选择器 > 通配符选择器

`css` 权重，真正影响样式的原因 ⇧

类型	错误地归类（仅帮助理解）-权重	官方归类-权重
作者样式表的`!important`	`infinity`	不参与权重计算，但会覆盖其他所有普通规则的层叠样式，也会受到先后顺序和其他样式累加影响
元素标签的行内样式	`1000`	可以理解为 `1-0-0-0` 但实际不计入特异性分数，直接覆盖除了`!important`以外的所有样式
`id`选择器	`100`	`1-0-0`
`class`选择器/属性选择器/伪类	`10`	`0-1-0`
标签选择器/伪元素	`1`	`0-0-1`
通配符选择器	`0`	对权重计算无影响可覆盖用户代理样式表
浏览器默认样式 `user agent stylesheet`	无	权重最低

同一行同类型的选择器权重可累加
旧版浏览器中样式权累加重满 255 进位；现代浏览器中各个分开存储，互不影响
作者样式表 Author Stylesheet：开发者书写的样式
浏览器默认样式表 User-Agent Stylesheet
!important 最好禁用，覆盖成本巨大

比较重要性 ⇧

CSS 重要性由低到高

作者样式表中的 !important 样式
作者样式表中的普通样式
浏览器默认样式表中的样式

比较特殊性 ⇧

比较重要性后仍有样式重叠冲突，之后需要比较特殊性，作者样式表覆盖浏览器默认样式表

a {
  color: red;
  text-decoration: none;
  font-style: italic;
}

.selected {
  color: #fff;
  background-color: red;
}

总体规则：看选择器，选择器选中的范围越窄，越特殊
具体规则：
- 行内样式具有最高的特异性（Specificity），可以覆盖任何来自样式表（!important 除外）的其他常规样式
- 通过选择器，计算出一个3位数 (0-0-0)
- (n-0-0) 等于选择器中所有id选择器的数量
- (0-n-0) 等于选择器中所有 类型选择器(类、伪类、属性选择器) 的数量
- (0-0-n) 等于选择器中所有 元素或伪元素选择器 的数量
- 三个级别是独立的，没有一个级别会向其更高或更低级别“借位”或“进位”
- 浏览器在比较两个特异性时，是按从左到右的顺序逐级比较的，类似于比较数字
- 区别于选择器匹配顺序，是从右往左匹配

比较源次序 ⇧

代码书写靠后的胜出

一个应用就是当书写 a 元素的伪类时，一般需要按以下的次序协选择器：

a:link {
  color: green;.
}

a:visited {
  color: red;
}

a:hover {
  color: chocolate;
}

a:active {
  color: #000;
}

适用于各种状态重叠

`css` 层叠特性权重应用 ⇧

重置样式表：书写一些作者样式，覆盖浏览器的默认样式，统一样式

<head>
<link rel="stylesheet" href="style/reset.css"></link>
<link rel="stylesheet" href="style/index.css"></link>
</head>

参考

选择器嵌套 ⇧

when to nest css

CSS语法二：常用属性 ⇧

文字相关 font
- font-*
- font-size 每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，无父元素使用基准字号
- font-weight 预设值
- font-family 必须用户计算机中存在的字体才会有效；使用多个字体，以匹配不同环境
- font-style 斜体
- color 字体颜色
- line-height 行高：
- 每行文本的高度，该值越大，每行文本的距离越大
- 设置行高为容器的高度，可以让单行文本垂直居中
- 行高可以设置为纯数字，表示相对于当前元素的字体大小
- text-align 文字对齐：元素内部文字的水平排列方式
- text-indent 首行文本缩进
- text-decoration 装饰线条
- letter-space 文字间隙
- text-overflow
- vertical-align
容器相关
- margin
- border
- padding
- width
- height
- 背景相关 background
- background-image: url('');
- background-size: 100px 100px; 过小则重复平铺图片
- background-repeat: no-repeat;
- background-position: 100px 100px;
定位 position
光标相关
- cursor

补充：常用单位

px: 像素，绝对单位，简单的理解为文字的高度占多少个像素
em: 相对单位，相对于父元素的字体大小

样式继承 ⇧

子元素会继承父元素的某些 CSS 属性
通常，跟文字内容相关的属性都能被继承
在 MDN 中搜索查看某一个属性是否是可继承的 font Inheritance

不能被继承的样式 ⇧

宽高 width height
background 开发者调试面板 Styles 中是淡灰色
- 在 Computed 面板中中是默认值

参考

图解CSS：CSS层叠和继承大漠

属性值的计算过程 ⇧

一个元素一个元素依次渲染，顺序按照页面文档的树形目录结构进行

渲染每个元素的前提条件：该元素的所有CSS属性必须有值
一个元素，从所有属性都没有值，到所有的属性都有值，这个计算过程，叫 CSS做属性值计算过程

属性值计算过程 ⇧

确定声明值：开发者样式表声明和浏览器默认样式表声明中，参考样式表中没有冲突的声明，先直接作为CSS属性值
处理层叠冲突：对样式表有冲突的声明使用层叠规则，确定CSS属性值(比较重要性、比较特殊性、比较源次序)
使用继承：对仍然没有值的属性，若可以继承，则继承父元素的值
使用默认值：对仍然没有值的属性，使用默认值

问初始条件下，a元素展示的颜色是？

<head>
  <style>
    div {
      color: red;
    }
  </style>
</head>

<body>
  <div>
    <a href="">链接</a>
  </div>
</body>

是浏览器默认样式表中声明的颜色，并没有继承父元素的颜色

查看 reset.css 中重置a元素的样式

a {
  text-decoration: none;
  /* 颜色继承父元素，但是发生在第一步的确定声明值，而不是发生在使用继承这步 */
  color: inherit;
}

特殊的两个CSS取值：

inherit: 手动（强制）继承，将父元素的值取出应用到该元素
initial: 初始值，将该属性设置为默认值

CSS语法三：常用`@`语法 `at-rule` ⇧

/* 必须放在第一行；必须以分号`;`结尾 */
@charset "UTF-8";

/* 导入另一个CSS文件；必须以分号`;`结尾，一般写在开头 */
@import url(2.css);
@import 'reset.css';

/* 媒体查询 */
@media (min-width:100px) and (max-width:200px){
    /* 语法一：样式语法 */
}

/* 自定义字体 */
@font-face 'xxx';
/* 自定义字文件 */
@font-face {
  font-family: 'xxx-iconfont';
  src: url('');
  src: url(''), format('woff2'),
       url(''), format('truetype'),
       url(''), format('svg');
};
/* 自定义字体图标类 */
.xxx-iconfont {
  font-family: 'xxx-iconfont' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

`@import` ⇧

@import "path"; 导入另外一个css文件
可以在浏览器的控制台 Network 面板查看 CSS 资源加载
加载和解析的顺序相反
@import 必须以分号;结尾

`@charset` ⇧

@charset 必须放在第一行，解析中文字符
可以在浏览器的控制台 Network 面板查看 Font 资源加载
charset字面是字符集的意思，UTF-8是字符编码 encodeing
历史遗留问题，encodeing ∈ charset，charset 指文件编码（而不是字符集）
@charset 必须以分号;结尾
1

@charset "UTF-8";

参考

@charset MDN

`@font-face` ⇧

【CSS零碎杂记03】web字体 @font-face 和图标

`@media` ⇧

基本单位 ⇧

长度单位 ⇧

px像素
em相对于自身font-size的倍数1,2,3,4em=1x,2x,3x,4x font-size
百分数
整数
rem
vw | vh
其他，少，不用了解

颜色 ⇧

hsla(h, s, l, a): (30°, 100%, 100%, 0.5)
rgba(r, g, b,a): (255, 127, 0,0.5)
Hex triplet: #FF7F00
淘宝色#FF6600
透明transparent

CSS values and units mdn

CSS length mdn

自动填充背景色

在body上添加一个颜色，外面也同样变成这个色，但并不意味着背景全是body，只有加了border，才能看出body的实际范围

用border来确定body在哪

·未完待续·

参考文章 ⇧

【React非全解 5】React 内置 Hooks 各个击破

xmasuhai@163.org (Joel Xu) — Fri, 07 Oct 2022 01:31:17 +0800

Hooks 各个击破

大纲链接 §

[toc]

React 内置的 Hooks 主要有以下几个：

useState 组件状态
useEffect 副作用
- useLayoutEffect
useContext 上下文
useMemo 缓存
- useCallback 回调
useReducer 统一状态管理（替代Redux）
useRef 引用
- useImperativeHandle
useDebugValue 自定义

1. `useState` ⇧

使用组件状态

const [n, setN] = React.useState(0) 原始类型
const [user, setUser] = React.useState({name: 'F'}) 复杂类型

注意事项1：不可局部更新属性，不自动合并 ⇧

如果state是一个复杂类型（对象等），禁止部分setState，示例代码
- 因为setState不会自动合并属性，缺失没有写入的属性
- useReducer也不会自动合并

解决方法：使用 ...，在对象中拷贝原状态的属性，再局部覆盖同名属性

import React, {useState} from "react";
import ReactDOM from "react-dom";

function App() {
const [user,setUser] = useState({name:'Franche', age: 18})
const onClick = () => {
setUser({
...user,
  name: 'Jack' // 同名覆盖原先的name属性
})

/*
setUser({
  name: 'Jack' // 缺失 age 属性
})
*/
}
return (
<div className="App">
  <h1>{user.name}</h1>
  <h2>{user.age}</h2>
  <button onClick={onClick}>Click</button>
</div>
);
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

注意事项2：地址要变 ⇧

setState(obj) 如果obj不变，那么React中数据不变

React 只侦测对象地址变化，不侦测同对象的属性变化

import React, {useState} from "react";
import ReactDOM from "react-dom";

function App() {
const [user,setUser] = useState({name:'Franche', age: 18})
const onClick = () => {
// 错误的演示：地址不变，React中数据不变
user.name = 'Mick'
setUser(user) // 不会更新UI
/*
setUser({
  ...user,
  name: 'Jack'
}) // 传入的是一个新对象

*/
}
return (
<div className="App">
  <h1>{user.name}</h1>
  <h2>{user.age}</h2>
  <button onClick={onClick}>Click</button>
</div>
);
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

注意事项3 接受函数 ⇧

useState接受函数：const [x, setX] = useState(()=>{})

const [state, setState] = useState( () => {return initialValue} )
const [state, setState] = useState( () => ({/*initialValue*/}) )
该函数返回初始state，且只执行一次
- 区别于useState传对象，JS每次会解析该对象
- useState传工厂函数，减少内部多余的计算过程

setState接受函数：setState(()=>{})

setN(i => i + 1)

代码示例

import {useState} from 'react'
import ReacDOM from 'react-dom'

function App() {
const [n, setN] = useState(0)
const onClick = () => {
setN(n + 1) // n 不会变
setN(n + 2) // 只有最后一次有效
/* 发现 n 不能 +1 再 +2 */

// 改为传函数则符合预期
setN(i => i + 1)
setN(i => i + 1)
}
return (
<div className="app">
  <h1>n: {n}</h1>
  <button onClick={onClick}>+2</button>
</div>
)
}
const rootElement = document.getElementById('root')
reactDOM.render(<App />, rootElement)

setN(i => i + 1)并不直接传值，而是传一个函数来操作，形参占位符i命名随便
如果需要对setN多次操作，更推荐使用函数

2. `useReducer` ⇧

用来践行 Flux/Redux 的思想

代码示例，共分4步走
- 1.创建初始值initialValue
- 2.创建所有操作reducer(state, action)
- 3.传给useReducer(所有操作, 初始数据)，获取读和写的 API
- 4.调用写dispatch({type: '操作类型'})，不是直接操作state，而是通过reducer来操作

总的来说useReducer就是useState的复杂版

import {useReducer} from 'react'
import ReactDOM from 'react-dom'

// 1. 创建初始值 initialValue
const initialValue = {n: 0, m: 0}

// 2. 创建所有操作 reducer(state旧的状态, action操作含有自定义的属性)
/*
* @params({}) state
* @params({type: string}) action
* @return newState
*/
const reducer = (state, action) => {
if(action.type === 'add') {
// 不可以直接操作属性 state.n += 1; return state 同useState的规则
// return {...state, n: state.n + 1}
return {...state, n: state.n + action.number} // 还可以传额外属性参数
} else if(action.type === 'multi2') {
return {...state, n: state.n * 2}
} else {
throw new Error('unknown type')
}
}

function App() {
// 3. 传给 useReducer，获取 读 和 写 的 API
const [state, dispatch] = useReducer(reducer, initialValue)
// 也可以直接解构出属性 const {n} = state

const onClick = () => {
// 4. 调用 写dispatch({type: '操作类型'})
// dispatch({type: 'add'}) // 调用`add`分支操作
dispatch({type: 'add', number: 1}) // 还可以传额外属性参数
}
const onClickAdd2 = () => {
dispatch({type: 'add', number: 2})
}
const onClickMulti2 = () => {
dispatch({type: 'multi2'})
}

return (
<div className="app">
  <h1>n: {state.n}</h1>
  <button onClick={onClick}>n + 1</button>
  <button onClick={onClickAdd2}>n + 2</button>
  <button onClick={onClickMulti2}>n * 2</button>
</div>
)
}
const rootElement = document.getElementById('root')
reactDOM.render(<App />, rootElement)

不可以直接操作属性 state.n += 1; return state 同useState的规则
对多个状态做整体操作
将所有操作聚拢在函数const reducer = (state, action) => {}中
- 通过action的不同属性，来调用对应不同的分支操作
- 通过action还可以传额外属性
每次用户操作更新数据，App就重新render一遍

如何判断使用useReducer还是useState

事不过三原则：有多个数据可以在一起放入同一个对象里，就适用useReducer，对这个对象做整体操作

例如表单中的数据，见用useReducer表单代码示例：

// import...

const initFormData = {
name: 'xxx',
age: 18,
nationality: '泰伦'
}

// 汇总操作
function reducer(state, action) {
switch (action.type) {
case "patch": // 更新 合并新旧属性
  return {...state, ...action.formData}
case "reset": // 重置
  return initFormData
default:
  throw new Error('type传错了')
}
}

// 生成表单数据
const formDataGenerator = (text, value, cb) => ({ text, value, cb })

function App() {
console.log('App执行了一遍')

// 获取读写接口
const [formData, dispatch] = useReducer(reducer, initFormData)

// 表单操作
const onReset = () => { dispatch({type: 'reset'}) }
const onSubmit = () => {alert('提交了'); onReset()}

// 提取patch公共方法
const patch = (key, value) => {
dispatch({type: 'patch', formData: {[key]: value} })
}

// 表单汇总数据
const formContentList = [
formDataGenerator( '姓名', formData.name, e => patch('name', e.target.value) ),
formDataGenerator( '年龄', formData.age, e => patch('age', e.target.value) ),
formDataGenerator( '名族', formData.nationality, e => patch('nationality', e.target.value) )
]

return (
<form onSubmit={onSubmit} onReset={onReset}>
  {
    formContentList.map(item => {
      return (
        <div key={item.text}>
          <label>
            {item.text}
            <input value={item.value} onChange={item.cb} />
          </label>
        </div>
      )
    })
  }
  <div>
    <button type="submit">提交</button>
    <button type="reset">重置</button>
  </div>
  <hr/>
  {JSON.stringify(formData)}
</form>
)
}

// render...

3. 用 `useReducer` 代替 `redux` ⇧

辅助函数和基本结构 ⇧

辅助函数，假的AJAX获取数据，调用时传入参数 url，返回对应数据

// 辅助函数
// 假 ajax
// 两秒钟后，根据 path 返回一个对象，必定成功不会失败
function ajax(path) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (path === "/user") {
        resolve({
          id: 1,
          name: "Frank"
        });
      } else if (path === "/books") {
        resolve([
          {
            id: 1,
            name: "JavaScript 高级程序设计"
          },
          {
            id: 2,
            name: "JavaScript 精粹"
          }
        ]);
      } else if (path === "/movies") {
        resolve([
          {
            id: 1,
            name: "爱在黎明破晓前"
          },
          {
            id: 2,
            name: "恋恋笔记本"
          }
        ]);
      }
    }, 2000);
  });
}

基本结构

import React, { useReducer, useContext, useEffect, createContext } from "react";
import ReactDOM from "react-dom";

// 统一的数据储存
const store = {
  user: null,
  books: null,
  movies: null
}

// 统一的操作
const reducer = (state, action) => {}

// 统一的上下文 数据提供 组件
const Context = createContext(null)

function User() {
  const {state, dispatch} = useContext(Context) // 注意是获取对象使用花括号
  return (
    <div>
      <h1>个人信息</h1>
    </div>
  )
}

function Books() {
  const {state, dispatch} = useContext(Context)
  return (
    <div>
      <h2>书籍信息</h2>
    </div>
  )
}

function Movies() {
  const {state, dispatch} = useContext(Context)
  return (
    <div>
      <h2>电影信息</h2>
    </div>
  )
}

function App() {
  // 创建对数据的读写API
  const [state, dispatch] = useReducer(reducer, store)
  return (
    {/* 统一的上下文 数据提供 */} {/* 提供数据对象 {state, dispatch} ES6对象语法缩写 */}
    <Context.Provider value={{state, dispatch}}>
      <User />
      <hr />
      <Books />
      <Movies />
    </Context.Provider>
  )
}

// render...

复杂`useReducer`使用步骤 ⇧

将数据几种在一个store对象中
将所有操作集中在reducer方法中
创建一个Context
创建对数据的读写API
将第四步的内容{state, dispatch}放到第三步的上下文数据提供组件中
用Context.Provider将Context提供给所有子组件
- <Context.Provider value={{state, dispatch}}>{/* 里面是各个子组件 */}</Context.Provider>
各个组件用useContext获取读写API：const {state, dispatch} = useContext(Context)（注意是获取对象使用花括号）

当前示例代码

请求获取mock数据，ajax('/user').then（user => {dispatch({type: 'setUser', user})}（ES6对象属性简写）

每次刷新组件时，都会再去请求一次AJAX，为了防止每次渲染就请求一次，可以使用useEffect只在进入页面时请求一次

useEffect(() => {}, [])，第二个参数传一个空数组，那么只会在第一次进入页面时运行，之后永远不会再执行（之后有更好的方式）

// import...

// 统一的数据储存
const store = {
user: null,
books: null,
movies: null
}

// 统一的操作
const reducer = (state, action) => {
switch (action.type) {
case "setUser":
return { ...state, user: action.user };
case "setBooks":
return { ...state, books: action.books };
case "setMovies":
return { ...state, movies: action.movies };
default:
throw new Error();
}
}

// 统一的上下文 数据提供 组件
const Context = createContext(null)

function User() {
const {state, dispatch} = useContext(Context)
// 模拟请求用户数据
useEffect(() => {
ajax('/user').then(user => {dispatch({type: 'setUser', user})})
}, []) // 模拟 componentDidMount
return (
<div>
<h1>个人信息</h1>
<div>name: {state.user ? state.user.name : "加载中"}</div>
</div>
)
}

function Books() {
const {state, dispatch} = useContext(Context)
// 模拟请求书籍数据
useEffect(() => {
ajax('/books').then(books => {dispatch({type: 'setBooks', books})})
}, [])
return (
<div>
<h2>书籍信息</h2>
<ol>
{state.books
  ? state.books.map(book => <li key={book.id}>{book.name}</li>)
  : '加载中'
}
</ol>
</div>
)
}

function Movies() {
const {state, dispatch} = useContext(Context)
// 模拟请求电影数据
useEffect(() => {
ajax('/movies').then(movies => {dispatch({type: 'setMovies', movies})})
}, [])
return (
<div>
<h2>电影信息</h2>
<ol>
{state.movies
  ? state.movies.map(movie => <li key={movie.id}>{movie.name}</li>)
  : '加载中'
}
</ol>
</div>
)
}

function App() {
// 创建对数据的读写API
const [state, dispatch] = useReducer(reducer, store)
return (
<Context.Provider value={{state, dispatch}}>
{/* 统一的上下文 数据提供 */} {/* 提供数据对象 {state, dispatch} ES6对象语法缩写 */}
<User />
<hr />
<Books />
<Movies />
</Context.Provider>
)
}

// render...

模块化处理 ⇧

目录

src
┣ component
   ┣ User.jsx
   ┣ Books.jsx
   ┗ Movies.jsx
┣ reducers
   ┣ use_reducer.js
   ┣ books_reducer.jsx
   ┗ movies_reducer.jsx
┣ context.js
┣ ajax.js
┣ main.jsx
┗ ...

main.jsx

import React, { useReducer, useContext, useEffect, createContext } from "react";
import ReactDOM from "react-dom";
import User from './component/User'
import Books from './component/Books'
import Movies from './component/Movies'
import Context from './Context'
import ajax from './ajax'
import userReducer from './reducers/use_reducer'
import booksReducer from './reducers/books_reducer'
import moviesReducer from './reducers/movies_reducer'

// 统一的数据储存
const store = {
  user: null,
  books: null,
  movies: null
}

// 引入reducer操作表
const reducerHash = {
  ...userReducer,
  ...booksReducer,
  ...moviesReducer,
}

// 统一的reducer操作 查找reducer操作表
const reducer = (state, action) => {
  if(reducerHash[action.type]) {
    return reducerHash[action.type](state, action)
  } else {
    throw new Error('type错误')
  }
}

function App() {
  // 创建对数据的读写API
  const [state, dispatch] = useReducer(reducer, store)
  return (
    <Context.Provider value={{state, dispatch}}>
    {/* 统一的上下文 数据提供 */} {/* 提供数据对象 {state, dispatch} ES6对象语法缩写 */}
      <User />
      <hr />
      <Books />
      <Movies />
    </Context.Provider>
  )
}

注意使用策略模式（表驱动）重构reducer代码。如下，之后可拆分为模块文件，分别导入，方便增加其他接口

const reducerHash = {
'setUser': (state, action) => ({...state, user: action.user}),
'setBooks': (state, action) => ({...state, books: action.books}),
'setMovies': (state, action) => ({...state, movies: action.movies}),
}

// 改为引入模块
import userReducer from './reducers/use_reducer'
import booksReducer from './reducers/books_reducer'
import moviesReducer from './reducers/movies_reducer'
// 引入reducer操作表
const reducerHash = {
...userReducer,
...booksReducer,
...moviesReducer,
}

use_reducer

1
2
3

export default {
  'setUser': (state, action) => ({...state, user: action.user})
}

books_reducer

1
2
3

export default {
  'setBooks': (state, action) => ({...state, books: action.books})
}

movies_reducer

1
2
3

export default {
  'setMovies': (state, action) => ({...state, movies: action.movies})
}

User.jsx

import React, {useContext, useEffect} from "react";
import Context from './Context'
import ajax from './ajax'

function User() {
  const {state, dispatch} = useContext(Context)
  // 模拟请求用户数据
  useEffect(() => {
    ajax('/user').then(user => {dispatch({type: 'setUser', user})})
  }, []) // 模拟 componentDidMount
  return (
    <div>
      <h1>个人信息</h1>
      <div>name: {state.user ? state.user.name : "加载中..."}</div>
    </div>
  )
}
export default User

Books.jsx

import React, {useContext, useEffect} from "react";
import Context from './Context'
import ajax from './ajax'

function Books() {
  const {state, dispatch} = useContext(Context)
  // 模拟请求书籍数据
  useEffect(() => {
    ajax('/books').then(books => {dispatch({type: 'setBooks', books})})
  }, [])
  return (
    <div>
      <h2>书籍信息</h2>
      <ol>
        {state.books
          ? state.books.map(book => <li key={book.id}>{book.name}</li>)
          : '加载中...'
        }
      </ol>
    </div>
  )
}
export default Books

Movies.jsx

import React, {useContext, useEffect} from "react";
import Context from './Context'
import ajax from './ajax'

function Movies() {
  const {state, dispatch} = useContext(Context)
  // 模拟请求电影数据
  useEffect(() => {
    ajax('/movies').then(movies => {dispatch({type: 'setMovies', movies})})
  }, [])
  return (
    <div>
      <h2>电影信息</h2>
      <ol>
        {state.movies
          ? state.movies.map(movie => <li key={movie.id}>{movie.name}</li>)
          : '加载中...'
        }
      </ol>
    </div>
  )
}
export default Movies

Context.js

1
2
3

// 统一的上下文 数据提供 组件
const Context = createContext(null)
export default Context

ajax.js

// 假 ajax
// 两秒钟后，根据 path 返回一个对象，必定成功不会失败
function ajax(path) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (path === "/user") {
        resolve({
          id: 1,
          name: "Frank"
        });
      } else if (path === "/books") {
        resolve([
          {
            id: 1,
            name: "JavaScript 高级程序设计"
          },
          {
            id: 2,
            name: "JavaScript 精粹"
          }
        ]);
      } else if (path === "/movies") {
        resolve([
          {
            id: 1,
            name: "爱在黎明破晓前"
          },
          {
            id: 2,
            name: "恋恋笔记本"
          }
        ]);
      }
    }, 2000);
  });
}
export default ajax

小结：使用useReduce和useContext/createContext就可以代替Redux
但更复杂的场景，可使用Redux-Saga等
在自定义hooks中可实现完全代替

4. `useContext` ⇧

上下文

全局变量是全局的上下文
上下文是局部的全局变量

使用方法，可分为三步

使用const Ctx = createContext(initialValue) 创建上下文
- 初始值initialValue可以为null
使用<Context.Provider></Context.Provider>圈定作用域范围，在标签内部写子组件
- 在此标签上添加需要传入的初始属性value，一般是一个包含读和写接口的对象
- <Context.Provider value={{state, dispatch}}></Context.Provider>
- 也可声明中间变量 const contextValue = { state, dispatch } 直接传这个对象
- <Context.Provider value={contextValue}></Context.Provider>

在作用域内，使用useContext(Ctx)，来使用上下文

获取读和写的接口const {state, dispatch} = useContext(Ctx)

const Ctx = createContext(null)

function App() {
const [n, setN] = useState(0)
return (
<Ctx.Provider value={{n, setN}}>
<div className="app">
<Baba />
</div>
</Ctx.Provider>
)
}

function Baba() {
const {n, setN} = useContext(Ctx)
return (
<div>
爸爸 得到的n: {n}
<Child />
</div>
)
}
function Child() {
const {n, setN} = useContext(Ctx)
const onClick = () => {setN(i => i + 1)}
return (
<div>
儿子 得到的n: {n}
<button onClick={onClick}>+1</button>
</div>
)
}

useContext将数据传递给圈定的作用域内所有子孙代组件
可以配合useState或者useReducer来获取读写接口

使用`useContext`注意事项 ⇧

区别于Vue，数据更新不是响应式的，而只是一个重新渲染的过程（从上而下逐级通知setN重新渲染）

在一个模块中，将Ctx里的值改变（动态Context）
在另一个模块不会感知到这个变化
在某个子组件中触发setN变更数据，通知根组件<App />变更，然后 自顶向下，逐级 通知使用到数据的组件去更新数据
数据流向始终是单向的

5. `useEffect` & `useLayoutEffect` ⇧

`useEffect` ⇧

副作用（函数式概念）

对环境的改变即为 副作用，例如修改 document.title
但不一定非要把副作用放在useEffect里
实际上，称为 useAfterRender 更好，即每次render后运行

用途

模拟组件生命周期的三个钩子函数
- 作为componentDidMount使用，将空数组[]作为第二个参数
- 作为componentDidUpdate使用，第二个参数指定依赖 [n] 放在数组中
- 作为componentWillUnmount使用，通过return () => {}
- 路由中常用，在此钩子中做清理工作，防止内存泄漏
- 对回京做的任何变动，组件卸载时都需要清理
第二个参数和返回的回调决定了回调函数什么时候再次执行
以上三种用途可同时存在

特点

如果同时存在多个useEffect，会按照 出现次序 执行

代码示例

function App() {
  const [n, setN] = useState(0)
  const onClick = () => {
    setN(i => i + 1)
  }

  // App第一次渲染 mount
  useEffect(() => {
    console.log('第一次渲染之后执行')
  }, []) // 表示 [] 里的状态变化后再次执行，没有变量就不会再次执行

  // App 任何数据更新后渲染 update
  useEffect(() => {
    console.log('任何一个state状态变化时，即每次渲染之后都执行')
  }) // 不写第二个参数表示 任何依赖变化时都执行

  // 具体到某个数据更新后渲染 update
  useEffect(() => {
    console.log(`当依赖n变化，渲染后执行，第${n}次也变化了`)
  }, [n]) // 依赖n变化时执行

  // 排除第一次初始化数据的更新 具体到某个数据更新后渲染 update
  useEffect(() => {
    if(n !== 0) {
      console.log(`当依赖n变化，渲染后执行，不算初始化的那次`)
    }
  }, [n])

  // App第一次渲染 实现 setInterval
  useEffect(() => {
    const id = setInterval(() => {
      console.log('hi')
    }, 1000)
    return () => {
      window.clearInterval(id) // 防止内存泄漏
    }
  }, [])

  return (
    <div>
      n: {n}
      <button onClick={onClick}>+1</button>
    </div>
  )
}

`useLayoutEffect` ⇧

useEffect在浏览器渲染完成后执行，代码示例

const BlinkyRender = () => {
  const [v, setV] = useState(0)
  useEffect(() => {
    document.querySelector('#x').innerText = 'value: 1000'
  }, [v])
  return (
    <div id="x" onClick={() => {
      setValue(0)
    }}>
      value: {v}
    </div>
  )
}

页面渲染时有一个闪烁，value从0迅速变为1000

useLayoutEffect称为 “布局副作用”，在浏览器渲染前执行

const BlinkyRender = () => {
  const [v, setV] = useState(0)
  useLayoutEffect(() => {
    document.querySelector('#x').innerText = 'value: 1000'
  }, [v])
  return (
    <div id="x" onClick={() => {
      setValue(0)
    }}>
      value: {v}
    </div>
  )
}

页面没有出现闪烁问题
有很多DOM操作，浏览器会等DOM操作完了再渲染
- useEffect在浏览器渲染改变屏幕像素之后
- useLayoutEffect在DOM操作完了，紧接着执行回调（对 Layout有影响的操作），然后再去渲染（改变屏幕像素之前）

`useEffect` V.S. `useLayoutEffect` ⇧

通过时间点来侧面证明，代码示例

const App = () => {
const [n, setN] = useState(0)
const time = useRef(null)
const onClick = () => {
setN(i => i + 1)
time.current = performance.now() // beforeRender
}

useLayoutEffect(() => {
// afterRender
if(time.current) {
  console.log(performance.now() - time.current)
}
})

useEffect(() => {
// afterRender
if(time.current) {
  console.log(performance.now() - time.current)
}
})

return (
<div className="app">
  <h1>n: {n}</h1>
  <button onClick={onClick}>Click</button>
</div>
)
}

全局API performance.now()可以记录当前时间
从第二次点击开始计算
useEffect总是比useLayoutEffect慢，是因为useEffect在改变外观之后执行，而useLayoutEffect在改变外观之前执行

特点

useLayoutEffect总是比useEffect先执行，代码示例
useLayoutEffect里的回调最好时改变 Layout，否则没有意义

经验

虽然可以避免屏幕闪烁，但大部分时候不会去改变DOM，所以并不是总是使用useLayoutEffect更好
为了用户体验，优先使用 useEffect （优先渲染）
- useLayoutEffect操作的优先级，但会影响（延长）用户看到画面变化的时间

6. `useMemo` ⇧

使用`useMemo`前，先需要理解 `React.memo` ⇧

React默认总是有多余的render，即使渲染的数据没有发生改变，代码示例

function App() {
const [n, setN] = React.useState(0);
const [m, setM] = React.useState(0);
const onClick = () => {
setN(n + 1);
};

return (
<div className="App">
  <div>
    <button onClick={onClick}>update n {n}</button>
  </div>
  <Child data={m}/>
</div>
);
}

function Child(props) {
console.log("child 执行了");
console.log('假设这里有大量代码')
return <div>child: {props.data}</div>;
}

Child只依赖了{m}，而当数据{n}改变了，重新渲染App，连带着也会重新渲染Child，即使{m}未发生改变
如果props不变，就没有必要再次执行一个函数组件
代码中的Child用React.memo(Child)代替，封装一层

变更后的效果，见示例代码

function App() {
  const [n, setN] = React.useState(0);
  const [m, setM] = React.useState(0);
  const onClick = () => {
    setN(i => i + 1);
  };
  const onClick2 = () => {
    setM(i => i + 1);
  };

  return (
    <div className="App">
      <div>
        <button onClick={onClick}>update n {n}</button>
        <button onClick={onClick2}>update m {m}</button>
      </div>
      <Child2 data={m} />
    </div>
  );
}

function Child(props) {
  console.log("child 执行了");
  console.log("假设这里有大量代码");
  return <div>child: {props.data}</div>;
}

const Child2 = React.memo(Child);

React.memo(Child)使得一个组件只有在依赖（例如props）变化时，才会再次执行渲染

简化代码

function App() {
  const [n, setN] = React.useState(0);
  const [m, setM] = React.useState(0);
  const onClick = () => {
    setN(i => i + 1);
  };
  const onClick2 = () => {
    setM(i => i + 1);
  };

  return (
    <div className="App">
      <div>
        <button onClick={onClick}>update n {n}</button>
        <button onClick={onClick2}>update m {m}</button>
      </div>
      <Child1 data={m} />
    </div>
  );
}

const Child = React.memo( (props) => { // 封装一层 React.memo
  console.log("child 执行了");
  console.log("假设这里有大量代码");
  return <div>child: {props.data}</div>;
  }
);

`React.memo`的`bug` ⇧

示例代码

function App() {
  console.log('App执行了')
  const [n, setN] = React.useState(0);
  const [m] = React.useState(0);
  const onClick = () => {
    setN(n + 1);
  };
  const onClickChild = () => { // 每次App运行，生成新的函数
    console.log(m);
  };

  return (
    <div className="App">
      <div>
        <button onClick={onClick}>update n {n}</button>
      </div>
      <Child2 data={m} onClick={onClickChild} />
      {/* Child2 居然又执行了 */}
    </div>
  );
}

function Child(props) {
  console.log("child 执行了");
  console.log("假设这里有大量代码");
  return (
    <div onClick={props.onClick}>child: {props.data}</div>
  );
}

const Child2 = React.memo(Child);

在监听了函数之后，一秒破功，Child2 居然又执行了
因为App每次重新运行时，都会在执行const onClickChild = () => {}处，生成新的函数
新旧函数虽然功能一样，但是内存地址不一样

配合使用`useMemo`解决`React.memo`的问题

useMemo可以实现函数的缓存，比对函数内容，相同的话使用之前的缓存的函数
useMemo的返回值就是需要缓存的函数
使用useMemo来返回出需要传入子组件的函数，并给定依赖作为第二个参数

示例代码

function App() {
  const [n, setN] = useState(0);
  const [m, setM] = useState(0);
  const onClick = () => {
    setN(i => i + 1);
  };
  const onClick2 = () => {
    setM(i => i + 1);
  };
  const onClickChild = useMemo(() => {
    const fn = div => {
      console.log("on click child, m: " + m);
      console.log(div);
    };
    return fn;
  }, [m]); // 这里把 [m] 改成 [n] 就会打印出旧的 m
  return (
    <div className="App">
      <div>
        <button onClick={onClick}>update n {n}</button>
        <button onClick={onClick2}>update m {m}</button>
      </div>
      <Child2 data={m} onClick={onClickChild} />
    </div>
  );
}

function Child(props) {
  console.log("child 执行了");
  console.log("假设这里有大量代码");
  return (
    <div onClick={e => props.onClick(e.target)}>
      child: {props.data}
    </div>
  );
}

const Child2 = React.memo(Child);

useMemo特点

第一个参数是() => value，见源码useMemo 的TS类型声明
第二个参数是依赖 [m, n]
只有当依赖变化时，才会计算出新的value
如果依赖不变，那么就重用之前的value
这与Vue的computed相类似，用来缓存依赖一些不变化的数据

useMemo注意事项

如果value传的是函数，那么就要写成 useMemo(() => (x) => {})，这是一个返回函数的函数（高阶函数/组件）

形式上复杂难用，于是就有了useCallback

`useCallback`是`useMemo`的语法糖

用法

使用 useCallback(x => consolog(x), [m])
等价于 useMemo(() => x => console.log(x), [m])

7. `useRef` ⇧

`useRef`用途： ⇧

如果需要一个值，在组件不断render时保持不变，可以使用useRef
- 初始化：const count = useRef(0)
- 读取值：count.current
区别于setN，n 每次渲染都会变更

需求：要知道组件渲染了几次，使用一个变量记录（全局变量会污染命名环境）

使用useRef，每次渲染时更新useEffect(() => {count.current += 1})，得到一个新的count，而count.value在内存中的引用不变

渲染 count对象地址不变，其中的current值被记录在useRef对应的一个fiberNode上，示例代码

function App() {
console.log('App 执行')
const count = useRef(0)
const [n, setN] = useState(0)
const onClick = () => {
setN(i => i + 9)
}
// DidUpdate
useEffect(() => {
count.current += 1
console.log('count.current', count.current)
})
return (
<div className="app">
  <div>
    <button onClick={onClick}>update n {n}</button>
  </div>
</div>
)
}

`useRef`读取值为什么需要`.current`？ ⇧

为了保持新旧组件更新前后两次useRef是同一个引用对象（只有引用能做到，保持引用地址不变）

对比三个数据变化的钩子函数

useState/useReducer：n每次都变
useMemo/useCallback：在依赖[n]变更时，对应的函数fn改变，有条件地变
useRef：n永远不变

延伸

Vue3的 ref()
- 初始化：const count = ref(0)
- 读取值：count.value

不同点：

当count.value变化时，Vue3会自动render，帮你实现了UI更新

而React中使用useRef不会自动更新UI，代码示例

function App() {
console.log("App 执行");
const count = useRef(0);
const [n, setN] = useState(0);
const onClick = () => {
setN((i) => i + 9);
};
const onClick2 = () => { // 并不会触发UI更新
count.current += 1;
console.log("count.current onClick", count.current);
};
useEffect(() => {
console.log("count.current update", count.current);
});
return (
<div className="app">
<div>
<button onClick={onClick}>update n {n}</button>
<br />
<button onClick={onClick2}>update count.current {count.current}</button>
</div>
</div>
);
}

`useRef`不能做到变化时自动`render`刷新`UI`，需要额外步骤 ⇧

因为不符合React的函数式理念：UI = render(data)
- 每次data变化时，使用函数（例如setState）去渲染成新的虚拟DOM
- 将新的虚拟DOM与页面上旧的虚拟DOM做DOM Diff，得到一个patch补丁
- 根据这个patch补丁去重渲染DOM
如果想要变化时自动render，可以自定义去实现（使用setN），React不管

监听ref，当ref.current变化时，再加一个依赖，调用setX即可，示例代码

function App() {
console.log("App 执行");
const count = useRef(0);
const [n, setN] = useState(0);
const [_, set_] = useState(null);
const onClick = () => {
setN((i) => i + 9);
};
const onClick2 = () => {
count.current += 1;
set_(Math.random());
console.log("count.current onClick", count.current);
};
useEffect(() => {
console.log("count.current update", count.current);
console.log("--------------------");
});
return (
<div className="app">
  <div>
    <button onClick={onClick}>update n {n}</button>
    <br />
    <button onClick={onClick2}>update count.current {count.current}</button>
  </div>
</div>
);
}

8. `useRef`配合`forwardRef`用在函数组件中 ⇧

基本用法：让函数组件 <Button2 /> 支持 ref，获取其虚拟DOM的引用

代替原生使用id，和document.getElementById来获取元素

函数组件中会警告无法直接使用useRef 代码示例1：props无法传递ref属性

function App() {
  const buttonRef = useRef(null);
  return (
    <div className="app">
      <div>
        <Button2 ref={buttonRef}>按钮</Button2>
      </div>
    </div>
  );
}

const Button2 = (props) => {
  console.log("props", props);
  return <button className="red" {...props}></button>;
};

报警告Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
useRef作为元素的引用是在类组件中使用的，即只有类组件可以直接接受ref元素引用
提示函数组件去使用forwardRef
组件内打印console.log("props", props);得到object {children: "按钮"}，只把按钮传过去了，其他属性都忽略了

代码示例2：函数组件中使用React.forwardRef包裹一层组件，可声明第二个形参ref，实现函数组件ref的组件间传递

function App() {
  const buttonRef = useRef(null);
  return (
    <div className="App">
      <Button3 ref={buttonRef}>按钮</Button3>
    </div>
  );
}

/*
const Button2 = (props, ref) => {
  console.log("props: ", props);
  console.log("ref:", ref);
  return <button className="red" ref={ref} {...props} />;
};
const Button3 = forwardRef(Button2);
*/

const Button3 = React.forwardRef((props, ref) => {
  return <button className="red" ref={ref} {...props} />;
});

函数组件需要接受外部传来的ref参数，必须用React.forwardRef包起来
- <Button ref={buttonRef}>...</Button>
- const Button = React.forwardRef((props, ref) => (<button ref={ref} {...props} />))

代码示例3：两次ref传递得到button的引用，实现可移动的按钮（高阶组件封装）（仍有bug，待修复）

功能包装：const MovableButton = movable(Button2)

通过ref引用到Button2里面的按钮：const buttonRef = useRef(null)，需要做两次传递

第一次将 <MovableButton name="email" ref={buttonRef}> 传给 movable(Component) 中返回的 <Component ref={ref} {...props} />
即movable(Button2) 中返回的 <Button2 ref={ref} {...props} />

第二次 Button2 组件声明时传递 React.forwardRef((props, ref) => { return <button ref={ref} {...props} />; });

function App() {
// 赋上 可拖拽的 功能
const MovableButton = movable(Button2);
// 获取引用
const buttonRef = useRef(null);
// update
useEffect(() => {
console.log(buttonRef.current);
});
return (
<div className="App">
<MovableButton name="email" ref={buttonRef}>
按钮
</MovableButton>
</div>
);
}

// 函数组件 forwardRef 引用包装
const Button2 = React.forwardRef((props, ref) => {
return <button ref={ref} {...props} />;
});

// 仅用于实验目的，不要在公司代码中使用
function movable(Component) {
function Component2(props, ref) {
console.log(props, ref);

// 初始化
const [position, setPosition] = useState([0, 0]);
const lastPosition = useRef(null);

// 方法
const onMouseDown = (e) => {
lastPosition.current = [e.clientX, e.clientY];
};
const onMouseMove = (e) => {
// e.nativeEvent.stopImmediatePropagation(); //阻止冒泡
if (lastPosition.current) {
const x = e.clientX - lastPosition.current[0];
const y = e.clientY - lastPosition.current[1];
setPosition([position[0] + x, position[1] + y]);
lastPosition.current = [e.clientX, e.clientY];
}
};
const onMouseUp = () => {
lastPosition.current = null;
};

return (
<>
{/*套一层 div */}
<div
  className="movable"
  onMouseDown={onMouseDown}
  onMouseMove={onMouseMove}
  onMouseUp={onMouseUp}
  style={{
    left: position && position[0],
    top: position && position[1]
  }}
>
  <Component {...props} ref={ref} />
</div>
</>
);
}
return React.forwardRef(Component2);
}

useRef V.S. forwardRef

由于大部分时候不需要，所以props不包含ref
由于函数组件的参数 props不包含ref，所以需要React.forwardRef包裹一层，才可以传递 ref
React.forwardRef就是在函数组件中用来转发ref的

9. `useImperativeHandle` ⇧

Imperative 重要的
命名太长：其实意思就是setRef：用来变更ref
作用是自定义ref的属性

不用useImperativeHandle的代码示例

function App() {
  const buttonRef = useRef(null);
  useEffect(() => {
    console.log(buttonRef.current); // 打印出 <button>按钮</button>
  });
  return (
    <div className="App">
      <Button2 ref={buttonRef}>按钮</Button2>
      <button
        className="close"
        onClick={() => {
          console.log(buttonRef);
          buttonRef.current.remove();
        }}
      >
        x
      </button>
    </div>
  );
}

如果希望得到的ref是一个对button的自定义封装对象，则需要使用useImperativeHandle

使用useImperativeHandle的代码示例

function App() {
  const buttonRef = useRef(null);
  useEffect(() => {
    console.log(buttonRef.current); // 打印出 {x: ƒ x(), realButton: Object}
  });
  return (
    <div className="App">
      <Button2 ref={buttonRef}>按钮</Button2>
      <button
        className="close"
        onClick={() => {
          console.log(buttonRef);
          buttonRef.current.x();
        }}
      >
        x
      </button>
    </div>
  );
}

const Button2 = React.forwardRef((props, ref) => {
  const realButton = createRef(null);
  const setRef = useImperativeHandle;
  setRef(ref, () => {
    return {
      x: () => {
        realButton.current.remove();
      },
      realButton: realButton
    };
  });
  return <button ref={realButton} {...props} />;
});

10. 自定义 `Hook` ⇧

使用自定义 Hook 来封装数据操作

简单代码示例

直接获取处理过的数据 const { list /*, setList */ } = useList();
处理数据的逻辑封装在自定义Hook中，只暴露读和写的接口
初始化状态 const [list, setList] = useState(null)
DidMount时请求数据
返回出读和写的接口

处理相关的逻辑都写在一个钩子函数中，运行时暴露出读和写的接口

// import...
import useList from "./hooks/useList";
function App() {
const { list /*, setList */ } = useList();
return (
<div className="App">
  <h1>List</h1>
  {list ? (
    <ol>
      {list.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ol>
  ) : (
    "加载中..."
  )}
</div>
);
}

useList.js

import { useState, useEffect } from "react";

const useList = () => {
// 初始化 state
const [list, setList] = useState(null);
// mounted时 请求数据
useEffect(() => {
ajax("/list").then(list => {
  setList(list);
});
}, []); // [] 确保只在第一次运行

// 暴露读和写的接口
return {
list: list,
setList: setList
};
};
export default useList;

function ajax() {
return new Promise((resolve, reject) => {
setTimeout(() => {
  resolve([
    { id: 1, name: "Frank" },
    { id: 2, name: "Jack" },
    { id: 3, name: "Alice" },
    { id: 4, name: "Bob" }
  ]);
}, 2000);
});
}

功能更全的代码示例

不仅提供了读和写的借口，增删改查等其他功能

// import...
import useList from "./hooks/useList";
function App() {
const { list, deleteIndex } = useList();
return (
<div className="App">
  <h1>List</h1>
  {list ? (
    <ol>
      {list.map((item, index) => (
        <li key={item.id}>
          {item.name}
          <button onClick={() => {deleteIndex(index);}}>
            x
          </button>
        </li>
      ))}
    </ol>
  ) : (
    "加载中..."
  )}
</div>
);
}

useList.js

import { useState, useEffect } from "react";

const useList = () => {
const [list, setList] = useState(null);
useEffect(() => {
ajax("/list").then(list => {
  setList(list);
});
}, []); // [] 确保只在第一次运行
return {
list: list, // 查
addItem: name => { // 增
  setList([...list, { id: Math.random(), name: name }]);
},
deleteIndex: index => { // 删
  setList(list.slice(0, index).concat(list.slice(index + 1)));
}
};
};
export default useList;

function ajax() {
return new Promise((resolve, reject) => {
setTimeout(() => {
  resolve([
    { id: "1", name: "Frank" },
    { id: "2", name: "Jack" },
    { id: "3", name: "Alice" },
    { id: "4", name: "Bob" }
  ]);
}, 2000);
});
}

分析

还可以在自定义Hook里使用Context
useState只说了不能在if里，没说不能在函数里运行
- 只要这个函数在函数组件里运行即可
实际业务中，使用良好的组件封装，更抽象的自定义Hook封装，来代替页面组件中直接使用useState、uesEffect等钩子
使用函数组件，就没有必要使用Redux了

11. `Stale Closure`过时的闭包 ⇧

Be Aware of Stale Closures when Using React Hooks

代码示例

期待打印自增的count
结果每次打印都是相同的count

打印的count是过时的闭包，而不是后续操作产生的新的count

function WatchCount() {
const [count, setCount] = useState(0);
useEffect(function() {
setInterval(function log() {
  console.log(`Count is: ${count}`);
}, 2000);
}, []);
return (
<div>
  {count}
  <button onClick={() => setCount(count + 1) }>
    Increase
  </button>
</div>
);
}

把依赖[count]放入useEffect，更新DidUpdate时同时更新闭包
同时卸载WillUnmount时（return () => {}）清除上一次组件卸载时的 id，来干掉旧的闭包

代码中的两处id调用时机不同

function WatchCount() {
const [count, setCount] = useState(0);
useEffect(function() {
const id = setInterval(function log() { // 每次更新时创建新的id
  console.log(`Count is: ${count}`);
}, 2000);
return function() {
  clearInterval(id); // 清除上一次组件卸载时的id，调用时机不同
}
}, [count]);
return (
<div>
  {count}
  <button onClick={() => setCount(count + 1) }>
    Increase
  </button>
</div>
);
}

避免保留下过时的闭包，每次更新前需要重新获取新的闭包
或者在返回的函数中读取最新的闭包，而不是在返回的函数外

题外话

JS中有许多需要避免的bug或者反模式
- 隐式类型转换，用===
- 过时的闭包
- 空值判断，用??
- 异步
- 过长的条件分支，用策略模式（表驱动）

12. 总结 ⇧

flowchart LR
    React_Builtin_Hooks --> 状态...useState
    React_Builtin_Hooks --> 副作用...useEffect --> useLayoutEffect
    React_Builtin_Hooks --> 上下文...useContext
    React_Builtin_Hooks --> Redux...useReducer
    React_Builtin_Hooks --> 记忆...useMemo...配合React.memo --> 回调...useCallback
    React_Builtin_Hooks --> 引用...useRef --> forwardRef
    引用...useRef --> useImperativeHandle
    React_Builtin_Hooks --> 自定义...Hook --> useDebugValue

·未完待续·

参考文章 ⇧

【React非全解 4】Hooks 之 UseState 原理解析

xmasuhai@163.org (Joel Xu) — Wed, 05 Oct 2022 01:19:24 +0800

`Hooks` 之 `useState` 原理解析

大纲链接 §

[toc]

逐步分析 useState 基本原理和源码近似实现

1. 最简单的 `useState` 实现 ⇧

function App() {
  console.log('App 运行了')
  const [n, setN] = useState(0)
  console.log(`n: ${n}`)
  return (
    <div className="app">
      <p>{n}</p>
      <p>
        <button onClick={() => setN(n + 1)}>+1</button>
      </p>
    </div>
  )
}
ReactDOM.render(<App />, rootElement)

脑补点击button会发生什么

首次渲染 render <App />
- 调用App函数，得到虚拟div，创建真实div
用户点击button按钮，调用setN(n + 1)，再次 render <App />
- 调用App函数，得到虚拟div，经过DOM Diff，局部更新真实div
每次调用App()，都会运行useState(0)？
- 第n次运行useState，每次得到的n并不相同
useState如何实现每次运行时，得到n的结果不一样？

脑补点击button会发生什么

执行setN的时候，会发生什么？n会变吗？App()会重新执行吗？
如果App()会重新执行，那么useState(0)的时候，n每次的值会有不同吗？
通过console.log可以得出答案
- App()会重新执行
- setN并不会改变state.n本身
- n的值会改变

分析推论

setN
- setN一定会修改数据x，将n + 1存入x
- 而不是直接赋值给原数据n
- setN一定会触发<App />重新渲染re-render
useState
- useState一定会从x读取n的 最新值
x
- 每个组件有自己的数据x，将其命名为state

尝试实现 React.useState

import React from 'react'
import ReactDOM from 'react-dom'
const rootElement = document.getElementById('root')

function myUseState(initialValue) {
  console.log('myUseState运行')
  let _state = initialValue

  function setState(newState) {
    _state = newState
    render()
  }
  return [_state, setState]
}
// 借用ReactDOM.render
const render = ReactDOM.render(<App />, roootElement)

function App() {
  console.log('App运行')
  const [n, setN] = myUseState(0)
  console.log(`n: ${n}`)
  return (
    <div className="App">
      <p>{n}</p>
      <p>
        <button onClick={() => {setN(n + 1)}>+1</button>
      </p>
    </div>
  )
}

ReactDOM.render(<App />, rootElement)

点击按钮，视图不更新，打印n没有变化
因为每次运行myUseState会将state重置
需要一个不会被myUseState重置的变量
利用闭包，将变量声明在myUseState外部

再次尝试实现 React.useState

import React from 'react'
import ReactDOM from 'react-dom'
const rootElement = document.getElementById('root')

let _state
function myUseState(initialValue) {
  console.log('myUseState运行')
  // _state = _state === undefined ? initialValue : _state
  // _state = _state || initialValue // 有0值判断的bug
  _state = _state ?? initialValue // 空值合并运算符 保证常量不为 null 或者 undefined

  function setState(newSstate) {
    _state = newState
    render()
  }
  return [_state, setState]
}
// 借用ReactDOM.render
const render = ReactDOM.render(<App />, roootElement)

function App() {
  console.log('App运行')
  const [n, setN] = myUseState(0)
  console.log(`n: ${n}`)
  return (
    <div className="App">
      <p>{n}</p>
      <p>
        <button onClick={() => {setN(n + 1)}>+1</button>
      </p>
    </div>
  )
}

ReactDOM.render(<App />, rootElement)

以上代码存在的问题：如果一个组件用了两个 useState 怎么办

2. 如何让两个 `useState` 不冲突 ⇧

由于所有数据都放在同一个 _state 中，所以会冲突

import React from "react";
import ReactDOM from "react-dom";
const rootElement = document.getElementById("root");

let _state;

function myUseState(initialValue) {
_state = _state || initialValue;
function setState(newState) {
_state = newState;
render();
}
return [_state, setState];
}

const render = () => ReactDOM.render(<App />, rootElement);

function App() {
const [n, setN] = myUseState(0);
const [m, setM] = myUseState(0);
return (
<div className="App">
  <p>{n}</p>
  <p>
    <button onClick={() => setN(n + 1)}>+1</button>
  </p>
  <p>{m}</p>
  <p>
    <button onClick={() => setM(m + 1)}>+1</button>
  </p>
</div>
);
}

ReactDOM.render(<App />, rootElement);

改进思路

把_state做成一个对象
- 比如_state = {n: 0, m: 0}
- 不行，因为useState(0)并不知道变量的命名，是n还是m
把_state做成数组
- 比如_state = [0, 0]

使用多个useState

let _state = []
let index = 0

function myUseState(initialValue) {
  const currentIndex = index
  console.log('currentIndex', currentIndex)
  index += 1
  // 等价于 // _state[currentIndex] = _state[currentIndex] === undefined ? initialValue : _state[currentIndex]
  _state[currentIndex] = _state[currentIndex] ?? initialValue
  const setState = newState => {
    console.log('index', index)
    _state[currentIndex] = newState
    console.log('_state', _state)
    render()
  }
  return [_state[currentIndex], setState]
}

const render = () => {
  index = 0 // 重置index 防止每次渲染不断向_state中添加
  ReactDOM.render(<App />, rootElement)
}

function App() {
  const [n, setN] = myUseState(0);
  const [m, setM] = myUseState(0);
  return (
    <div className="App">
      <p>{n}</p>
      <p>
        <button onClick={() => setN(n + 1)}>+1</button>
      </p>
      <p>{m}</p>
      <p>
        <button onClick={() => setM(m + 1)}>+1</button>
      </p>
    </div>
  );
}

ReactDOM.render(<App />, rootElement);

代码示例，注意index += 1、currentIndex和在渲染方法中重置index = 0
不可以直接使用index，需要先使用中间变量保存下currentIndex
- index闭包变量，index += 1 用来累计加一
这样会导致 _state 越来越长，每次运行App，index没有被重置
理论上在每次渲染App前，就应该重置index = 0
- 防止每次渲染不断向_state数组中添加新项，而不是修改对应值

3. `useState` 不能写在 `if` 条件判断语句里 ⇧

_state数组方案缺点：if可能会打乱调用顺序

useState调用顺序
- 若第一次渲染时，n是第一个，m是第二个，k是第三个
- 则第二次渲染时必须保证调用顺序完全一致，不能跳过，颠倒顺序，否则数据就乱了

React不允许出现如下代码，查看报错

// ...
function App() {
  const [n, setN] = React.useState(0);
  let m, setM
  if(n % 2 === 1) { // if 打乱了调用顺序
    const [m, setM] = React.useState(0);
  }
  // 此时如果还有一个数据k，就会被提前到第二的位置
  // const [k, setK] = React.useState(0);
  return (
    <div className="App">
      <p>{n}</p>
      <p>
        <button onClick={() => setN(n + 1)}>+1</button>
      </p>
      <p>{m}</p>
      <p>
        <button onClick={() => setM(m + 1)}>+1</button>
      </p>
    </div>
  );
}
// ...

报错 React Hook "React.useState" is called conditionally. React Hooks must be called in the exact same order in every component render.
点击后报错：

参考 React 源码赏析一则
另一个原因是JS本身就不建议在条件语句中声明变量
Vue3 使用另一种思路解决了这个问题…

代码中还存在两个问题

App用了_state和index，那其他组件用什么
- 解决办法：给每个组件，创建一个_state和index
放在全局作用域里重名怎么办
- 解决办法：放在组件对应虚拟节点对象上

上图只画了App组件的更新过程，两个ChildA组件也有同样的过程
每个组件节点都会使用自己独立的_state和index

`useState`小结

每个函数组件对应一个React节点*
- *注意：目前代码对React的实现做了简化：
- React节点应该是FiberNode
- _state的真实名称为memorizedState
- index的实现则用到了链表
每个节点保存着各自的state和index
useState会读取state[index]
index由useState出现的顺序决定
setState会修改state，并触发更新

参考

阅读源码后，来讲讲React Hooks是怎么实现的

使用 `useRef` 和 `useContext`解决数据状态分身问题 ⇧

在使用useState过程中的错误理解：setN(n + 1)会改变n

数据状态中 n的分身，代码示例

function App() {
const [n, setN] = React.useState(0)
const log = () => setTimeout(() => console.log(`n: ${n}`), 3000)
return (
<div className="App">
  <p>{n}</p>
  <p>
    <button onCLick={() => setN(n + 1)}>+1</button>
    <button onCLick={log}>log</button>
  </p>
</div>
)
}

两种操作，为什么log出了旧数据？

1.点击+1，再点击log：无bug
2.点击log，再点击+1：有bug

因为有多个n，见时序图

setN(n + 1)永不会改变n
每次setN(n + 1)就会产生函数作用域内新的n，和旧的n同时存在与内存中
类似经典问题在for循环中打印5个5

希望有一个贯穿始终的状态

使用全局变量：window.xxx不实用
使用useRef
- useRef不仅可用于普通节点div，还能用于任意数据
- useRef的示例
- 强制更新（追加更新update(nRef.current)）的示例（不推荐使用，不如去使用Vue3）
使用useContext
- useContext不仅能贯穿始终，还能贯穿不同组件
- useContext的示例

`useRef` 的一个作用：固定数据状态 ⇧

import React from "react";
import ReactDOM from "react-dom";
const rootElement = document.getElementById("root");

function App() {
  const nRef = React.useRef(0); // 类似对象的引用 {current: 0}
  const log = () => setTimeout(() => console.log(`n: ${nRef.current}`), 1000);
  return (
    <div className="App">
      <p>{nRef.current} 这里并不能实时更新</p>
      <p>
        <button onClick={() => (nRef.current += 1)}>+1</button>
        <button onClick={log}>log</button>
      </p>
    </div>
  );
}

ReactDOM.render(<App />, rootElement);

const nRef = React.useRef(0); // 类似对象的引用 {current: 0}
读取值 nRef.current
- 类似Vue3的ref响应式数据读取值需要.value
有一个bug是：当nRef.current += 1时改变了原来的值，但不会自动重新渲染App，因为不符合「函数式」

可以手动触发App更新

import React from "react";
import ReactDOM from "react-dom";
const rootElement = document.getElementById("root");

function App() {
  const nRef = React.useRef(0); // 类似对象的引用 {current: 0}
  const log = () => setTimeout(() => console.log(`n: ${nRef.current}`), 1000);

  // 手动触发`App`更新
  // const [n, setN] = React.useState(null)
  // const setN = React.useState(null)[1]
  const update = React.useState(null)[1]
  return (
    <div className="App">
      <p>{nRef.current} 这里并不能实时更新</p>
      <p>
        <button onClick={
          () => {
            nRef.current += 1
            // setN(nRef.current)
            update(nRef.current)
          }
        }>+1</button>
        <button onClick={log}>log</button>
      </p>
    </div>
  );
}

ReactDOM.render(<App />, rootElement);

一直使用同一个对象nRef解决bug

`useContext` 的作用 ⇧

实现切换主题的功能

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const rootElement = document.getElementById("root");

const themeContext = React.createContext(null); // 初始化上下文，即全局变量

function App() {
  const [theme, setTheme] = React.useState("red");
  return (
    <themeContext.Provider value={{ theme, setTheme }}>
      <div className={`App ${theme}`}>
        <p>{theme}</p>
        <div>
          <ChildA />
        </div>
        <div>
          <ChildB />
        </div>
      </div>
    </themeContext.Provider>
  );
}

function ChildA() {
  const { setTheme } = React.useContext(themeContext);
  return (
    <div>
      <button onClick={() => setTheme("red")}>red</button>
    </div>
  );
}

function ChildB() {
  const { setTheme } = React.useContext(themeContext);
  return (
    <div>
      <button onClick={() => setTheme("blue")}>blue</button>
    </div>
  );
}

ReactDOM.render(<App />, rootElement);

初始化上下文，即全局变量const themeContext = React.createContext(null);
themeContext.Provider表示作用域范围，在标签内<themeContext.Provider>...</themeContext.Provider>
- 只有此作用域里的组件（子孙组件）可以使用提供的数据 value={{ theme, setTheme }}
在子组件中读取const { setTheme } = React.useContext(themeContext);，即子孙组件调用父组件提供的全局方法

总结 ⇧

每次重新渲染，组件函数就会执行
对应所有state都会出现数据的「分身」
可以使用useRef/useContext，来得到符合预期的数据

Vue 3 对比 React

·未完待续·

参考文章 ⇧

亮点

分析 useState 原理和源码
useRef 的作用
useContext 的作用

【React非全解 3】函数组件

xmasuhai@163.org (Joel Xu) — Tue, 04 Oct 2022 00:40:52 +0800

函数组件

大纲链接 §

[toc]

函数组件比 class 组件简单

1. 函数组件创建方式 ⇧

// Arrow Function Component
const Hello = (props) => {
  return (
    <div>
      {props.message}
    </div>
  )
}

// 简写
const Hello = props => <div>{props.message}</div>

// Function Component
function Hello(props) {
  return  (
    <div>
      {props.message}
    </div>
  )
}

函数组件完全替代 Class 组件需要解决的两个问题 ⇧

函数组件没有 state 怎么办
函数组件没有生命周期怎么办

函数组件没有 state 怎么办

React v16.8+ 推出 Hooks API
- 其中的一个 API 叫做 useState 可以解决 state 的问题

示例，实现 +1 的功能

import {useState} from 'react'
cosnt App = props => {
const [n, setN] = useState(0)
const onClick = () => { setN(n + 1) }
return (
<div>
  {n}
  <button onClick={onClick}> +1 </button>
</div>
)
}

export default App

消除了this，大大降低了心智负担，简化代码量

函数组件没有生命周期怎么办

React v16.8+ 推出 Hooks API
- 其中的一个 API 叫做 useEffect 可以解决生命周期的问题
- useEffect 用来解决副作用
模拟compnentDidMount：
- useEffect( () => {console.log('第一次渲染')}, [] )
模拟compnentDidUpdate：
- useEffect( () => {console.log('任意属性变更')})
- useEffect( () => {console.log('属性n变了')}, [n, ...] )
模拟compnentWillUnmount：
- useEffect( console.log('第一次渲染后'); return () => {console.log('组件将要卸载')} )

模拟其他生命周期

模拟constructor：函数组件执行的时候，就相当于constructor
模拟shouldComponentUpdate：使用React.memo和useMemo可以解决

模拟render：函数组件的返回值就是 render 的返回值

cosnt App = props => {
console.log('这里相当于执行了 constructor')
const X = () => {
const n = 1
return <div>xxx</div>
}
const Y = () => {
const n = 2
return <div>yyy</div>
}

return (
{/* 这里可以写一些逻辑 */}
<>
  <X /> <Y />
  这里相当于执行了 render
</>
)
}

export default App

2. 详解函数组件模拟生命周期 ⇧

模拟`componentDidMount`： ⇧

不能直接在函数内访问n：console.log(n)，否则每次渲染都会调用，不能做到只有第一次调用

使用 useEffect(() => {}, [])

默认只有第一个参数的情况下，效果和不使用hooks写在外部一样，每次渲染都执行

传第二个参数为 [] 空数组，则可以实现只在第一次时调用

import {useState, useEffect} from 'react'
cosnt App = props => {
const [n, setN] = useState(0)
const onClick = () => { setN(n + 1) }
// console.log(n) // 每次渲染都会调用，不能做到只有第一次调用

useEffect(() => {
console.log('调用 useEffect')
}, [])

return (
<div>
{n}
<button onClick={onClick}> +1 </button>
</div>
)
}

export default App

部分模拟`componentDidUpdate`： ⇧

import {useState, useEffect} from 'react'
cosnt App = props => {
  const [n, setN] = useState(0)
  const [m, setM] = useState(0)
  const onClickN = () => { setN(n + 1) }
  const onClickM = () => { setM(m + 1) }
  useEffect(() => {
    console.log('n, m 更新了') // 第一次也会执行
  }, [n, m])

  return (
    <div>
      {n}
      {m}
      <button onClick={onClickN}> n+1 </button>
      <button onClick={onClickM}> m+1 </button>
    </div>
  )
}

export default App

使用 useEffect(() => {}, [n, m, ...])
- 第一次也会执行，而 componentDidUpdate 第一次不会执行
- 将需要追踪变化的属性写在第二个参数的数组中
- 不写第二个参数，则追踪所有属性变化 useEffect( () => {} )

模拟`componentWillUnmount`： ⇧

import {useState, useEffect} from 'react'
cosnt App = props => {
  const [childVisible, setChildVisible] = useState(true)
  const hide = () => { setChildVisible(false) }
  const show = () => { setChildVisible(true) }
  return (
    <div>
      {childVisible
        ? <button onClick={hide}>hide</button>
        : <button onClick={show}>show</button>
      }
      {childVisible
        ? <Child />
        : null
      }
    </div>
  )
}

const Child = props => {
  useEffect( () => {
    console.log('渲染或变化了')
    return () => {
      console.log('Child销毁了')
    }
  })
  return (<div>Child</div>)
}

export default App

使用 useEffect(() => () => {} )
- 在回调中返回一个箭头函数，会在组件销毁时调用

函数组件模拟生命周期钩子函数小结

能用函数组件就用函数组件，更简单
React 通过使用 useEffect 不同的参数与返回值组合，来模拟实现类组件中的三个生命周期

3.自定义 `Hooks` 之 `useUpdate` ⇧

引入一个计数状态 ⇧

useEffect 会在数据第一次生成时就调用，如何在数据第二次发生变化才调用？

通过useState引入一个计数状态 [nUpdateCount, setNUpdateCount] = useState(0)
当组件挂载后，计数状态 +1
- 通过useEffect模拟componentDidMount已挂载
当 nUpdateCount > 1 说明已挂载

判断 nUpdateCount > 1 时，才执行后续逻辑

import {useState, useEffect} from 'react'

const App = () => {
const [n, setN] = useState(0)
const onClick = () => {
setN(n + 1)
}
// 引入一个计数状态
const [nUpdateCount, setNUpdateCount] = useState(0)
// 挂载后 计数
useEffect(() => {
// setNUpdateCount(nUpdateCount + 1)
setNUpdateCount(x => x + 1)
}, [n])

// 计数状态大于 1 时，才显示 n 变化了
useEffect(() => {
nUpdateCount > 1 && console.log('n变了')
}, [nUpdateCount])

return (
<div>
  {n}
  <button onClick={onClick}> +1 </button>
</div>
)
}
// ...

目前就实现当n第一次变化时，才执行 console.log('n变了')

通过将以上逻辑封装为自定义钩子函数组合来实现

封装自定义钩子函数 ⇧

这个自定义函数 必须是以use开头，例如：useX
- 需要接受初始状态：const useX = (n) => {/*...*/}
- 返回状态（可选）：return {/*...*/}

用解构赋值来接受变量（可选）：const {nUpdateCount} = useX(n)

import {useState, useEffect} from 'react'

const App = () => {
const [n, setN] = useState(0)
const onClick = () => {
setN(n + 1)
}

// 封装为钩子函数
const useX = (n) => {
const [nUpdateCount, setNUpdateCount] = useState(0)

// 挂载后 计数状态 +1 说明已挂载
useEffect(() => {
  // setNUpdateCount(nUpdateCount + 1)
  setNUpdateCount(x => x + 1)
}, [n])

return {
  nUpdateCount
}
}

// 调用 useX() 执行之前相同的逻辑，获取 nUpdateCount
const {nUpdateCount} = useX(n)

// 计数状态 nUpdateCount 大于 1 时，才显示 n 变化了
useEffect(() => {
nUpdateCount > 1 && console.log('n变了')
}, [nUpdateCount])

return (
<div>
  {n}
  <button onClick={onClick}> +1 </button>
</div>
)
}
// ...

将后续的逻辑放到useX的第二个参数fn，为一个回调函数 ⇧

在封装的钩子函数中
- 第一个参数接受状态；第二个参数接受回调函数
- 判断计数状态是否大于1，大于1，说明已挂载

在回调中执行具体的逻辑（即将具体执行的逻辑放在回调中，通过参数传入即可）

import {useState, useEffect} from 'react'

const App = () => {
const [n, setN] = useState(0)
const onClick = () => {
setN(n + 1)
}

// 第一个参数接受 状态；第二个参数接受 回调函数
const useX = (n, fn) => {
// 计数状态
const [nUpdateCount, setNUpdateCount] = useState(0)
// 挂载后 计数状态 +1 说明已挂载
useEffect(() => {
  // setNUpdateCount(nUpdateCount + 1)
  setNUpdateCount(x => x + 1)
}, [n])

// 判断计数状态是否大于1
// 计数状态 nUpdateCount 大于 1 时，才显示 n 变化了
useEffect(() => {
  // nUpdateCount > 1 && console.log('n变了')
  nUpdateCount > 1 && fn() // fn() 为传入的第二个参数，执行具体的逻辑
}, [nUpdateCount])

// 当无需暴露计数状态时，可以不写返回值
return {
  nUpdateCount
}
}

// 调用 useX() 执行之前相同的逻辑，获取 nUpdateCount
// 并且将逻辑写在第二个参数 回调函数中
// 当无需暴露计数状态时，可以不解构出返回值 直接 useX(n, () => {/*...*/})
const {nUpdateCount} = useX(n, () => {
console.log('n变了') // 将具体执行的逻辑放在回调中，通过参数传入即可
})

return (
<div>
  {n}
  <button onClick={onClick}> +1 </button>
</div>
)
}
// ...

模仿useEffect，交换参数位置 useX(fn, n) ⇧

也可以将第二个参数改为数组的形式 useX(fn, stateArr)
计数状态随便取名
- const [nUpdateCount, setNUpdateCount] = useState(0)
- 改为const [count, setCount] = useState(0)

将useX改为useUpdate

import {useState, useEffect} from 'react'

const App = () => {
const [n, setN] = useState(0)
const onClick = () => {
setN(n + 1)
}

// const useX = (fn, n) => {
// const useX = (fn, stateArr) => { // 交换参数位置
// 更名为 useUpdate
const useUpdate = (fn, stateArr) => {
// 计数状态
// const [nUpdateCount, setNUpdateCount] = useState(0)
const [count, setCount] = useState(0)
// 挂载后 计数状态 +1 说明已挂载
useEffect(() => {
  // setNUpdateCount(x => x + 1)
  setCount(x => x + 1)
}, stateArr)

useEffect(() => {
  // nUpdateCount > 1 && fn()
  count > 1 && fn()
}, [count])
}

// useX(() => { // 更名为 useUpdate
useUpdate(() => {
console.log('变了') // 将具体执行的逻辑放在回调中，通过参数传入即可
}, [n])

return (
<div>
  {n}
  <button onClick={onClick}> +1 </button>
</div>
)
}
// ...

将 useUpdate 放在外部 ⇧

第二参数为状态依赖，通过扩展运算符解构为数组，解决警告（可选）

import {useState, useEffect} from 'react'

const useUpdate = (fn, stateArr) => {
// 计数状态
const [count, setCount] = useState(0)
// 挂载后 计数状态 +1 说明已挂载
useEffect(() => {
// setNUpdateCount(x => x + 1)
setCount(x => x + 1)
}, [stateArr])
// }, [...stateArr])

useEffect(() => {
// nUpdateCount > 1 && fn()
count > 1 && fn()
}, [count])
}

const App = () => {
const [n, setN] = useState(0)
const onClick = () => {
setN(n + 1)
}

useUpdate(() => {
console.log('变了') // 将具体执行的逻辑放在回调中，通过参数传入即可
}, n)

return (
<div>
  {n}
  <button onClick={onClick}> +1 </button>
</div>
)
}
// ...

封装为导出一个单独的文件，导入使用 ⇧

useUpdate.js

1
2
3

export const useUpdate = (fn, stateArr) => {
  /*...*/
}

其他复用逻辑的地方导入使用 import {useUpdate} from './useUpdate'

`useUpdate`小结 ⇧

第一次由 undefined 变为 0 时不执行函数
- 第二次变化时，执行函数
- 第n次变化时，执行函数
useUpdate接受一个回调和一个依赖
将传入的依赖放入内部的 useEffect
useEffect模拟挂载时，依赖改变，将内部计数状态+1
再次使用useEffect模拟第一次发生改变也执行逻辑
- 此时使用计数状态作为依赖
- 判断内部计数状态大于1，说明已挂载，立即执行传入的回调

4. 测试：函数组件 ⇧

函数组件直接通过参数获取 props
函数组件通过 React.useState
React v16.8 正式推出了 Hooks API
useEffect(()=>{}, []) 模拟 componentDidMount

·未完待续·

参考文章 ⇧

React 函数组件.pdf

【React非全解 2】Class 组件详解

xmasuhai@163.org (Joel Xu) — Mon, 03 Oct 2022 09:50:46 +0800

Class 组件详解

大纲链接 §

[toc]

Class 组件虽然是已淘汰的繁杂用法，没有函数组件那样的简洁清晰的语法，“能效比”低，新项目基本不用，只是使用 Class 组件必须有更扎实的 JS 功底，洞悉this的原理，好比汉字的「识繁书简」

1. 英语小课堂 ⇧

英语	翻译
`derived`	导出的，衍生的，派生的
`render`	渲染
`super class`	超类、父类
`property`	属性
`state`	状态
`mount`	挂载

2. 两种创建 `class` 组件的方式 ⇧

过时的ES5方式

import React from 'react'
const A = React.createClass({
  render() {
    return (
      <div>hi</div>
    )
  }
})
export default A

由于 ES5 不支持 class，才会有这种方式

ES6方式（也过时了，现在用函数组件）

import React from 'react'
class B extends React.Component {
  constructor(props) {super(props)}
  render() {
    return (
      <div>hi</div>
    )
  }
}
export default B

关键词 extends、constructor、super
构造方法中如果不用添加额外代码的话，可直接删除constructor(props) {super(props)}

哪种好

ES6相较来说更好，老项目中只用这种方式创建类组件

浏览器不支持 ES6 怎么办

公司还在搞IE8，肯定是个破公司，跳槽吧
用webpack + babel 将ES6转译成ES5即可

3. 回顾`props` ⇧

父组件的`state`传给子组件作为其 `props` ⇧

class Parent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {name: 'xxx'}
  }
  clickHandler = () => {}
  render() {
    return (
      <B name={this.state.name}
         clickHandler={this.clickHandler}> hi </B>
    )
  }
}

外部数据 props 被包装为一个对象
{name: 'xxx', clickHandler: ..., children: 'hi'}
此处 clickHandler 是一个回调

子组件初始化 ⇧

class B extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {}
}

要么自动初始化，即不写constructor方法，自动继承
要么手动初始化，且必须写全套（不写super直接报错）
效果是将props放到实例的 this 上

效果

这么做了之后，this.props就是外部数据 对象的地址 了

子组件读取`props` ⇧

class B extends React.Component {
  constructor(props) {super(props)}
  render() {
    return (
      <div onClick={this.props.clickHandler}>
        {this.props.name}
        <div>
          {this.props.children}
        </div>
      </div>
    )
  }
}

通过this.props.xxx读取

原则：不准对组件的 `props` 进行写入 ⇧

尝试改写 props 的值（一个对象的地址）

this.props = { /* 另一个对象 */ }
这样破坏了单向数据流的原则
外部数据，应该由外部更新

尝试更改 props 的属性

this.props.xxx = 'hi'
这样同样破坏了单向数据流的原则
外部数据，不应该从内部改值

原则

应该由数据的 所有者 对数据进行更改
原则上可以用一个内部数据的属性来承接，修改这个内部数据的属性

`props`相关的钩子 ⇧

componentWillReceiveProps 钩子

当组件接受新的 props 时，会触发此钩子
钩子函数即「特殊实际调用的函数」
示例

该钩子已经被弃用

更名为 UNSAFE_componentWillReceiveProps
旧项目中 16.9- 可能会看到

`props`的作用 ⇧

接受外部数据

只能读，不能写
外部数据由父组件传递，由父组件来维护

接受外部函数

在恰当的时机，调用该函数
该函数一般是父组件的函数

4. 回顾`state` ⇧

初始化 `state` ⇧

class B extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      user: {name: 'xxx', age: 18}
    }
  }

  render() {/*...*/}
}

读写 `state` ⇧

读数据用 this.state

this.state.xxx.yyy.zzz

写数据用 this.setState(???, fn)

this.setState(newState, fn)
注意 setState 不会立即改变 this.state
- 而是会在当前代码运行完后，再去更新 this.state，从而触发 UI 更新
推荐总是使用 this.setState((state, props) => newState, fn)
- 这种方式的 state 反而更易于理解
- fn 会在写入成功后执行，是成功后的回调
- 注意对象格式 this.setState((state, props) => ({xxx: state.xxx + 1 }), fn)

有时会 shallow merge 浅合并（即合并对象的第一层属性）

setState 会自动将新 state 与旧state进行一级合并

一种错误地做法：直接对 this.state的属性进行再次赋值来修改属性

this.state.n += 1
this.setState(this.state)
虽然可以起效，但不推荐，因为这样违反了数据不靠边的原则

5. 什么是生命周期 ⇧

类比如下代码

const app = document.getElementById('app')

// create
const div = document.createElement('div')
div.style.border = '1px solid red'

let state = 0
div.innerHTML =  `
  <p>${state}</p>
  <button>+1</button>
  <button>die</button>
`

// mount
app.appendChild(div)

div.querySelector('button').onclick = () => {
  // update
  state += 1
  div.querySelector('p').innerText = state
}

div.querySelectorAll('button')[1].onclick = () => {
  // destroy
  div.querySelector('button').onclick = null
  div.querySelectorAll('button')[1].onclick = null
  div.remove()
  div = null
}

这是create/constructor创建/构建的过程const div = document.createElement('div')
这是初始化state div.textContent = 'hi'
这是div挂载mount的过程app.appendChild(div)
这是div的update的过程div.textContent = 'hi2'
这是div的unmount的过程div.remove()

同理React组件也有这些过程，称之为组件的生命周期，示例代码 reactLifecycle.js

import React from 'react'
import ReactDOM from 'react-dom'

import './style.css'

// 模拟控制台
const div = document.createElement('div')
document.body.appendChild(div)
console.log = (content) => {
    div.innerHTML += `${content}<br>`
}

class App extends React.Component {
    // 创建
    constructor() {
        super()
        console.log('创建App')
        // 初始化
        this.state = {
            n: 0
        }
    }

    // methods
    onClick() {
        console.log('用户点击了')
        this.setState({
            n: this.state.n + 1
        })
    }

    // 将要 mount App
    UNSAFE_componentWillMount() {
        console.log('将将挂载App')
    }

    // 监听内容变化 更新渲染 // update
    render() {
        console.log('填充 App的内容')
          return (
            <div className="App">
                {this.state.n}
                <button onClick={() => this.onClick()}>
                  +1
                </button>
                <br/>
                收到 {this.props.word}
            </div>);
    }

    // mount App
    componentDidMount() {
        console.log('挂载App完毕')
    }

    // 更新前 再次render前
    UNSAFE_componentWillUpdate() {
        console.log('update App 之前')
    }

    // 更新前 再次render后
    componentDidUpdate() {
        console.log('update App 之后')
    }

    // 销毁前
    componentWillUnmount() {
        console.log('App 销毁前')
    }

    // 接受父组件传值
    UNSAFE_componentWillReceiveProps() {
        console.log('接受父组件传值前')
    }
}

// 销毁
class AppPaBa extends React.Component {
    constructor() {
        super()
        this.state = {
            hasChild: true
        }
    }
    onClick() {
        this.setState({
            hasChild: false
        })
    }
    callSon() {
     this.setState({
         word: 'OK'
     })
    }
    render() {
        return (
          <div>
            BaPa
            <button onClick={() => this.onClick()}> Destroy</button>
            <button onClick={() => this.callSon()}> Call</button>
            {this.state.hsChild? <App word={this.state.word} /> : null}
          </div>
        )
    }
}

const roorElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement)

5.0 生命周期钩子函数列表 ⇧

constructor() 创建时调用，初始化state
~~static getDerivedStateFromProps()~~ 可忽略
shouldComponentUpdate() 手动判断是否更新
- return false 时阻止更新
render() 渲染，创建虚拟DOM
~~getSnapshotBeforeUpdate()~~ 可忽略
componentDidMount() 挂载后调用，组件已出现在页面
componentDidUpdate() 更新后调用，组件已更新
componentWillUnmount() 即将卸载时调用，组件将销毁
~~static getDerivedStateFromError()~~ 可忽略
~~componentDidCatch()~~ 可忽略

5.1 生命周期之 `constructor` ⇧

用途

初始化 props：constructor(props) {super(props)}
初始化 state，但此时不能调用 setState 方法
- 只能使用 this.state = {/*...*/}

用来写 bind this，也可不写，自动继承

constructor() {
/* 其他代码略 */
this.onClick = this.onClick.bind(this) // 实例对象自身属性
}

// 等价于新语法 在实例对象自身上添加方法
onClick = () => {}
constructor() {/* 其他代码略 */} // 无初始化state时，可不写

5.2 生命周期之 `shouldComponentUpdate` ⇧

用途

返回true表示不阻止UI更新
返回false表示阻止UI更新
shouldComponentUpdate 文档

面试常问

shouldComponentUpdate 有什么用
它允许手动判断是否要进行组件更新
- 在其中添加自己的业务逻辑，可以根据不同应用场景，灵活地设置返回值，以避免不必要的更新

示例 +1 后立马 -1

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {n: 1}
  }
  onClick = () => {
    this.setState( state => ({n: state.n + 1}) )
    this.setState( state => ({n: state.n - 1}) )
    // {n: 1} 和 {n: 1} 不是同一个对象
  }
  shouldComponentUpdate(newProps, newState) {
    ;newState.n === this.state.n
      ? false
      : true
  }
  render() {
    console.log('render了一次')
    return (
      <div>
        {this.state.n}
        <button onClick={this.onClick}> +1 后立马 -1</button>
      </div>
    )
  }
}

首次就会render一次
只要数据一有改动，即使最终值相同，也会执行render
- {n: 1} 和 {n: 1} 不是同一个对象
- 但根据DOM diff不会实际去更新页面

启发

其实可以将newState和this.state的每个属性都对比一下
- 如果全等，就不更新组件
- 如果有一个不等，就更新

再启发

React内置了这项功能，只不过另外取名叫React.PuerComponent，来代替React.Component，他可以替换绝大多数情况下的shouldComponentUpdate钩子判断

质疑

为什么要用新的对象
为什么不直接在this.state上修改属性？
这涉及到函数式编程，暂略

参考性能优化如何在函数组件中实现 shouldComponentUpdate

关于 `React.PureComponent` ⇧

class App extends React.PureComponent {
  constructor(props) {
    super(props)
    this.state = {n: 1}
  }
  onClick = () => {
    this.setState( state => ({n: state.n + 1}) )
    this.setState( state => ({n: state.n - 1}) )
    // {n: 1} 和 {n: 1} 不是同一个对象
  }
  render() {
    console.log('render了一次')
    return (
      <div>
        {this.state.n}
        <button onClick={this.onClick}> +1 后立马 -1</button>
      </div>
    )
  }
}

PureComponent 会在 render 之前
- 对比新 state 和旧 state 的每一个 key
- 对比新 props 和旧 props 的每一个 key
- 作浅对比，值对比数据对象的第一层属性
如果所有 key 的值全都一样，就不会 render
如果有任何一个 key 的值不同，就会 render

参考

5.3 生命周期之 `render` ⇧

用途

展示视图 return (<>...</>) 里面是虚拟DOM
render() 方法是 class 组件中唯一必须实现的方法
只能有一个根元素
- 如果有两个根元素，就要用<React.Fragment></React.Fragment>文档片段包起来
- <React.Fragment>一般缩写成<></>

打印查看虚拟DOM

class App extends React.PureComponent {
  constructor(props) {
    super(props)
    this.state = {n: 1}
  }
  onClick = () => {
    this.setState( state => ({n: state.n + 1}) )
    this.setState( state => ({n: state.n - 1}) )
  }
  render() {
    const x = (
      <>
        {this.state.n}
        <button onClick={this.onClick}> +1 后立马 -1</button>
      </>
    )
    console.log('x:', x)
    return x
  }
}

技巧

render里可以写条件分支表达式
- 可以写 if...else
- 可以写 ?...:... 三元表达式
- 可以写 && 等短路判断
render里不能直接写for循环（return结束循环），需要用数组作中间变量

render里可以写array.map（循环渲染）

class App extends React.PureComponent {
constructor(props) {
super(props)
this.state = {n: 1}
}
onClick = () => {
this.setState( state => ({n: state.n + 1}) )
}
render() {
let message
if(this.state.n % 2 === 0) {
  message = <div>偶数</div>
} else {
  message = <span>奇数</span>
}
return (
  <>
    {message}
    <button onClick={this.onClick}> +1 </button>
  </>
)
}
}

class App extends React.PureComponent {
constructor(props) {
super(props)
this.state = {n: 1}
}
onClick = () => {
this.setState( state => ({n: state.n + 1}) )
}
render() {
return (
  <>
    {this.state.n % 2 === 0 ? 偶数 : 奇数}
    <button onClick={this.onClick}> +1 </button>
  </>
)
}
}

class App extends React.PureComponent {
constructor(props) {
super(props)
this.state = {arr: [1, 2, 3]}
}
render() {
let result = []
for(let i = 0; i < this.state.arr.length; i++) {
  result.push(this.state.arr[i])
}
return ( <div> {result} </div> )
}
}

class App extends React.PureComponent {
constructor(props) {
super(props)
this.state = {arr: [1, 2, 3]}
}
render() {
return this.state.arr.map( (n) => {
  <div key={n}>{n}</div>
})
}
}

参考

render文档

5.4 生命周期之 `componentDidMount` ⇧

用途

在元素插入页面之后执行逻辑，这些代码依赖DOM
- 例如获取元素高度，前提是元素必须出现在页面中
- Element.getBoundingClientRect()
- 不推荐使用id来获取元素
- 推荐使用ref来获取元素，不会出现id冲突的问题
也可以发起 加载数据 的AJAX请求（官方推荐）

首次渲染即会执行这个钩子函数

class App extends React.Component {
divRedf = undefind
constructor(props) {
super(props)
this.state = {width1: undefind, width2: undefind}
this.divRef = React.createRef()
}
componentDidMount() {
// id
const div = document.getElementById('xxx')
const {width: width1} = div.getBoundingClientRect()
this.setState({width1})

// ref
const div2 = this.divRef.current
const {width: width2} = div2.getBoundingClientRect()
this.setState({width2})
}
render() {
return (
  <>
    <div ref={this.divRef}>Hello {this.state.width2}</div>
    <div id="xxx">Hello {this.state.width1}</div>
  </>
)
}
}

参考

componentDidMount文档

5.5 生命周期之 `componentDidUpdate` ⇧

用途

在视图更新后执行逻辑
此处也可以发起 加载数据 的AJAX请求，用于 更新数据 的请求，见文档
- 区别于 componentDidMount时 加载数据 的请求
首次渲染不会执行这个钩子函数
注意
- 在此处setState可能会引起 无限循环，两者互相调用，除非放在if判断中
- 若shouldComponentUpdate返回false，则不会触发此钩子
  1
  
  componentDidUpdate(prevProps, prevState, snapShot) {}

参考

componentDidUpdate文档

5.6 生命周期之 `componentWillUnmount` ⇧

用途

组件将要被 移除出页面（DOM），然后被销毁（内存） 时执行逻辑
执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等
unmount 过的组件不会再次 mount，即组件实例卸载后，将永远不会再挂载它
- componentWillUnmount() 中不应调用 setState()
- 因为该组件将永远不会重新渲染

原则：谁污染谁治理（出于性能和用户体验考虑）防止内存泄漏

在ComponentDidMount里监听了window.scroll
- 那么就要在ComponentWillUnmount里取消监听
在ComponentDidMount里创建了timer（setTimeout）
- 那么就要在ComponentWillUnmount里清除timer（clearTimeout）
在ComponentDidMount里创建了AJAX请求
- 那么就要在ComponentWillUnmount里取消请求 AbortController MDN

参考

componentWillUnmount文档

生命周期函数小结 ⇧

分阶段查看钩子执行顺序

生命周期钩子函数回顾，分为三个阶段

首次渲染
- constructor() 初始化数据
- render() 创建虚拟 DOM
- 更新UI
- componentDidMount() 组件已出现在页面
再次渲染
- props变了、setState变了或者forceUpdate触发再次渲染
- shouldComponentUpdate() 或阻止组件更新
- 该更新时不要忘记return true否则不会触发更新
- render() 创建虚拟 DOM
- 更新UI
- componentDidUpdate() 组件已更新
销毁
- componentWillUnmopunt() 组件将死

7. 总结 ⇧

平时工作中以下推荐顺序写组件

函数组件 > 类组件 > React.PureComponent > React.Component
props只读；state可读可写
类组件中 this.setState((state, props) => newState, fn) > this.setState(newState, fn)

组件类型\负担对比	心智负担	手指负担	代码量	代码组合方式
函数组件	较轻	较轻	较少	`useXxx`钩子函数`Hooks API`
类组件	较重	较重	较多	类继承、`setState`、生命周期`API`等

8. 课后习题测试 `Class` 组件

React Class 组件的 constructor 在某些情况下可以省略
如果有 constructor，则 constructor 中的 super(props) 必须写
<B name="xxx" onClick={this.onClick}>hi</B> 组件接收到的 props 的值是 {name:"xxx", onClick:this.onClick, children: 'hi'}
setState 的 shallow merge 是 React 只会检查新 state 和旧 state 第一层的区别，并把新 state 缺少的数据从旧 state 里拷贝过来
被 React 弃用的生命周期有
- componentWillMount()
- componentWillUpdate()
- componentWillReceiveProps()
- 提示，前面加了 UNSAFE_ 前缀的生命周期，都是被弃用的
- 可以在 React 文档的某个页面里通过 Ctrl + F 找到
- （搜google）

·未完待续·

参考文章 ⇧

【React非全解 1】React 类组件和函数组件

xmasuhai@163.org (Joel Xu) — Sat, 01 Oct 2022 23:51:43 +0800

`React` 类组件和函数组件

大纲链接 §

[toc]

1. 元素 v.s. 组件 ⇧

Element v.s. Component

元素与组件
- 这是一个 React 元素（d小写）：const div = React.createEkement('div', ...)
- 这是一个 React 组件（D大写）：const Div = () => React.createElement('div', ...)
- 使用时当做标签来使用 <Div /> 为了和原生标签区别
这样的写法是约定俗成

什么是组件

能跟其他物件组合起来的物件，就是组件
组件并没有明确的定义，靠感觉理解就行
就目前而言，一个返回 React 元素的函数就是组件
在 Vue 中，一个 构造选项 就可以表示一个组件

`React`中不同风格的两种组件：类组件 v.s. 函数组件 ⇧

一、类组件

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>
  }
}

extends React.Component 是固定写法
注意：使用外部数据 {this.props.name}
- 从 this 中获取 props
使用组件 <Welcome name="xxx" />
- 当做标签使用
- 在标签中传属性，自动挂载到 props 上，以key: value的形式

二、函数组件 （更推荐）

1
2
3

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>
}

注意：使用外部数据 {props.name}
- 从函数的参数中获取 props
使用组件 <Welcome name="xxx" />
- 当做标签使用
- 在标签中传属性，自动挂载到 props 上，以key: value的形式

两种写法等价，其中函数组件也可以写成箭头函数组件

2. 在`React`中写标签会被翻译为 `React.createElement` ⇧

在React中写标签是在写什么？

绝对不是在写 HTML，其实是将 XML 标签编译为 JS 代码
React 同时支持接受字符串和函数作为参数，即可自动根据参数的类型做不同的操作
- <div /> 会被翻译成 React.createElement('div') 原生变成标签名的字符串
- <Welcome /> 会被翻译成 React.createElement(Welcome) 组件变成函数名传入
可以用 babel online 查看直接翻译结果来验证

`React.createElement` 的处理逻辑 ⇧

如果传入一个 字符串 'div'，则会创建一个 div标签 ⇧

`1`	`<div className="red" title="hi">xxx</div>`

如果传入一个类，则会在类前面加上 new操作符 ⇧

这会导致执行 constructor
获取一个组件对象

然后调用对象的 render 方法，获取其返回值，代替原来组件标签的位置

class Welcome extends React.Component {
constructor() {
super()
this.state = {n: 0}
}
render() {
return <div>hi</div>
}
}

new Welcome()

<Welcome name="hi" />

如果传入一个函数，则会调用该函数，并 获取其返回值，代替原来组件标签的位置 ⇧

1
2

const Welcome = () => (<div>hi</div>)
<Welcome name="hi" />

3. 小试牛刀，动手尝试两种组件 ⇧

// 相同的开头 之后略
import React from 'react'
import ReactDOM from 'react-dom'
import './styles.css'

function App() { return ( <div> 爸爸 <Son /> </div> ) }

class Son extends ReactComponent {
  constructor() {}
  add() {}
  render() {}
}

const GrandSon = () => {
  return ()
}

代码示例：链接

入口：App（ReactDOM.render(<App />, rootElement)）调用函数组件 App （React 17）
- ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( <App /> );（React 18+）

App 返回根组件 <div></div>

根组件包含 Son 组件
Son 组件使用类组件 class Son extends React.Component {}
Son 组件实现显示数据 n 功能
- constructor() {}
- super() 继承属性，必写，不写报错
- this.state = {n: 0} 声明内部数据初始化数据
Son 组件实现点击按钮 n + 1 功能
- add() { this.setState({ n: this.state.n + 1 }); } 方法操作内部数据
- render() {}
- 儿子 n: {this.state.n}
- <button onClick={() => this.add()}>+1</button>
Son 组件包含 GrandSon 组件
GrandSon 组件使用函数组件 const Grandson = () => {}
GrandSon 组件实现显示数据 n 功能
- const [n, setN] = React.useState(0) 解构出内部数据和数据更新方法初始化
- return ()
- 孙子 n:{n}

GrandSon 组件实现点击按钮 n + 1 功能

return ()

<button onClick={() => setN(n + 1)}>+1</button>

class Son extends ReactComponent {
constructor() {
super()
this.state = {n: 0}
}
add() {
// this.state.n += 1 // 直接改为何不行
this.setState( {n: this.state.n + 1 } )
}
render() {
<div className="Son">
儿子 n：{ this.state.n }
<button onClick={ () => this.add() }> +1 </button>
<GrandSon />
</div>
}
}

const GrandSon = () => {
const [n, setN] = React.useState(0)
return (
<div className="GrandSon">
孙子 n：{ n }
<button onClick={ setN(n + 1) }> +1 </button>
</div>
)
}

子组件，使用类组件
- 在 constructor中
- 继承属性 super()
- 初始化内部数据 this.state = {n: 0}
- 显示数据：儿子 n：{ this.state.n }
- 变更数据：
- this.state.n += 1 直接改内部数据为何不行
- 必须使用 this.setState({ n: this.state.n + 1 })
- 用户交互：点击按钮，执行加一操作 onClick={ () => this.add() }
孙代组件：使用函数组件
- 初始化内部数据 React.useState(0)
- 解构出内部数据和数据变更的方法 const [n, setN] = React.useState(0)
- 显示数据：儿子 n：{ n }
- 变更数据：onClick={ () => setN(n + 1) 得到一个新的n 而不是原有的n

4. 类组件 v.s. 函数组件使用 `props` ⇧

添加 props （外部数据）父组件传值给子组件 ⇧

代码示例：链接
父组件传递数据给子组件
- <Son msgToSon="儿子你好"/>
- <Son msgToSon={variable}/>
- 可使用字符串或者表达式（变量）
类组件 直接读取属性 this.props.msgToSon
函数组件 直接读取参数 props.msgToSon
- 接收参数（一般命名为props），将组件外部属性挂载到第一个参数对象上

外部数据只关心读，不可写（符合单向数据流原则）

class Son extends React.Component {
render() {
return (
  <div calssName="Son">
    我是儿子， 我爸对我说「{ this.props.msgToSon }」
    <Grandson msgToGrandson="孙子你好" />
  </div>
)
}
}

const GrandSon = props => {
return (
<div calssName="GrandSon">
  我是儿子， 我爸对我说「{ props.msgToGrandson }」
</div>
)
}

5. 类组件 v.s. 函数组件使用 `state` ⇧

添加 state （内部数据类似于Vue的data） ⇧

代码示例：链接
关注数据时的三个条件：
- 初始化 内部数据
- 读取内部数据
- 写入内部数据
类组件
- 在 constructor 方法中的 super()之后初始化内部数据
- this.state = { xxx: 0 }
- 使用 this.state.xxx 来读
- 使用 this.setState(???, fn) 来写，两种写法
- 使用 this.setState({xxx: this.state.xxx + 1}, fn) 来写，可以再传回调函数作为第二个参数
- 更推荐使用 this.setState( (state, props) => ({xxx: state.xxx + 1}), fn) 工厂函数更清晰地表明改变后的数据
函数组件 使用 useState 返回一个数组，第一项读，第二项写
- 语法含义 const [读值, 写值方法] = React.useState(初始值)
- 命名约定 const [x, setX] = useState('xxx')
- 当调用了 setX 并不会改变 x 本身，且永远不会改变 x
- 而是产生了一个新的 x 返回

内部数据关心：

初始化
读

写

class Son extends React.Component {
constructor() {
super()
this.state = {n: 0} // 初始化
}
add() {
// this.state.n += 1 // 为什么不能更新视图？错误的写法
// 因为 react 没有监听属性（属性劫持）

// 写
this.setState({ n: this.state.n + 1 }) // 不推荐的写法 易混淆
this.setState( state => state.n + 1 ) // 推荐的写法 更好理解区分新旧 state，避免异步造成的误解
}
render() {
return (
<div className="Son">
儿子 n：{ this.state.n } {/* 读 */}
<button onClick={() => this.add()}> +1 </button>
<Grandson />
</div>
)
}
}

const GrandSon = () => {
const [n, setN] = React.useState(0)
return (
<div className="Grandson">
孙子 n: {n}
<button onClick={() => setN(n + 1)}>+1</button>
</div>
)
}

类组件中 不推荐 的写入方法

先this.state.n += 1
后this.setState( this.state )
虽然可以生效，但是一般推荐 重新产生一个新的对象，而不是在原有的对象中修改
这遵循了「数据不可变的原则」

更推荐向 setState() 中传 一个返回对象的工厂函数 作为参数，代替传新的对象

setState( (state, /* props */) => ({n: state.n + 1 }) )
因为 setState 不会马上去改变 this.state.n 的值，会等一会儿更新，内部更新UI机制是异步的
可以在 setSatate 之后验证，打印出 console.log(this.state.n)
- 事实上，setSatate会在紧跟之后的同步代码结束后执行
为了避免混淆新旧 this.state ，必须传工厂函数
工厂函数能够明确显示 n 新的值，帮助更好地理解，防止误解出错

这实际上是一个 Stale Closure 过时的闭包问题

// ...
add() {
this.setState({ n: this.state.n + 1 }) // 写
console.log(this.state.n) // 视图改变 但打印的是 0 旧的n值
// this.state.n 仍是旧的值

this.setState( state => {
  const n = state.n + 1 // 可以很清楚地分辨 新旧 n 的值
  console.log(n)
  return {n}
})
}
// ...

props v.s. state 类组件 v.s.函数组件

分别和Vue中的 props 与 data 对应
函数组件的写法更简洁、不用考虑this，数据不可变

6. 类组件注意事项（很多坑） ⇧

this.state.n += 1 无效？

其实 n 已经变了，只不过 UI 不会自动更新而已
调用 setState 才会触发 UI 更新（异步更新）
因为 React 没有像 Vue 监听 data 一样监听 state

setState 会异步更新 UI

setState 之后，state 不会马上改变，立马读 state 仍是旧值
更推荐的方式是 setState(工厂函数)

this.setState(this.state) 不推荐？

React 希望我们不要修改旧 state（不可变数据）
常用代码：setState( {n: state.n + 1 } )

小结

React 函数式是一种理念。不适就用 Vue

7. 函数组件注意事项 ⇧

与类组件相似的地方

也要通过 setX(新值) 来更新 UI

和类组件不同的地方

没有 this，一律用参数和变量

两种编程模型的浅层对比 ⇧

`React` 编程模型 ⇧

一个对象，对应一个虚拟 DOM
另一个对象，对应另一个虚拟 DOM
对比两个虚拟 DOM，找到不同处（DOM diff），最够局部更新 DOM

`Vue` 编程模型 ⇧

一个对象，对应一个虚拟 DOM
当属性改变时，把属性相关 DOM 节点全部更新
注：Vue 为了其他考量，也引入了虚拟 DOM 和 DOM diff
Vue 劫持数据，修改数据会直接映射到UI上，更易理解

8. 复杂 `state` (多个数据/深层级)怎么处理 ⇧

公共代码

import React from 'react'
import ReactDOM from 'react-dom'
import './styles.css'

function App() {
return (
<div className="app">
  爸爸
  <Son />
</div>
)
}

类组件里有 `n` 和 `m` ⇧

class Son extends React.Component {
  constructor() {
    super()
    this.state = {
      n: 0,
      m: 0
    }
  }

  addN() {
    this.setState( state => ( {n: state.n + 1}) )
    // m未传值 会被覆盖为 undefined 吗？
  }
  addM() {
    this.setState( state => ( {m: state.m + 1}) )
    // n未传值 会被覆盖为 undefined 吗？
  }

  render() {
    return (
      <div className="Son">
        儿子 n: {this.state.n}
        <button onClick={() => this.addN}>n + 1</button>
        m: {this.state.m}
        <button onClick={() => this.addM}>m + 1</button>
        <GrandSon />
      </div>
    )
  }

}

类组件中setState，如果只对一部分进行修改，其他部分自动沿用上一次的值，而不会被undefined覆盖
- 可以了理解为类组件中，会自动合并未修改的数据，而用手动写 this.setState( {...this.state, n: this.state.n + 1} )
可是，这种合并只会合并第一层数据
代码示例

函数组件里有 `n` 和 `m` ⇧

const GrandSon = () => {
  const [n, setN] = React.useState(0)
  const [m, setM] = React.useState(0)
  return (
    <div className="GrandSon">
      孙子 n: {n}
      <button onClick={ () => setN(n + 1)}>n + 1</button>
      m: {m}
      <button onClick={ () => setM(m + 1)}>m + 1</button>
    </div>
  )
}

代码示例

函数组件另一种不推荐的写法 ⇧

你会发现 m 被置空 ⇧

const GrandSon = () => {
  const [state, setState] = React.useState( {n: 0, m: 0} )
  return (
    <div className="GrandSon">
      孙子 n: {state.n}
      <button onClick={ () => setState({n: state.n + 1})}>n + 1</button>
      m: {state.m}
      <button onClick={ () => setState({m: state.m + 1})}>m + 1</button>
    </div>
  )
}

函数组件的 setState 不会自动合并没有更新设置的数据，会用 undefined 覆盖没有传入的数据属性
要实现类组件同样的合并效果，需要使用展开运算符 ...state 来拷贝原先的数据属性，手动合并：
- <button onClick={ () => setState({...state, n: state.n + 1})}>n + 1</button>
- <button onClick={ () => setState({...state, m: state.m + 1})}>m + 1</button>
代码示例

类组件不会合并第二层属性 ⇧

class Son extends React.Component {
  constructor() {
    super();
    this.state = {
      n: 0,
      m: 0,
      user: {
        name: "xxx",
        age: 18
      }
    };
  }
  changeUser() {
    this.setState({
      // m 和 n 不会被置空
      user: {
        name: "yyy"
        // 第二层的 age 被置空 undefined
      }
    });
  }
  render() {
    return (
      <div className="Son">
        儿子 n: {this.state.n}
        <button onClick={() => this.addN()}>n+1</button>
        m: {this.state.m}
        <button onClick={() => this.addM()}>m+1</button>
        <hr />
        <div>user.name: {this.state.user.name}</div>
        <div>user.age: {this.state.user.age}</div>
        <button onClick={() => this.changeUser()}>change user</button>
        <GrandSon />
      </div>
    );
  }
}

代码示例

可以使用 `Object.assign` 拷贝一次第二层对象 ⇧

class Son extends React.Component {
  constructor() {
    super();
    this.state = {
      n: 0,
      m: 0,
      user: {
        name: "xxx",
        age: 18
      }
    };
  }
  addN() {
    this.setState({ n: this.state.n + 1 });
    // 对象第一层属性 m 不会被覆盖为 undefined
  }
  addM() {
    this.setState({ m: this.state.m + 1 });
    // 对象第一层属性 n 不会被覆盖为 undefined
  }
  changeUser() {
    const user = Object.assign({}, this.state.user); // 手动复制一遍之前的所有属性
    user.name = "jack";
    this.setState({
      // m 和 n 不会被置空
      user: user
    });
  }
  render() {
    return (
      <div className="Son">
        儿子 n: {this.state.n}
        <button onClick={() => this.addN()}>n+1</button>
        m: {this.state.m}
        <button onClick={() => this.addM()}>m+1</button>
        <hr />
        <div>user.name: {this.state.user.name}</div>
        <div>user.age: {this.state.user.age}</div>
        <button onClick={() => this.changeUser()}>change user</button>
        <Grandson />
      </div>
    );
  }
}

代码示例

也可以使用 `...` 展开运算符拷贝一次第二层对象 ⇧

class Son extends React.Component {
  constructor() {
    super();
    this.state = {
      n: 0,
      m: 0,
      user: {
        name: "xxx",
        age: 18
      }
    };
  }
  addN() {
    this.setState({ n: this.state.n + 1 });
  }
  addM() {
    this.setState({ m: this.state.m + 1 });
  }
  changeUser() {
    this.setState({
      // 对象第一层属性 m 和 n 不会被置空
      user: {
        ...this.state.user, // 手动复制一遍之前的所有属性
        name: "jack"
        // 复制后第二层属性 age 不被置空
      }
    });
  }
  render() {
    return (
      <div className="Son">
        儿子 n: {this.state.n}
        <button onClick={() => this.addN()}>n+1</button>
        m: {this.state.m}
        <button onClick={() => this.addM()}>m+1</button>
        <hr />
        <div>user.name: {this.state.user.name}</div>
        <div>user.age: {this.state.user.age}</div>
        <button onClick={() => this.changeUser()}>change user</button>
        <Grandson />
      </div>
    );
  }
}

代码示例

复杂 `state` 小结

类组件的 setState 会自动合并第一层属性
- 但是类组件不会合并第二层属性，举例
- 可以使用 Object.assign，举例
- 可以使用 ... 展开运算符，举例
- 更深层数据仍然不会自动合并，除非使用深拷贝
函数组件的 setX 则完全不会合并

对比Vue

Vue对数据做了属性劫持操作
- Vue2使用Object.defineProperty给所有嵌套属性添加getter和setter，初始开销大，非惰性监听，无法直接在初始化后，再添加或删除的属性，需要另外的API
- Vue3使用Proxy代理原对象，转换所有嵌套属性，可以在真正用到深层数据的时候再做响应式（惰性响应式），改善初始化性能和内存消耗
- const state = reactive({ count: 0 })
在 Vue3 中，状态都是默认深层响应式的。这意味着即使在更改深层次的对象或数组，你的改动也能被检测到。
只有代理对象是响应式的，更改原始对象不会触发更新，Vue仅使用你声明对象的代理版本

参考

9. `React` 事件绑定的各种写法 ⇧

注意大小写 onClick、onKeyPress

类组件事件绑定 ⇧

React 事件绑定<button onClick={this.addN}> n + 1 </button>
用户点击按钮，React会做什么
- a. (×)会执行 this.addN()
- b. (×)会执行 button.onClick
- c. (√)会执行 button.onClick.call(null, event)
- 其中 onClick 的 this === null
- 在浏览器中这里的 this 会被 window 补位
- 导致 <button onClick={this.addN}> n + 1 </button> 里的 this 指向 window
所以 React 事件绑定 不该使用 <button onClick={this.addN}> n + 1 </button> 会让this变window
参考 this 教程

对比四种写法

<button onClick={ () => this.addN() }> n + 1 </button> 传一个箭头函数包裹方法，返回函数（最稳妥的写法，没有任何问题）
- 因为箭头函数无法改变内部 this 指向
<button onClick={ this.addN }> n + 1 </button> 存在问题：这样会使 this.addN 方法里的 this 变成 window或undefiend（外部 this 仍是正常的）
- addN() {this.setState({n: this.state.n + 1}) }里面的this指向丢失，变为window
<button onClick={ this.addN.bind(this) }> n + 1 </button> 可以这样写，它返回一个绑定了当前this 的新函数，但较麻烦
给箭头函数取个名字，写成 <button onClick={ this._addN }> n + 1 </button> 然后添加实例上的方法 this._addN = () => { this.addN() }（在constructor中声明）
- 多了一个变量名，不够优雅

可合并写在constructor方法中，减少一个变量名

//...
constructor() {
super();
this.addN = () => {
this.setState( {n: this.state.n + 1} )
}
}
render() {
return (<button onClick={this.addN}> n + 1 </button>)
}

但这样写不如直接在原型上声明 addN 为箭头函数结构简洁清晰
React 会内部做判断处理，无论是否返回函数，都可以
- this.addN = () => {this.setState( {n: this.state.n + 1} )}
- this.addN = () => this.setState( {n: this.state.n + 1} )

类组件的事件绑定最终写法 ⇧

最终写法代码示例

class Son extends React.Component {
  addN = () => {
    this.setState( {n: this.state.n + 1 } )
  }
  // addN = () => this.setState({n: this.state.n + 1}) // 也可
  render() {
    return (<button onClick={this.addN}> n + 1 </button>)
  }
}

在class内部直接声明变量为箭头函数：addN = () => {} 相当于 constructor 中的 this.addN
使用时直接写 <button onClick={this.addN}> n + 1 </button>

两种addN写法的区别 ⇧

class Son extends React.Component {
  addN = () => {this.setState({n: this.state.n + 1})}
  // addN() {this.setState({n: this.state.n + 1})}
}

等价写法

class Son extends React.Component {
  // 等价写法一
  addN = () => this.setState( {n: this.state.n + 1 } ) // 语法糖
  constructor() {
    super()
    // ...
    this.addN = () => this.setState({n: this.state.n + 1})
  } // 两个写法完全等价

  // 等价写法二
  addN() {this.setState({n: this.state.n + 1})}
  addN = function() {this.setState({n: this.state.n + 1})}
  // 两个写法完全等价

  // 等价写法二 改变 this 使用时直接写this.addN会运行报错 Uncaught TypeError: Cannot read properties of undefined (reading 'setState')
}

等价写法一两种写法在实例对象上，等价写法二在原型上
等价写法二中addN的 this 变成 window；等价写法一中addN的 this 不会改变

小结 ⇧

等价写法一是实例对象本身的属性，这意味着每个 Son 组件都有自己独立的 addN，如果有两个Son，就有两个addN
等价写法二是对象的共有属性（即原型上的属性），这意味着所有 Son 组件共用一个 addN
实例上的方法，优先级高于原型上的类方法

代码证明：

class Person {
  constructor() {
    this.sayHi_instance1 = () => {}
    this.sayHi_instance2 = function() {}
  }
  sayHi_instance3 = () => {} // 实例化对象上的方法
  sayHi_instance4 = function() {} // 实例化对象上的方法

  sayHi_proto() {} // 原型上的方法 Person.prototype
}
const p = new Person()
console.dir(p)

为什么 this 会变/不会变

所有普通函数的this都是参数，由调用决定，所以可变
唯独箭头函数的this不变，因为箭头函数不接受this，由声明时的外部作用域this
React的特点：能不做的，我都不做
Vue的特点：能帮你做的，都帮你做了

结论

直接使用写法一的addN即可
或者使用函数组件，它完全不用this，以后的趋势也是优先采用函数组件
但维护老项目时，必须看懂类组件事件绑定的正确写法

函数组件事件绑定 ⇧

10. 复习 `this`，与两个面试题 ⇧

this的指向有哪几种情况，简要回答：大概分四种（4 + 1种后面可以补充） ⇧

严格模式下全局环境普通函数中 undefined
对象中函数，即对象的方法对象本身
用 call/apply/bind 显示绑定this指向
构造函数 new 绑定生成实例对象
箭头函数声明时作用域链上一层 this

要判断一个运行中的函数的this绑定，就需要找到这个函数的直接调用位置，并按顺序应用下面这四条规则来判断this的绑定对象 ⇧

由new调用？绑定到新创建的对象。
由call或者apply（或者bind）调用？绑定到指定的对象。
由上下文对象调用？绑定到那个上下文对象。
默认：在严格模式下绑定到undefined，否则绑定到全局对象。

箭头函数不适用this的四种标准规则，而是根据外层（函数或全局）作用域来决定this
this指向优先级：箭头函数 > new绑定 > 显示绑定 > 隐式绑定 > 默认绑定

详细说明this的指向 ⇧

全局环境下分为
- 两种宿主环境：
- 浏览器环境 globalThis 指向window对象
- node.js环境 globalThis 指向global对象
- 两种模式：
- 非严格模式
- 严格模式（ 模块环境 和 class类内部 都是严格模式）
全局环境下普通函数 隐式调用 中的this
- 非严格模式 fn this -> globalThis为window 或者 global
- 严格模式 fn this -> undefined
- 函数 调用时 由调用主体决定，谁调用，this就指向谁
- 全局环境下不写window 声明变量自动挂载到window下，即window调用方法
函数 显示调用 this
- fn.call(obj) this -> obj
- fn.apply(obj) this -> obj
- fn.bind(obj) this -> obj
构造函数中 this指向实例化对象instance = new Fn() this -> instance 实例对象
- class类内部严格模式但使用类必须实例化指向实例对象 this -> instance
箭头函数不会创建自己this 函数内部的this -> 自己作用域链的上一层 this
- 即取决于 声明时 该箭头函数作用域链的上一层 this
- 声明在全局环境中指向window/global
- 声明在对象方法中指向对象作用域的上一层 this
对象中的this （所有模式全局环境下）
- 注意必须按照 对象.方法() 的形式调用隐式绑定this为该对象
- 而不是重新声明变量，引用赋值为 对象.方法，再执行该变量
- obj.Fn 属性为普通函数内部 this -> obj
- obj.Fn 属性为箭头函数内部 this -> 对象外部的this
- 普通函数取决于 运行时 的 this指向
- 定时器回调会丢失 this 而指向全局
- 存在多层调用，就近原则：对象属性引用链只有一层或者说 最后一层 在调用位置中起作用
- 箭头函数保存下声明时的对象外部this指向
- 定时器回调会记录 this 仍指向声明时上一层作用域this
- 隐式丢失this指向
- 声明变量指向对象的方法时，会丢失this
- 传入普通函数作为参数时，会丢失this
  - 参数传递其实就是一种隐式赋值，传入函数时也会被隐式赋值
  - 异步方法通常需要传递回调函数，传普通函数，会丢失this指向
- 除非使用箭头函数作为参数
严谨的代码中会用call/apply/bind显示地指定this指向

this是什么？ ⇧

this是fn.call/apply/bind的第一个参数
调用fn()就是调用fn.call(this)
所有函数调用fn()都可以改写为fn.call/apply(undefined)的形式，可以显式地看出this
- 在 浏览器/Node.js （非严格模式或模块环境） 宿主环境下，函数调用中的this会被改成globalThis (分别指向window 和 global 对象)
对象方法调用obj.move()可以改写成obj.move.call(obj)
- 其中move只是对象的属性，键值，指向内存中一块存储函数的地址（此函数不属于对象）
- 另一个例子obj.child.say()可改写成obj.child.say.call(obj.child)
- 其它函数参数续写在后面
开启严格模式，在函数内部的首行写'use strict'，则this指向不会被更改，值为undefined

辨析题：为什么箭头函数不能用作构造函数 ⇧

没有自己的 this 上下文
不绑定 arguments
箭头函数不能用作构造器和 new一起使用会抛出错误
箭头函数没有prototype属性
用作构造函数直接报错

总结，设定在严格模式下 ⇧

`this` \ 运行时条件	全局环境	上下文对象`obj.fn`调用	显示调用`call/apply/bind`	构造函数`new`
普通函数`this`	`undefined`	`obj`	指定的`this`	指向实例对象
箭头函数`this`	`*globaThis`	`*globaThis`	`*globaThis`（忽略指定的`this`）	报错

箭头函数this为定义时确定，更加符合预期
- *globaThis 声明时外部作用域中this
普通函数this为运行时确定，会根据运行时改变

参考

第一题

var a = {
  name: "里面的name",
  sayName: function() {
    console.log(`this.name = ${this.name}`)
  }
}

var name = "外面的name"

function sayName() {
  var sss = a.sayName
  sss() // this.name
  a.sayName() // this.name
  ;(a.sayName)() // this.name
  ;(b = a.sayName)() // this.name
}

sayName()

必须使用转换代码来改写程序
- 将所有的函数调用改为 fn.call() 的形式

改写代码

改顺序

function sayName() {
var sss = a.sayName
sss() // this.name
a.sayName() // this.name
;(a.sayName)() // this.name
;(b = a.sayName)() // this.name
}
var a
var name
a = {
name: "里面的name",
sayName: function() {
console.log(`this.name = ${this.name}`)
}
}
name = "外面的name"
sayName()

改成 .call 的形式

function sayName() {
var sss = a.sayName
sss.call(window) // this.name
a.sayName.call(a) // this.name
;(a.sayName).call(a) // this.name
;(b = a.sayName).call(window) // this.name
}
var a
var name
a = {
name: "里面的name",
sayName: function() {
console.log(`this.name = ${this.name}`)
}
}
name = "外面的name"
sayName.call(window)

第二题

var length = 10
function fn() {
  console.log(this.length)
}

var obj = {
  length: 5,
  method: function(fn) {
    fn()
    arguments[0]()
  }
}
obj.method(fn, 1)

改写代码

var length
var obj
length = 10
obj = {
  length: 5,
  method: function(fn) {
    fn.call(window)
    // 错误 arguments[0].call(arguments[0])
    arguments[0].call(arguments) // arguments.length 即 [fn, 1].length
  }
}

function fn() {
  console.log(this.length)
}

// 错误 obj.method.call(obj.method, fn, 1) // arguments = [fn, 1]
obj.method.call(obj, fn, 1) // arguments = [fn, 1]

参考

11. 总结 ⇧

关于React的知识点

两种方式引入 React 和 ReactDOM
React.createElement('div' | 函数 | 类)
类组件、函数组件如何获取外部数据props
类组件、函数组件如何获取外部数据state
类组件如何绑定事件，this很麻烦，记忆正确写法
不想记忆this的写法，可以直接使用函数组件，没有this问题，一律用参数和变量
React特点：尽量使用JS本身语法特点，能不帮你做，就不做

其他知识点

Vue的特点：能帮你做的，都帮你做
this的复习

React V.S. Vue

相同点
- 都是对视图的封装
- React使用类和函数表示一个组件
- Vue通过构造选项构造一个组件（也可用compostion api）
- 通过编译，都提供了createElement的XML简写
- React提供JSX/TSX语法
- Vue提供模板语法（语法巨多）、装饰器类组件（实验或弃用）和 JSX/TSX 语法
不同点
- React是把HTML放在JS里写，即 HTML in JS
- Vue 将 JS 放在 HTML，即 JS in HTML

12. 课后习题：`React` 组件 ⇧

用 React 类组件写出一个 n+1 的 demo，要求：

n 一开始为 0
每次点击 +1，n 的值增加1
代码参考

代码链接

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

class App extends React.Component {
constructor() {
super();
this.state = { n: 0 };
}
add() {
this.setState({ n: this.state.n + 1 });
}
render() {
return (
  <div className="App">
    n: {this.state.n}
    <button onClick={() => this.add()}>+1</button>
  </div>
);
}
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

用 React 函数组件写出一个 n+1 的 demo，要求：

n 一开始为 0
每次点击 +1，n 的值增加1
代码参考

代码链接

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
const [n, setN] = React.useState(0)
return (
<div className="App">
  n: {n}
  <button onClick={()=>setN(n+1)}>+1</button>
</div>
);
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

`React`与`this`指向丢失的问题 ⇧

首先搭建一个环境

1	npx create-react-app hello-react

在index.js文件中编写一个基础代码

class App extends React.Component {
  constructor(props) {
    super(props)
  }

  handleClick(e) {
    console.log('click', this) // this 值为 undefined
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click Me
      </button>
    )
  }
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementByid('root')
)

handleClick中的this指向预期为 App 组件的实例
但实际指向 undefined，发生了this指向丢失

加断点来调试

class App extends React.Component {
  constructor(props) {
    super(props)
  }

  handleClick(e) {
    // debugger
    console.log('click', this) // this 值为 undefined
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click Me
      </button>
    )
  }

  // JSX => VDom => diff => render抽象 => renderDom
  // 模拟最终产物
  renderDom() {
    const btn = document.createElement('button')
    const btn = document.createTextNode('Click Me Dom')
    function createCallback(fn) {
      const context = undefined
      return () => fn.apply(context) // 忽略参数
    }
    btn.addEventListener('click', createCallback(this.handleClick))
    document.getElementById('root2').appendChild(btn)
    return
  }

}
// ...
const app = new App()
app.renderDom

绑定this指向的方法
- .call(app)
- app.handleClick
ReactDOM的 callCallback() 中调用 func.apply(context, funcArgs)
- context里的指向为空 null
btn.addEventListener('click', createCallback(this.handleClick))套了一层createCallback
- () => fn.apply(context)

破解之道1：在构造函数上bind

用bind改写constructor中实例的方法

实例上的方法，优先级高于原型上的类方法，将原型上的类方法绑定实例对象后返回新的函数

class App extends React.Component {
constructor(props) {
super(props)
this.handleClick = this.handleClick.bind(this) // 实例方法，优先级高于原型上的类方法，将原型上的类方法绑定实例对象后返回新的函数
}
// 原型上的类方法
handleClick(e) {
// debugger
console.log('click', this) // this 值为 undefined
}

render() {
return (
  <button onClick={this.handleClick}>
    Click Me
  </button>
)
}
//...
}

破解之道2：在render方法上bind

在使用handleClick时用bind绑定this

render方法的作用域也是指向实例对象的

//...
render() {
return (
<button onClick={this.handleClick.bind(this)}>Click Me</button>
)
}

// 模拟最终产物
renderDom() {
const btn = document.createElement('button')
const btn = document.createTextNode('Click Me Dom')
function createCallback(fn) {
const context = undefined
return () => fn.apply(context) // 忽略参数
}
btn.addEventListener('click', createCallback(this.handleClick.bind(this)))
document.getElementById('root2').appendChild(btn)
return
}

破解之道3：handle函数使用箭头函数

利用词法作用域，箭头函数

// ...
// 实例上的方法
handleClick = (e) => {
console.log('click', this) // 外层的词法作用域，即指向app实例对象
}

render() {
return (
  <button onClick={this.handleClick}>
    Click Me
  </button>
)
}

// 模拟最终产物
renderDom() {
const btn = document.createElement('button')
const btn = document.createTextNode('Click Me Dom')
function createCallback(fn) {
const context = undefined
return () => fn.apply(context) // 忽略参数
}
btn.addEventListener('click', createCallback(this.handleClick))
document.getElementById('root2').appendChild(btn)
return
}

破解之道4：在render方法中绑定事件函数使用箭头函数

// ...
// 实例上的方法
  handleClick(e) {
    console.log('click', this) // 外层的词法作用域，即指向app实例对象
  }

  render() {
    return (
      <button onClick={() => this.handleClick()}>
        Click Me
      </button>
    )
  }

// 模拟最终产物
renderDom() {
  const btn = document.createElement('button')
  const btn = document.createTextNode('Click Me Dom')
  function createCallback(fn) {
    const context = undefined
    return () => fn.apply(context) // 忽略参数
  }
  btn.addEventListener('click', createCallback(() => this.handleClick()))
  document.getElementById('root2').appendChild(btn)
  return
}

都可以
- <button onClick={() => this.handleClick()}>
- <button onClick={() => {this.handleClick()}}>

React的this丢失问题，丢失的原因和解决之道涉及了this指向

·未完待续·

参考文章 ⇧

React 组件.pdf

【React非全解 0】React起手式

xmasuhai@163.org (Joel Xu) — Sat, 24 Sep 2022 20:20:15 +0800

React起手式

大纲链接 §

[toc]

如何入门 React

写一个 Hello World，写一个 +1，写一个 ToDo
把文档过一遍
- 组件
- 父子组件通信
- 组件生命周期使用Hooks API模拟
- Context API 怎么用
- Hooks API 怎么用
- useState
- useEffect
- CSS in JS
- styled-component 怎么写，有什么优缺点
- css modules 怎么写，有什么优缺点
- React Router 怎么用
- Redux 怎么用
- action 怎么触发（用什么 API，什么是 payload，具体代码是什么）
- reducer 怎么用 state 和 action 得到新的 state（要不要深拷贝，代码是什么）
- state 变化后页面怎么更新（Provider 组件的使用）
- 如何从 state 中得到某个数据（Connect 函数的使用）

开源项目实践

模仿Win11 系统有很多小组件，比如 win11 desktop by blueedge
- 计算器
- 画图
- 记事本
- 扫雷
造轮子，搭建管理工具
写一个极简的记账App

1. 如何引入 `React` ⇧

有两种方式

CDN
import

从 `CDN` 引入 `React` ⇧

React相较于Vue可直接中CDN引入链接而言，更加复杂
从 CDN 引入（顺序不可颠倒），这里是一个codesandbox例子
- 引入 React：https://.../react.x.min.js
- 引入 ReactDOM：https://.../react-dom.x.min.js
不在项目中使用 CDN 引入方式
- babel转义耗时与代码量成正比，不适合在项目中使用
- 无法较方便地做版本处理，需要使用 import 的方式

cjs 和 umd 的区别

搜索 BootCDN ，查看 React 的版本分为 cjs 和 umd
cjs 全称 CommonJS，是 Node.js 支持的模块规范
umd 是统一模块定义，兼容各种模块规范（包含浏览器）
理论上优先使用 umd，同时支持 Node.js 和浏览器
最新的模块规范 ESM（ECMA Script Modules）是使用 import 和 export 关键字，是官方标准的规范，推荐使用
模块化方面，官方规范优于社区实现，推荐优先使用
- cjs 和 umd 是社区实现的规范，是一种事实规范
- js 生态中不一定以官方规范为准，还要考虑社区的实现，结合主流流行的解决方案选择技术

工程化地引入 `React` ，通过`webpack`或`Vite`等打包工具 ⇧

环境搭建

Node 16+
npm 8+ 推荐 pnpm 7+（或 yarn3+）
IDE使用VSCode 或 webStorm
终端推荐 cmder（for win）或 item2（for macOS），或者基本使用（Git Bash）
版本管理 git + github
JS 版本 ES6+，CSS 病本CSS3+
- typescript 版本 4.8+，sass版本1.55+

安装

1
2

pnpm add react react-dom
# yarn add react react-dom

引入 import...from...

1
2

import React from 'react'
import ReactDOM from 'react-dom'

注意大小写，约定俗成，保持一致
- 模块变量名 React 和 ReactDOM 注意大写的字母
- 仓库名 react 和 react-dom 小写

其他

除了 webpack 和 Vite 以外，rollup、parcel也支持以上写法，作用是将浏览器不支持的js转移成支持的 js版本

新项目使用 Vite，老项目使用 create-react-app 或 webpack 或 rollup

使用官方推荐的脚手架 `create-react-app` ⇧

安装

`1`	`pnpm add -g create-react-app`

使用 create-react-app

# 进入项目目录 创建应用
create-react-app react-demo-0

# 或者创建目录
# mkdir react-demo-1
# cd react-demo-1
# create-react-app .

自动安装相关依赖
安装过程中，无须关注黄色警告，只要没有报错就是安装成功了

运行应用

1
2

cd react-demo-0
pnpm start

自动打开网页，访问 localhost:3000

将 IDE 安装目录的bin文件添加到系统环境变量，以win11为例

Win + R 打开运行，输入 sysdm.cpl，回车，新建目录即可

启动 VSCode 或 WebStorm

1
2

# 打开当前目录
webstorm64.exe .

方便使用，在~/.bashrc中设置别名

`1`	`alias ws="webstorm64"`

在命令行中运行 source ~/.bashrc 即可生效

使用 VSCode 或 WebStorm 打开项目

# 打开目录 win
start .

# 打开目录 mac
open .

# 直接用 VSCode 打开
code .

# 直接用 WebStorm 打开
ws .

参考

也可以自己封装脚手架，或使用其他开源的 React 脚手架

create-react-library 组件库
react-starter-kit 模板脚手架类似 vitesse

缺点：构建太慢

解决：使用 Vite

使用 `Vite` 搭建 ⇧ §

使用 PNPM 搭建一个 Vite 的 React 项目

`1`	`pnpm create vite react-demo-1 --template react-ts`

进入项目安装依赖运行项目

1
2
3

cd react-demo-1
pnpm install
pnpm run dev

简化运行命令设置别名 pd for pnpm run dev

{
  "name": "react-demo-1",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "pd": "pnpm run dev",
    "build": "tsc && vite build",
    "pb": "pnpm run build",
    "preview": "vite preview",
    "pv": "pnpm run preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "18.0.21",
    "@types/react-dom": "18.0.6",
    "@vitejs/plugin-react": "2.1.0",
    "typescript": "4.8.3",
    "vite": "3.1.3"
  }
}

参考

搭建第一个 Vite 项目

最小化配置与新旧版本的区别写法 ⇧

删除多余文件如自动生成的 index.css、App.css、App.test.js、setupTest.js、serviceWorker.js、logo.svg、App.tsx

查看入口文件 main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
// import App from './App' // 删除
// import './index.css' // 删除

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<div>Hi</div>)

// ReactDOM.render(<div>Hi</div>, document.getElementById('root'))

先不使用组件 App.tsx

挂载根组件写法
- React17-的挂载根组件写法：ReactDOM.render(<App />, rootElement);
- React18+的挂载根组件写法：ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<div>Hi</div>)
ReactDOM的引入路径
- React17-的引入路径：import ReactDOM from 'react-dom';
- React18+的引入路径：import ReactDOM from 'react-dom/client';
最小化实现应用启动，稍后介绍组件化

参考

2. `React` 初体验 ⇧

2.1 用`React` 实现 `+1` ⇧

现在codesandbox中尝试，从最原始的 HTML开始，展示一个红色的 n

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="src/index.css" />
  </head>
  <body>
    <div id="root"></div>
    <script src="https://cdn.bootcss.com/react/16.10.2/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.10.2/umd/react-dom.development.js"></script>
    <script src="src/index.js"></script>
  </body>
</html>

index.js

/**
 *
console.log(window.React);
console.log(window.React.createElement);
console.log(window.ReactDOM);
console.log(window.ReactDOM.render);
 *
 * */

const React = window.React;
const ReactDOM = window.ReactDOM;
const root = document.getElementById("root");

let n = 0;
const App = React.createElement("div", { className: "red" }, [
  n,
  React.createElement(
    "button",
    {
      onClick: () => {
        n += 1;
        console.log(n); //这一句是精髓
        ReactDOM.render(App, root); // 为什么还是不能重新渲染
      }
    },
    "+1"
  )
]);
// React 17-
ReactDOM.render(App, root);

获取 #root 节点 const root = document.getElementById("root");
使用 const App = React.createElement(tag, {}, Node) 创建 React 元素
使用 ReactDOM.render(App, root) 将 React 元素渲染页面

查看失败的例子

React不会根据用户操作，自动刷新视图，需要执行去刷新
失败的原因，靠JS的基础知识来判断
- 失败是因为 const App = React.create...，赋值的右侧代码只执行一次
如何让它重新执行，以获取n的最新值：
- 外层包装一层函数，使用函数来返回结果，每次执行，就会得到新的结果，即 工厂模式
- const App = () => React.createElement()
- ReactDOM.render(App(), root); 渲染的是执行工厂函数返回的 React 元素
- 再次执行 ReactDOM.render(App(), root);

函数执行时，会重新去读取一次 n 的值，所以 n 更新了，页面也会更新

即 函数会获取变量的最新值

// ...
let n = 0;
const App = () => React.createElement("div", { className: "red" }, [
n,
React.createElement(
"button",
{
onClick: () => {
n += 1;
console.log(n);
ReactDOM.render(App(), root);
}
},
"+1"
)
]);
// React 17-
ReactDOM.render(App(), root);

通常称
- React.createElement() 返回结果为 React 元素
- const App = () => React.createElement() 为 React 函数组件

`JS`基础复习：打印6个6面试题 ⇧

以一个 "打印6个6" 的经典例子，来说明函数可以获取最新值

let i // 外部作用域
for(i = 0; i < 6; i++) {
  setTimeout(() => {
    console.log(i)
  }, 1000)
}

代码的结果是一秒钟后打印 6 个 6，因为函数执行时遇到外部变量会读取其最新值
注意 setTimeout(()=>void, 0) 并不代表0s后立即执行回调函数
setTimeout 的作用是在给定时间倒计时完成后，将回调放入任务 Task 队列中，浏览器的 JS 引擎处理事件循环的一种机制
- ① 先将调用栈中同步代码执行完后
- ② 调用微任务队列中所有的函数来执行
- ③ 再去取出一个任务 Task 队列首部的函数来执行
- 以后一直按照 ① -> ② -> ③ 再回到 ① 的顺序执行代码，直到调用栈被全部清空
在循环语句中，有6次同步执行setTimout定时器，即有6次将回调函数推入任务队列
- 期间外部作用域中变量i的值，执行同步代码已累加到6，而队列中的函数由于未执行，没有在此时 访问变量i
- 执行完同步代码，每次取出一个任务队列中的回调执行，打印i，此时i的值为6
如何按预期打印1-5？
- 使用 函数作用域 立即执行函数立即传入参数i
- for(i=0; i<6; i++) { ( (j)=>void )(i) }
  - 实参i，形参j
- 实参和形参可同名
  - for(i=0; i<6; i++) { ( (i)=>void )(i) }
- 使用 块级作用域 循环每次在作用域内部用 let 声明变量（创建一个新的块级作用域中的独立变量），不受外部作用域影响，缓存每次循环的i值，而不是被销毁
- for(let i = 0; i < 5; i++) {/* 将循环体代码块中的 let 放到循环表达式中 */}（这是ES6语法糖）
- 而外层作用域中无法访问到i
所以最初的代码失败可以通过将APP变为函数来解决

题外话

React会促使我们思考函数的本质

3. 函数的本质——延迟执行逻辑 ⇧

对比普通代码与函数

普通代码 let b = 1 + a
函数（不讨论参数）
- let f = () => 1 + a
- let b = f()

可以看出

普通代码运行时立即求值，读取变量的 a 的当前值
函数会等调用时，在访问变量求值，即 延迟求值
- 并且求值时才会读取 a 的 最新值

对比 React 元素和 React 函数组件

const App1 = React.createElement('div', null, n) 是一个 React 元素
const App2 = () => React.createElement('div', null, n) 是一个 React 函数组件

启示

元素 App1 会立即获取n的值
函数 App2 是 延迟执行 的代码，会在 被调用时 才获取
- 当n变化了，再次调用 App2() 就可以得到最新的数据，从而渲染为最新的视图
注意是 代码执行时机，区别于同步和异步
- 同步和异步关注的是得到结果的时机

4. 小结 ⇧

目前已了解了

React 元素
- React.createElement() 的返回值 element 可以代表一个 div
- 但 element 并不是真正的 div，不能直接插入到页面中（DOM对象）
- 一般称 element 为 虚拟DOM对象
- 包含标签名、属性名和子节点
() => React元素，即 React 函数组件
- 返回 element 的函数，也可以代表一个 div
- 这个函数可以 多次执行，每次得到最新的虚拟 div
- React 会对比两个虚拟 div，找出不同，局部更新视图，而不是整体低效地替换

使用调式来验证 React 局部更新视图

运行项目，查看浏览器控制台，当点击 +1 时，并没有替换掉 button 只是替换了 n 的值
找出不同部分的算法称为 DOM Diff 算法

可是至此 React 的代码很丑

const React = window.React;
const ReactDOM = window.ReactDOM;

let n = 0;
const App = () =>
  React.createElement("div", null, [
    n,
    React.createElement(
      "button",
      {
        onClick: () => {
          n += 1;
          console.log(n);
          ReactDOM.render(App(), document.querySelector("#app"));
        }
      },
      "+1"
    )
  ]);

ReactDOM.render(App(), document.querySelector("#app"));

比 Vue 的 SFC 写法复杂多了

可用 JSX 经过处理后可实现：

import React from "react";
import ReactDOM from "react-dom";

let n = 0;
const App = () => (
<div>
{n}
<button onClick={add}>+1</button>
</div>
);

const render = () => ReactDOM.render(
<App />,
document.getElementById("root")
);

const add = () => {
n += 1;
render();
};

render();

5. `JSX` 初体验 ⇧

JSX中的 X 表示扩展，所以 JSX 就是 JS 的扩展版

对比 Vue 中有 vue-loader
- .vue 文件里写 <template><script><style>
- 通过 vue-loader 变成一个构造选项
React 有 JSX
- 把 <button onClick="add">+1</button>
- 变成 React.createElement('button', {onClick:...}, '+1')
- 这其中用到了 编译原理
- 无需使用已废弃的 jsx-loader，它已被 babel-loader 取代了
- 而 babel-loader 被 webpack 内置了
- 而 vue-loader 未被 webpack 内置，所以相对而言配置 React 更简单
- Vue 的作者和 webpack 关系不够强，所以没有得到 webpack 的支持
Vue 也可以通过插件来支持 JSX

使用 `JSX` ⇧

方法一：CDN

引入 babel.min.js
把 <script> 改成 <script type="text/babel">
babel会自动进行转译：
- 引入 <script src="babel.js"></script>
- 浏览器无法识别 HTML 中 <script type="text/babel"> 内容，不执行脚本
- 而 babel.js 会获取到 <script type="text/babel">中的代码，将其转译后得到新的字符串（即转移后的JS代码字符串）
- babel.js 将这段字符串放到一个新的 <script> 标签中
- babel.js 将这个 <script> 标签替换掉之前的 <script type="text/babel"> 删除 type="text/babel"
- 即转译为浏览器可识别的JS脚本代码，之后执行
这种方式并不支持 src，请看实例
忠告：
- 永远不要在生产环境中使用方法一，因为效率太低，不适合工程化
- 它需要额外下载一个 babel.min.js
- 它还需要在浏览器端把JSX转译为JS
更加工程化的做法是在 build时转译，见之后的方法

方法二：webpack + babel-loader

不适合新手，跳过，直接用方法三

方法三：create-react-app

与 @vue/cli 用法相似，使用命令行
- 全局安装 pnpm add -g create-react-app
- 初始化目录 create-react-app <Project-Name>
- 进入目录 cd <Project-Name>
使用最小知识原则
- src 目录只留下两个文件
- 将除 public/index.html 外的多余文件删掉
启动项目
- 运行 pnpm start
声明一个函数组件 App.jsx
- const App = () => (<div>Hi</div>)
- export default App
在 index.js 中引入 import App from './App'
- ReactDOM.render(<App />, document.getElementById('root'))
create-react-app会把 .js 文件默认看做 .jsx 文件
查看 App 是否默认使用 jsx 语法
- 因为 webpack让JS默认走 babel-loader
JSX 中的 <App /> 就相当于 React.createElement()
- 必须引入 import React from 'react' 防止报错

方法四：Vite + @vitejs/plugin-react

更快速地启动项目，使用esbuild 0打包运行项目
详见使用 Vite 搭建 ⇧

使用 `JSX` 的注意事项 ⇧

注意 className 属性
- <div className="red">n</div>被转译为
- React.createElement('div', {className: 'red'}, 'n')
- 而不能直接使用 class 属性，因为在JS中是使用 className来获取或设置指定元素的 class 属性的值
- 见 MDN Element.className
插入变量
- 标签中的所有JS代码都需要用 {} 括起来
- 如果使用变量n，就用{}将n 包起来，如 {n}
- 如果使用对象，就用{}将对象包起来，如 { {name: 'xxx'} }
使用函数 <button onClick={ () => {} }></button>
习惯 return 后面加上 {}，即 return ()
- 不加相当于 return undefined 报错

现在 Vue 和 React 势均力敌

都可以写 HTML
- Vue 写在 .vue 文件的 <template> 里
- React 把 HTML 混在 JS/JSX 文件里

6. 如何使用条件判断与循环控制 ⇧

6.1 条件判断 ⇧

在 Vue 中

<template>
  <div>
    <div v-if="n%2===0">n是偶数</div>
    <span v-else>n是奇数</span>
  </div>
</template>

JSX 的条件判断，React中

JSX将标签也当做类似对象的东西使用，直接交给内置的babel-loader去转译
- 标签中的JS代码必须加花括号，否则转译为字符串

React中，一切皆JS

const Component = () => {
return (
n%2 === 0
  ? <div>n是偶数</div>
  : <span>n是奇数</span>
)
}

// 如果需要外面的 div，可以写成
const Component2 = () => {
return (
<div>
  {
    n%2 === 0
      ? <div>n是偶数</div>
      : <span>n是奇数</span>
  }
</div>
)
}

// 也可以声明变量
const Component3 = () => {
const content = (
<div>{
  n%2 === 0
    ? <div>n是偶数</div>
    : <span>n是奇数</span>
}</div>
)
return content
}

// 单独提出三元表达式
const Component4 = () => {
const inner = n%2 === 0
? <div>n是偶数</div>
: <span>n是奇数</span>
const content = (
<div>
  { inner }
</div>
)
return content
}

// 直接使用 JS 的条件语句
const Component5 = () => {
let inner
if(n%2 === 0) {
inner = <div>n是偶数</div>
} else {
inner = <span>n是奇数</span>
}
const content = (
<div>
  { inner }
</div>
)
return content
}

// 使用多行注释
const Component6 = () => {
return (
<div>Hi
{/*
  {
    n%2 === 0
      ? <div>n是偶数</div>
      : <span>n是奇数</span>
  }
*/}
</div>
)
}

React 中通常使用三元表达式来处理条件判断
- 可以提取出外部的 div，在里面写逻辑，返回虚拟节点
- 可以声明变量，来复用虚拟节点
- 可以单独提取出三元表达式的逻辑，赋值给变量来复用
- 甚至直接使用 JS 的if条件语句
使用 {/* {...} */} 来表示多行注释，将花括号中的代码注释起来

结论

在 Vue 的 SFC 中，只能 Vue 提供的语法写条件判断
在 React 的 JSX 中则更加灵活，只是在写JS而已
在 Vue 中也可以使用 JSX，配合 Vue 的指令、响应式方法也可以做到像 React 那样灵活

6.2 循环控制 ⇧

在 Vue 里可以使用v-for遍历数组和对象

<template>
  <div>
    <div v-for="(item, index) in numbers" :key="item.id">
      下标 {{index}}，值为 {{n}} 
    </div>
  </div>
</template>

在 React 中，通过 props 参数可以遍历数组和对象

const Component = (props) => {
  return props.numbers.map( (item, index) => {
    return (<div key={item.id}>下标 {index} 值为 {item}</div>)
  })
}

// 如果需要外面的 div，可写成
const Component = (props) => {
  return (
    <div>
      {
        props.numbers.map( (item, index) => {
          return (
            <div key={item.id}>下标 {index} 值为 {n}</div>
          )
        })
      }
    </div>
  )
}

React 中主要使用 map 来处理循环逻辑，遍历数组数据

甚至可以直接使用for循环，但不如map来得简洁

import React from 'react'
const Component = (props) => {
const array = []
for(let i = 0; i < props.numbers.length; i++) {
array.push(
<div key={i}>
下标 {i} 值为 {props.numbers[i]}
</div>
)
}
return (<div>{array}</div>)
}

// 使用组件
const App = () => {
return (
<div>
App 组件
<Component number={ [1, 2, 3] } />
</div>
)
}

Vue SFC 和 React 的区别凸显

Vue SFC封装的v-* 更适合新人
React 更适合JS基础查实的开发者
两个框架提供的封装程度不同而已，思想差别并不是很大

7. `React` 起手总结 ⇧

目前已经学了

引入 React 和 ReactDOM
- 工程化安装引入 import React from 'react'
React.createEelement
- 创建虚拟 DOM 对象
- 函数的作用：多次创建虚拟 DOM 对象
- 初步了解DOM Diff
JSX
- 将 XML 转译为 React.createElement
- 使用 {} 插入 JS 代码
- create-react-app 默认将JS 当做 JSX 处理
- 条件判断、循环要用原生JS语法实现

8. 测试 `React` 初体验 ⇧

写出功能，要求：点+1后，数字会+1

import React from "react";
import ReactDOM from "react-dom";

let n = 0;
const root = document.getElementById("root")
const button = <button onClick={add}> +1 </button>

const App = () => (
  <div>
    {n}
    {button}
  </div>
);

const render = () => ReactDOM.render(<App />, root);

const add = () => {
  n += 1;
  render();
};

render();

关于 React 和 ReactDOM，必须同时使用这两个库才能在浏览器上开发 React 应用
关于 const x = React.createElement('div', null, 'hi')，x 是一个 React 元素，它代表一个 div，它是一个虚拟 DOM 对象
return 后面有括号()，JS表达式用 {} 括起

假设页面中已经有一个 id 为 root 的 div，我希望把 <h1>Hello, world!</h1> 展示在页面里，代码如下

________A________(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

请问 A 出应该填写什么？答案为 15 个字符：ReactDOM.render

代码

function ComponentA(){
    return
      <div>hi</div>
}

请问 ComponentA() 的返回值是：
- undefined
- 一个 React 元素，对应一个 div

代码

function ComponentA(props){
    return(
        <div style=_______B________>hi</div>
    )
}

function App(){
    return (
        <div>
            <ComponentA width={100}/>
        </div>
    )
}

需求是让 ComponentA 的 div 的宽度与 props.width 一致，请问 _____B______ 处应该怎么填？
代码运行处：https://codesandbox.io/s/01z20q1p8w
答：{{width:`${props.width}px`}} 参考：https://codesandbox.io/s/lively-tdd-5mr7iq

代码

function ComponentA(props){
    const {children, ...rest} = props
    return(
        <div>
            <div> A 组件</div>
            <ComponentB ______C______/>
        </div>
    )
}

function ComponentB(props){
    console.log(props)  // 注意这里
    return(
        <div>
            <div> B 组件</div>
        </div>
    )
}

function App(){
    return (
        <div>
            <ComponentA width={100} height={100} other={404}>
              A
            </ComponentA>
        </div>
    )
}

需求是让 ComponentA 把自己接收到的所有属性都传递给 ComponentB，请问 _____C______ 处应该怎么填？
也就是说代码中的 console.log(props) 必须只打印出 {width: 100, height: 100, other: 404}
代码运行处：https://codesandbox.io/s/z6q431v44l
选项
- props
- rest
- ...props
- ...rest
- {...props}
- {...rest}
答案：https://codesandbox.io/s/cranky-cerf-8jvx1v

代码

function log(x) {
  console.log(x);
}

function App() {
  return (
    <div>
      <button onClick={____1____}>1</button>
      <button onClick={____2____}>2</button>
    </div>
  );
}

需求是点击 button 1 就调用 log(1)，点击 button 2 就调用 log(2)，请问 _____1_____ 处应该怎么填？（只填1处不填2处）
代码运行处：https://codesandbox.io/s/qqkn530q4w
选项
- log(1)
- ()=>log(1)

下面代码的输出结果是什么？（请用大脑推断，不要借助控制台来运行，下同）

1
2
3

Promise.reject('error')
    .then( ()=>{console.log('success1')}, ()=>{console.log('error1')} )
    .then( ()=>{console.log('success2')}, ()=>{console.log('error2')} )

选项
- 先输出 ‘error1’ 再输出 ‘error2’
- 先输出 ‘error1’ 再输出 ‘success2’
- 先输出 ‘success1’ 再输出 ‘success2’
- 先输出 ‘success1’ 再输出 ‘error2’

下面代码的输出结果是什么？

function getSomething(){
    setTimeout(function(){
        return 'hello'
    })
}

let something = getSomething()
console.log(something)

选项
- ‘hello’
- timer 的 id
- undefined

下面代码的输出结果是什么？

let _name = 'MyName'
let obj = {}
Object.defineProperty(obj, 'name', {
    get(){
        return _name
    },
    set(value){
        _name = value
    }
})

obj.name = 'NewName'
console.log(_name)

选项
- ‘MyName’
- ‘NewName’
- undefined

·未完待续·

参考文章 ⇧

【项目多人共享博客】0.1 轮子项目中写了一个Vite的插件，实现了处理自定义命名标签的功能

xmasuhai@163.org (Joel Xu) — Wed, 21 Sep 2022 08:26:08 +0800

轮子项目中写了一个Vite的插件，实现了处理自定义命名标签的功能

大纲链接 §

[toc]

插件需求

自定义块转换来转换 SFC 中的 <demo>常规用法</demo>
vite 在遇到 vue 文件的时候如何处理自定义块
封装插件方法，使用时传入需要转换的标签名 addSrcFromCustomBlock('demo')

创建 `plugins/addSrcFromCustomBlock.ts` ⇧

import {baseParse, ElementNode} from '@vue/compiler-core';
import fs from 'fs';

// 自定义块转换
// 可以告诉 vite 在遇到 vue 文件的时候如何处理自定义块 <example>
// 获取组件源码 Component.__sourceCode
// 获取组件标题 Component.__sourceCodeTitle 等价于 code
export function addSrcFromCustomBlock(customBlockName: string) {
  const regexp = new RegExp(`vue&type=${customBlockName}`);
  return {
    name: 'vueCustomBlockTransforms',
    transform: (code: string, id: string) => {
      if (!regexp.test(id)) {
        return;
      }
      const path = id
        .replace(`?vue&type=${customBlockName}&index=0&lang.${customBlockName}`,
          '');
      const fileString = fs.readFileSync(path).toString();
      const parsed = baseParse(fileString).children.find((n) => (n as ElementNode).tag === 'demo');
      const scriptTag = baseParse(fileString).children.find(n => (n as ElementNode).tag === 'script');
      // demo 标题
      const title = code; // @ts-ignore // const title = parsed.children[0].content;
      // 去掉demo标签和纯script后需要显示的代码主体
      const main = fileString.split(parsed.loc.source).join('').split(scriptTag.loc.source).join('').trim();

      return `export default function (Component) {
        Component.__sourceCode = ${JSON.stringify(main)}
        Component.__sourceCodeTitle = ${JSON.stringify(title)}
      }`.trim();
    },
  };
}

核心方法是 transform(code: string, id: string) {}

引入到 `vite.config.ts`

// vueCustomBlockTransforms
import {addSrcFromCustomBlock} from './plugins/addSrcFromCustomBlock';

export const basicConfig = defineConfig({
  plugins: [
    addSrcFromCustomBlock('demo')
  ],
});

`vite` 插件 `rollup` 文档的参数命名误导 `id`

处理自定义标签<demo></demo>
vite 1.x 迁移自定义块转换
transform(code, id)中的id其实所解析到的文件的 url
使用正则匹配/vue&type=demo/.test(id)
去除多余的查询参数得到该文件路径
- const path = id.replace(`?vue&type=demo&index=0&lang.demo`,'');
按路径读取文件内容const fileString = fs.readFileSync(path).toString();
找出<demo></demo>标签节点，并且得到文本
- const parsed = baseParse(fileString).children.find(n => n.tag === 'demo');
- const title = parsed.children[0].content;
得到代码主体const main = fileString.split(parsed.loc.source).join('').trim();
给组件附加属性
- Component.__sourceCode = ${JSON.stringify(main)}
- Component.__sourceCodeTitle = ${JSON.stringify(title)}
在模板字符串中返回方法
- return `export default function (Component) { Component.__sourceCode = ${JSON.stringify(main)} Component.__sourceCodeTitle = ${JSON.stringify(title)} }`.trim();

如何解决

TLDR 如果不想通读文档的话，只能在开发过程中使用console.log来调试

·未完待续·

参考文章

作者： Joel
文章链接：
版权声明
非自由转载-非商用-非衍生-保持署名

（前端部分）在项目中使用 JWT 身份认证鉴权

xmasuhai@163.org (Joel Xu) — Sun, 04 Sep 2022 09:32:28 +0800

`JWT` 身份认证鉴权

大纲链接 §

[toc]

1. 使用JWT鉴权 ⇧

了解Session认证的局限性以及JWT的概念 ⇧
了解JWT的工作原理 ⇧
了解JWT的三个组成部分以及各自代表的含义 ⇧
了解JWT的使用方式 ⇧

2. 项目中的实践 `axios`中应用`JWT` 身份认证 ⇧

import axios, {AxiosRequestConfig, Method} from 'axios';
import {message} from 'ant-design-vue';

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.baseURL = 'https://blog-server.hunger-valley.com';

const errorMsg = (msg: string) => {
  message.error(msg);
};

export default function request(url: string, type: Method = 'GET', data = {}) {
  return new Promise((resolve, reject) => {
    // 配置axios选项参数
    const option: AxiosRequestConfig = {
      url,
      method: type
    };

    // 配置数据
    type.toUpperCase() === 'GET'
      ? option.params = data // 查询参数方式 传递数据
      : option.data = data; // 其他请求方法 提交数据

    // 携带 localStorage中存储的 JWT
    if (localStorage.token) {
      axios.defaults.headers.common['Authorization'] = localStorage.token;
    }

    // 发起请求
    axios(option)
      .then(res => {...})
      .catch(err => {...});
  });
}

在之后接口封装的 API中，删除 localStorage.token

·未完待续·

参考文章 ⇧

Axios拦截器接口封装

xmasuhai@163.org (Joel Xu) — Sat, 03 Sep 2022 09:31:52 +0800

`axios` 拦截器接口封装

大纲链接 §

[toc]

1. `axios` 接口封装概述 ⇧

安装略，引入`axios` ⇧

import axios from 'axios'，后代码中略

处理加载页面效果 ⇧

在请求拦截器和响应式拦截器中根据记录的 正在发起的请求数来处理
请求拦截器 axios.interceptors.request.use()
响应式拦截器 axios.interceptors.response.use()

二次封装`axios`的目的 ⇧

由于业务根据不同的功能模块，划分为不同的 url 前缀，所以需要二次封装 axios
根据功能模块配置不同的 axios 配置

主动取消请求的场景 ⇧

搜索框需要防止用户输入每次一变化，就向服务端发送一次请求
用户输入过快前端用 debounce（如延时 200ms 发请求)，连续输入间隔小于 200ms，之前的输入都不会发请求
而当后端接口很慢（如超 1s ）之前的请求没有响应前，也有可能发出去多个请求
先后两次请求 A -> B，B 响应后发而先至，前面请求响应结果，覆盖后面请求响应结果的情况
除了做 debounce，后发请求时，之前请求未响应，可以把前面的请求取消

全局配置 `axios` ⇧

自定义请求头 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
将配置和调用解耦，将一些相关配置配置成常量后在引入使用
- 创建env.ts设置并导出配置常量BASE_URL和TIME_OUT
- 基本请求公共路径 axios.defaults.baseURL = BASE_URL;
- 超时时间 axios.defaults.timeout = TIME_OUT;
或者使用环境配置文件.env.*
- Vite 在一个特殊的 import.meta.env 对象上暴露环境变量
- Vue-CLI 是基于webpack，它是在 process.env 上挂载的
- 比如 .env.development 设置 VITE_APP_BASE_API='https://blog-server.hunger-valley.com'
- 使用时，在js源代码文件中通过 import.meta.env.VITE_xxx来访问，类似vue/cli中的process.env.VUE_APP_BASE_URL

也可以通过创建实例，在创建时配置属性，以配置公共路径为例：

调用 axios.create 方法创建实例和对该实例的拦截器 interceptors 方法进行重写，在此基础上添加取消重复请求的功能
const http = axios.create({ baseURL: import.meta.env.VITE_APP_BASE_URL, });
然后使用实例
- http.interceptors.request.use(/* ... */)
- http.interceptors.request.use(/* ... */)
- export default http;

参考

vue/cli 中axios封装、配置不同开发环境变量

`axios` 接口封装 ⇧

axios 取消重复请求的封装
axios 响应错误后重试请求的封装
token 失效返回登录页面的封装

参考

2. `axios`请求拦截器 ⇧

axios.interceptors.request.use(
  function (config) { // 在发送请求之前处理的逻辑
    return config;
  },
  function (error) { // 对请求错误处理的逻辑
    return Promise.reject(error);
  }
);

// 简记
axios.interceptors.request.use((config) => config, (err) => Promise.reject(err))

3. `axios`响应拦截器 ⇧

axios.interceptors.response.use(
  function (response) {
    // 2xx 范围内的状态码都会触发该逻辑。
    // 对响应数据处理的逻辑
    const { data } = response;
    return data;
  },
  function (error) {
    // 超出 2xx 范围的状态码都会触发该逻辑。
    // 对响应错误处理的逻辑
    return Promise.reject(error);
  }
);

// 简记
axios.interceptors.response.use((res) => res, (err) => Promise.reject(err))

4. 实现 `axios` 取消普通请求 ⇧

对普通的 XMLHttpRequest 请求进行取消，用到了实例的 abort() 方法

const xhr = new XMLHttpRequest()
xhr.open('GET', '/abc')
xhr.send()
/* 取消当前请求 */ 
setTimeout(() => { xhr.abort() }, 300)

取消 axios 请求

使用 axios 的 cancelToken 方法
获取实例 const source = axios.CancelToken.source()
在 config 中写入属性 cancelToken: source.token

取消请求 source.cancel()

const source = axios.CancelToken.source()
axios.get('/user/12345', {
cancelToken: source.token
}).then(res => {})

// cancel 方法里面的参数是可选的
source.cancel('Operation canceled by the user.')

5. `axios` 功能的二次封装 ⇧

axios 取消重复请求的封装
axios 响应错误后重试请求的封装
token 失效返回登录页面的封装

通用代码，后略

import axios from "axios";
const http = axios.create({
  baseURL: import.meta.env.VUE_APP_BASE_URL,
});
// ...

`axios` 取消重复请求的封装 ⇧

实现思路

针对多个重复请求发送
先后紧接着发送了两个相同的请求，对前一个请求进行取消操作，真正发送出去的是后一个
判断请求重复
- 通过请求的地址 url
- 通过请求方式 method
- 请求参数 params | data 这几个值来做唯一判断
- 如果两个请求上的这些信息都相同，那么就可以判断这两个请求是重复的
获取这个请求的 cancel 方法，调用 cancel 方法进行取消
- 把当前请求和对应的 cancel 进行关联
- 用对象、数组或者 Map 进行存储
  - 把当前请求的信息作为 key
  - 把对应的 cancel 方法作为 value
  - 存储到对象或者 Map 中
- 根据当前请求信息，获取到对应的取消方法
  - 每一个请求的 cancel 方法需要调用 new CancelToken() 才可以获取

在页面离开时，丢弃所有未完成的请求使用 AbortController

访问一个请求会消耗比较长时间的页面，如果此时切换到其它页面，这些未完成的请求会影响下个页面的数据载入
也就是说，下面页面中的请求会在前一个页面请求完成后才执行

原理简述

页面中创建一个 AbortControlller 的实例
在所有有可能需要结束请求的 config 里，添加 signal: abortController.sinal 这个选项
当离开页面的时候，使用 abortController.abort() 结束所有的请求即可

使用数组和 `AbortController` 实现 ⇧

请求列表 reqList

删除重复请求的方法 rmSameReq

通过判断 reqList 中是否有相同 method 和 url 的项
若重复则调用该项中的 reqList[index].controller.abort() 方法取消请求

当 abort() 被调用时，这个 promise 将 reject 一个名为 AbortError 的 DOMException

// ts
type reqConfig = {
[K in keyof AxiosRequestConfig]: AxiosRequestConfig[K]
}
const reqList: (reqConfig & { controller: AbortController })[] = [];

const rmSameReq = (method: string = '', url: string = ''): void => {
const index = reqList.findIndex(v => v.method === method && v.url === url);
if (index >= 0) {
// 取消请求
reqList[index].controller.abort();
// 删除当前数据
reqList.splice(index, 1);
}
};

http.interceptors.request.use( config => {
const {method, url} = config
// 在push之前 遍历数组找到相同的请求取消掉
rmSameReq(method, url)
    
// 取消请求控制器
const controller = new AbortController()
    
// 记录取消操作的key
config.signal = controller.signal
    
// 每次的请求加入到数组 并带上控制器 闭包
reqList.push( { ...config, controller } )
return config
}, /* error略 */
)

// 响应拦截器
http.interceptors.response.use(res => {
	// 移除 成功请求记录 参数 res.config
	const {method, url} = res.config
	rmSameReq(method, url)
return res.data;
}, err => {
	// 移除 失败的请求记录 参数 err.config || {}
	const {method, url} = err.config
	rmSameReq(method, url)
  	
	// 提示消息
// axios.isCancel(err) || console.log(`重复请求信息：${err.message}`)
return Promise.reject(err);
});

export default http;

使用 `Map` + `axios.CancelToken` 实现，略 ⇧

额外封装一个 CancelRequest 类，导出，供拦截器实现使用

const instance = axios.create({ /* ... */ });

// 请求拦截器
instance.interceptors.request.use(config => {
  	// 检查之前是否存在相同的请求，如果存在则取消
  	// 记录当前请求 添加到 Map 中
    return config;
}, err => Promise.reject(err));

// 响应拦截器
instance.interceptors.response.use(res => {
  	// 移除 成功请求记录 参数 res.config
    return res.data;
}, err => {
  	// 移除 失败的请求记录 参数 err.config || {}
  	
  	// 提示消息
    // axios.isCancel(err) || console.log(`重复请求信息：${err.message}`)
    return Promise.reject(err);
});

export default instance;

参考

MDN AbortController
axios 官方取消请求的说明
axios请求封装（取消重复请求）
不要再被误导了，封装 Axios 只看这一篇文章就行了
- 使用函数代替拦截器
- 支持请求重试
- 支持 jsonp 请求
- 支持 URI 版本控制
- 保持请求唯一
真没必要再对 axios 进行过度的封装
Axios中文文档取消请求

`axios` 响应错误后重试请求的封装 ⇧

http.interceptors.response.use(() => void, function axiosRetryInterceptor(err) {
  const config = err.config;
  // 如果配置不存在或未设置重试选项，则拒绝
  if (!config || !config.retry) return Promise.reject(err);

  // 设置变量 跟踪重试次数
  config.__retryCount = config.__retryCount || 0;

  // 判断是否超过总重试次数
  if (config.__retryCount >= config.retry) {
    // 返回错误并退出自动重试
    return Promise.reject(err);
  }

  // 增加重试次数
  config.__retryCount += 1;

  // 打印当前重试次数
  // console.log(config.url + " 自动重试第" + config.__retryCount + "次");

  // 创建新的 Promise
  const backoff = new Promise(function (resolve) {
    setTimeout(function () {
      resolve();
    }, config.retryDelay || 1);
  });

  // 返回重试请求
  return backoff.then(function () {
    return axios(config);
  });
});

`token` 失效返回登录页面的封装 ⇧

// 放入不需要拼接 token 的接口
const whiteList=['/login', '/logup']

axios.interceptors.request.use( config => config, error => Promise.reject(error));

axios.interceptors.response.use( res => {
  // 不包含请求的接口
  if(!whiteList.includes(res.config.url)) {
  // 判断返回的数据中的 code 或是 status
  
  // token失效返回的是401
  if(res.data.code === 401)
  
  // 清空存储的 token 值
  sessionStorage.removeItem('token')
 
  // 跳转登录页
  window.location('/login')
  }
  // 包含请求的接口则不做其他任何操作 正常返回数据即可
  const { data } = res;
  return data;
  }, error => Promise.reject(error) );

参考

MDN status code 401 Unauthorized

6. `axios` 另一种取消请求功能… ⇧

需要为该请求配置一个 cancelToken，然后在外部调用一个 cancel 方法

CancelToken 废弃了，故略

参考

7. `axios` 接口封装在`Vue`中的应用 ⇧

原理回顾

页面中创建一个 AbortControlller 的实例
在所有有可能需要结束请求的 config 里，添加 signal: abortController.sinal 这个选项
当离开页面的时候，使用 abortController.abort() 结束所有的请求即可

vue代码

import {defineComponent,} from 'vue';

export default defineComponent({
  setup(/*props, ctx*/) {
    const abortController = new AbortController();
    const etUser = function() {
      axios.post( `http://user/xxx`, formData, {
        headers: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        signal: abortController.signal
      }).then(res => {})
    }
    
    // 在页面离开的时候，取消掉所有的这些请求即可，不管有没有完成
    onUnmounted(() => {
      abortController.abort() 
    });
    
    return {getRemoteSdp};
  },
})

在离开这个页面的时，都会丢弃所有添加了 signal 的请求，不管页面中有没有未完成的请求，不会影响下一个页面的数据请求

封装到原型上

2.x 全局 API（Vue）	3.x 实例 API (app)
`Vue.prototype`	`app.config.globalProperties`

参考

8. `axios` 封装为`hooks` ⇧

9. `axios` 接口封装总结 ⇧

·未完待续·

参考文章 ⇧

Vue SFC Template V.S. TSX 使用TSX 和 CSS Module 语法代替模板Vue3 SFC

xmasuhai@163.org (Joel Xu) — Fri, 02 Sep 2022 09:30:45 +0800

TSX 和 CSS module 语法代替模板 SFC template（使用 Vite 构建）

大纲链接 §

[toc]

1. `Vue2.7+` 中 `SFC template` 写法概述 ⇧

2. 对比 `TSX` 和 `CSS module` 写法 ⇧

3. 在项目中用到过的 `SFC template` 写法，尝试改写为 `TSX` 和 `CSS module` ⇧

4. 在 `Vue2.x` 中使用 `TSX` 和 `CSS module` ⇧

5. 在 `Vue3.x` 中使用 `TSX` 和 `CSS module` ⇧

配置 `scss` 全局样式文件 ⇧

需要先配置别名

虽然 vite 原生支持 less/sass/scss/stylus，但是你必须手动安装他们的预处理器依赖

安装依赖dart-sass，但包的名字为 sass
不要安装为dart-sass：deprecated dart-sass@1.25.0: This package has been renamed to 'sass'.
1 2

# yarn add sass --dev pnpm add sass -D

在 src/assets 下新增 style 文件夹，用于存放全局样式文件

新建 src/assets/style/main.scss, 设置一个用于测试的颜色变量 :
1

$test-color: red;

配置 vite.config.ts，让 vite 识别 scss 全局变量

...
css:{
// 指定传递给 CSS 预处理器的选项
preprocessorOptions:{
  scss:{
    additionalData:'@import "@/assets/style/main.scss";'
  }
}
},
...

在任意组件中使用，不需要任何引入可以直接使用全局scss定义的变量

1
2
3

.test{
  color: $test-color;
}

vite文档

对`TS`的相关配置 ⇧

vue/cli项目中shimes-vue.d.ts 文件的作用

为了typescript做的适配定义文件，因为.vue 文件不是一个常规的文件类型
ts 是不能理解 .vue 文件是干嘛的加这个文件是是告诉 ts，.vue 文件是这种类型的。

vite项目中env.d.ts 文件的作用

为了声明在vite中使用env环境的配置可以通过 import.meta.env.<变量名称来访问>

vue-tsc 和 tsc

tsc 只能验证 ts 代码类型
vue-tsc 可以验证 ts + Vue Template 中的类型（基于 Volar）

`JSX`支持 ⇧

Vue 3 JSX 相关语法

使用tsx风格代替template模板方式，需要注意相应改变的地方：

src/router/ 引入页面文件 .tsx 代替 .vue 文件
src/main.ts 修改引入 App 文件 .tsx 代替 .vue文件

安装依赖插件

1
2

# yarn add @vitejs/plugin-vue-jsx -D
pnpm add @vitejs/plugin-vue-jsx -D

配置tsconfig.json，在.tsx文件里支持JSX

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",// 在.tsx文件里支持JSX
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "lib": [
      "esnext",
      "dom"
    ],
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "include": [
    "src/**/*.js",
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx", // 在.tsx文件里支持JSX
    "src/**/*.jsx",
    "src/**/*.vue"
  ]
}

改造App.vue为App.tsx

// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from '@/components/HelloWorld.vue';
import {defineComponent} from 'vue';
import appClass from '@/styles/app.module.scss' // css modules
import logoImg from '@/assets/logo.png'; // static assets

// 用defineComponent定义组件且要导出
// noinspection JSXNamespaceValidation
export default defineComponent({
  render: () => (
    <>
      <img alt="Vue logo" src={logoImg}/>
      <HelloWorld msg="Hello Vue 3 + TypeScript + Vite"/>
      <router-link to="/">Go to Home</router-link>
      &nbsp;
      <router-link to="/about">Go to About</router-link>
      &nbsp;
      <router-view></router-view>
    </>
  ),
});

运行命令pnpm dev查看效果

在`*.tsx`文件中使用`css modules` ⇧

只有在 *.tsx 文件中可以正常使用

配置vit.config.ts

import {defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path'; // @types/node
import vueJsx from '@vitejs/plugin-vue-jsx';
import ...

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    VueSetupExtend(),
    autoComponents({...}),
    AutoImport({...}),
  ],
  server: {...},
  resolve: {
    alias: {...},
  },
  css: {
    // 配置 css modules 的行为
    modules: {
      scopeBehaviour: 'local', // 作用域
      // generateScopedName: // 使用默认配置,
      localsConvention: 'camelCase', // 识别样式命名方式
    },
    preprocessorOptions: {
      scss: {
        additionalData: `...`,
      }
    }
  },
});

定义一个 *.module.scss 或者 *.module.css 文件

创建src/styles/app.module.scss

.app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}

在 *.tsx 中引入使用

改写App.tsx

import HelloWorld from '@/components/HelloWorld.vue';
import {defineComponent} from 'vue';
import appClass from '@/styles/app.module.scss' // css modules
import logoImg from '@/assets/logo.png'; // static assets

// 用defineComponent定义组件且要导出
export default defineComponent({
render: () => (
<main class={appClass.app}>
<img alt="Vue logo" src={logoImg}/>
<HelloWorld msg="Hello Vue 3 + TypeScript + Vite"/>
<router-link to="/">Go to Home</router-link>
&nbsp;
<router-link to="/about">Go to About</router-link>
&nbsp;
<router-view></router-view>
</main>
),
});

样式文件xxx.module.scss中定义类样式.yyy {...}
引入到*.tsx文件后，在模板中使用<main class={xxx.yyy}>...</main>

如何优雅的在`TSX`语法中切换多个`className`？

<div className={
    this.state.isHide?styles.hide+' ':''+
    this.state.isActive?styles.active+' ':''+
    this.state.isAlarm?styles.alarm+' ':''
    }>
    {...data}
</div>

使用第三方包classnames
安装pnpm add classnames
引入import classname from 'classnames'

上述代码可替换为：

dataClass: {
    isHide: true,
    isActive: true,
    isAlarm: true
}

<div className={classname(dataClass)}>
    {...data}
</div>

或者使用数组

// tsx
...
// multiClass
import classnames from 'classnames';

// CSS module
import basic from '@/styles/basic.module.scss';
import test1 from '@/styles/test1.module.scss';
import test2 from '@/styles/test2.module.scss';
const btnClass = [test1.test1, test2.test2]

export default defineComponent({
  name: 'BlogIndex',
  props: {},
  setup(/*props, ctx*/) {
    return {
    };
  },
  render() {
    return (
      <>
        <Button class={classnames(...btnClass, basic.blogBtn)}>
          博客首页
        </Button>
      </>
    );
  }

});

和普通样式写在一起

1
2

<section class={classNames([cssDetail.article, 'article'])}>
</section>

参考

·未完待续·

参考文章 ⇧

Composition API 对比 Vue Class Component 的装饰器语法

xmasuhai@163.org (Joel Xu) — Thu, 01 Sep 2022 09:29:52 +0800

`Composition API` 对比 `vue-property-decorator`（基于`vue-class-component`）的装饰器语法

大纲链接 §

[toc]

1. `Vue2.x` 中类组件 `vue-property-decorator`（基于`vue-class-component`）装饰器写法概述 ⇧

2. 对比 `Composition API` 写法 ⇧

3. 在项目中用到过的类组件装饰器，尝试改写为 `Composition API` ⇧

https://juejin.cn/post/6913749452868026376 | vue-property-decorator各个装饰器的基本用法 - 掘金
https://juejin.cn/post/6948673246375968782 | Vue Class Component 自定义装饰器 - 掘金
https://juejin.cn/post/6856517315010232333 | 在Vue中使用装饰器，我是认真的 - 掘金
https://juejin.cn/post/6844903778366259213 | Vue框架TypeScript装饰器使用指南 - 掘金
https://juejin.cn/post/7134220962987261960 | Vue进阶 | 在Vue中使用装饰器 - 掘金
https://juejin.cn/post/6965428382284644388 | 前端冷知识-装饰器 - 掘金
https://juejin.cn/post/6844903741456384014 | vue-property-decorator使用指南 - 掘金
https://juejin.cn/post/6939703832930680840 | 聊聊在Vue项目中使用Decorator装饰器 - 掘金
https://juejin.cn/post/7026721252052041741 | Vue2 +Typescript 手牵手，一起走（vue-property-decorator） - 掘金
https://juejin.cn/post/6844903777443512333 | 如何使用 vue + typescript 编写页面 ( 基础装饰器部分 ) - 掘金
https://juejin.cn/post/6844903942179012616 | 装饰器(Decorator)和React高阶组件(HOC) - 掘金
https://juejin.cn/post/6887761458755534862 | 深入理解class和装饰器（下） - 掘金
https://juejin.cn/post/6844904177940824071 | Vue的class语法与常规语法对照表 - 掘金
https://juejin.cn/post/7072883925764276254 | Decorator 装饰器 - 掘金
https://juejin.cn/post/7060752562332368932 | 40张图全面剖析Vue3核心的CompositionAPI（十四） - 掘金
https://juejin.cn/column/7054086173311893512 | Vue2（3）全家桶+TS - 云牧的专栏 - 掘金

·未完待续·

参考文章 ⇧

Vue3 Hooks Composition API 对比 Mixin 写法

xmasuhai@163.org (Joel Xu) — Wed, 31 Aug 2022 09:28:04 +0800

在 `Vue` 中使用 `Composition API` 代替 `mixins`

大纲链接 §

[toc]

1. `Vue` 中 `mixins` 写法概述 ⇧

2. 对比 `Composition API` 写法 ⇧

3. 在项目中用到过的 `mixins` 写法，尝试改写为 `Composition API` ⇧

4. 在 `Vue2.x` 中使用 `Composition API` ⇧

5. 在 `Vue3.x` 中使用 `Composition API` ⇧

·未完待续·

参考文章 ⇧

mixins缺点：多个mixin不清晰property来源、命名空间冲突、跨mixin隐性耦合（使用 ref + 变量解构重命名）
Composition API FAQ
Vue2 API 选项 / 组合
Vue2 API Options / Composition

Pinia使用对比 Vuex

xmasuhai@163.org (Joel Xu) — Tue, 30 Aug 2022 09:33:33 +0800

`Pinia` 使用对比 `Vuex`

大纲链接 §

[toc]

1. 理解和使用`Vuex` 用过吗 ⇧

1.专为Vue开发的 状态管理工具（库）
2.有六个核心概念（分别有以下作用）
- store 是整个容器，包含以下所有内容
- State 用来 读取状态
- 附有一个mapState辅助函数，在options选项中使用
- Getter 用来读取 派生状态（计算状态）
- 附有一个mapGetters辅助函数，在options选项中使用
- Mutation 用来 同步提交 状态变更（写）
- 附有一个mapMutations辅助函数，在options选项中使用
- Action 用于异步变更状态，但它提交的是mutation，而不是直接变更状态
- 附有一个mapActions辅助函数，在options选项中使用
- Module 用来给store划分模块，方便维护

追问：Mutation和Action都是提交变更，为什么要分开，有什么区别？

同步异步
为了让代码更易于维护
Pinia 为了让代码更简洁，减少一个概念，容易理解

简单说一说你对`Vuex`理解？ ⇧

思路分析

给定义
必要性阐述
使用场景
拓展:实践项目

回答

Vuex专为Vue.js应用开发的 状态管理模式 + 库
- 使用 集中式全局存储，管理应用的所有组件的状态，保证状态已一种可预测的状态来变更
维护的应用状态较简单时，可用 单向数据流 来管理
- 即 状态 -> 视图 -> 操作 的单向循环方式，来实现组件间的状态管理
- 应用遇到多个组件共享状态时，无法维持定向数据流的简洁
- 如：多个视图依赖统一状态，或者来自不同视图的操作，需要变更同一个状态
- 有必要把组件共享的状态抽取出来，以一个全局单例模式管理
- 通过定义和隔离状态管理中的各种概念，维持视图和状态间的独立性
- 使得代码更加结构化，更易维护
Vuex应用于大型单页应用，简单应用反而是繁琐的，一个简单的 store 模式或者Vue3中的reactive即可
Vuex的引入概念：state、mutation、action等
- Modules 子模块非常难用
- 子模块的命名空间的使用方式不一致，有些需要.出子模块，有些不需要（全局）
- 对TS支持不好，需要自己写复杂的初始类型

追问1：Vuex缺点，开发过程中遇到的问题

Modules 子模块

追问2：action和mutation的区别？问什么要区分？

Pinia中就合并了这两个概念

参考

【Vue面试专题】前端杨村长 21-对Vuex的理解

`vuex`的`module` 使用场景 ⇧

上规模的项目都需要拆分Vuex模块便于维护
避免状态store对象过于臃肿，可以将store分割成模块module
每个模块module拥有自己的state、mutation、action、getter、嵌套子模块module
在store对象中设置modules选项
- module的状态：store.state.moduleA
- 全局命名空间
- getters：store.getters.yyy
- 同时触发子模块中的同名mutation：store.commit('zzz')
- 同时触发子模块中的同名action：store.dispatch('xyz')

思路分析

概念和必要性
如何拆分
使用细节
优缺点

回答

使用模块Module方式可以将state状态拆分，便于维护规模较大的项目
可以按store的规则单独编写子模块代码各个选项，然后在主文件中通过modules选项组织起来
在使用时，需要注意
- 访问子模块状态时需要加上注册时的模块名：store.state.a.xxx
- 子模块未设置namespace选项时，子模块中的getters、mutations和actions在全局空间中直接访问
- 子模块设置namespace选项，访问子模块中的各选项时，就需要加上命名空间的前缀，子模块的选项就被隔离在自己单独的命名空间中
优点：模块的方式可以拆分代码
缺点：
- 额外添加了module选项，较Composition API使用更繁琐，命名长
- TS类型系统支持差，需要自己实现modules的类型
解决方案：使用pinia，对TS支持好，使用组合的方式，代替模块modules实现代码逻辑的拆分

参考

安装`pinia` ⇧

安装

导入

使用

代替安装`vuex` ⇧

安装

导入

使用

·未完待续·

参考文章 ⇧

Vue3 和 Vue2.6 的差异，和替代方案 Vue 2.7

xmasuhai@163.org (Joel Xu) — Mon, 29 Aug 2022 09:34:02 +0800

`Vue3` 和 V`ue2.6` 的差异，和替代方案 `Vue2.7`

大纲链接 §

[toc]

1. 简记：Vue 3 对比 Vue 2 做了哪些改动？ ⇧

v3-migration官方文档写了（中文在这），这里列出几个容易被考的：

原理层面：
- 使用基于Proxy（代替Object.definedProperty）的数据响应式系统
api层面
- 使用Composition api 逻辑高内聚
- 实例化 const app = createApp(App) app.use().mount() 代替了 new Vue({}) 创建根实例
  - const router = createRouter({}); app.use(router);
  - const pinia = createPinia({}); app.use(pinia);
  - const store = createStore({}); app.use(store);
- SFC(Single-File Component)单文件组件 template模板语法糖 <script setup> 直接使用Composition api
- 响应式数据（模块化） ref 和 reactive
- destroyed 被改名为 unmounted 了（before 当然也改了）
- 支持多根节点的组件，使用fragment: <template> <CompA /> <CompB /></template>
  - 要求显式定义 $attrs 应该分布在哪里：<template> <CompA v-bind="$attrs"/> <CompB /></template>
- v-model:value 代替了以前的 v-model 和 .sync
- 新增内置组件 Teleport 传送门
- ref 属性支持函数了 ref="(el)=>{}"
更易维护： TypeScript + api模块化：支持局部导入
更易扩展：独立的响应化模块
兼容性：Vue 3 官方放弃对 IE11 的支持，需要兼容的话，使用Vue2.7

参考

使用 `Vue 2.7` ⇧

IE8+

vue2.x 部分配套生态

Project	Status	Description
vue-router		Single-page application routing
vuex		Large-scale state management
vue-cli		Project scaffolding
vue-loader		Single File Component (`*.vue` file) loader for webpack
vue-server-renderer		Server-side rendering support
vue-class-component		TypeScript decorator for a class-based API
vue-devtools		Browser DevTools extension

·未完待续·

参考文章 ⇧

TS 泛型的使用

xmasuhai@163.org (Joel Xu) — Sun, 28 Aug 2022 09:35:44 +0800

TS 泛型的使用

大纲链接 §

[toc]

简单的泛型 `Generic Types` ⇧

一般类型（非泛型）的局限 V.S. 泛型的作用 ⇧

有一个直接返回参数的函数

1
2
3

function returnIt(sth: unknown): unknown {
  return sth
}

以上的函数不能表示参数类型需要与返回值类型相同的情况

使用泛型

function returnIt<T>(sth: T): T {
  return sth
}

let s = returnIt<string>('hi')
// s = returnIt<number>(1)
// s = returnIt<boolean>(true)

泛型可以理解为不定类型，用来表示多种类型
将泛型的类型 string 代入就可得到 s 的类型
一旦确定类型，将不同类型重复赋值相同变量名，也会类型报错
可以使用任意大写字母表示，一般使用尖括号来声明 <T>，在冒号后像类型一样使用

返回数组类型的例子 ⇧

function returnArray<T>(array: T[]): T[] {
  return array
}
let a = returnArray([])

let ss: Array<string> = ['a', 'b']

type H = {name: string}
let aa: Array<H> = returnArray<H>([{ name: 'a' }, { name: 'b' }])

不推荐的写法 ⇧

function identity<T>(arg: T): T {
  return arg;
}
let myIdentity: <T>(arg: T) => T = identity;
let myIdentity2: {<T>(arg: T): T} = identity;
// error // let myIdentity2: <T>(arg: T): T = identity;

<T>(arg: T) => T 和函数中的类型声明 <T>(arg: T): T 等价

区别于类型断言 ⇧

类型断言，在编译时起作用

“尖括号” 用法

1
2

let someValue: unknown =  ''
let strLength: number = (<string>someValue).length

as 语法

1
2

let someValue: unknown =  ''
let strLength: number = (someValue as string).length

泛型常用组合形式 ⇧

泛型 + 接口
- interface x<T> {(a: T): T;}
- 使用 let xxx: x<string> = (a) => a;
泛型 + 类型别名 type t<T> = {a: T;}
多个泛型 type t<T, P> = {a: T; b: P}
泛型 + 函数
- function fn<T>(arg: T): T {}
泛型 + 类
- class C<T> {attr: T; fn: (a: T) => T }
- 使用 let cc = new C<string>()

约束构造函数/类 new(): T

JS 工厂函数 function create(C) {return new C()}
使用泛型 function create<T>(C: {new (): T): T { return new C()}

表示实例对象的类型为 T；传递的参数为一个类 C

function create<T>(C: {new(): T}) {
return new C()
}
class Human {}
class Animal {}
let P = create<Human>(Human)
let P1 = create<Human>(Animal) // 报错
let S = create<String>(String)

泛型就像函数 ⇧

const f = (a, b) => a + b
const result = f(1, 2)

type F<A, B> = A | B
// 使用泛型得到一个新的更具体的类型
type Result = F<string, number>

语法 ⇧

区别项 \ 类比项	名称	参数列表可传默认项	主体	调用	返回项
函数	函数名	形参/实参（默认值）	函数体	函数调用	返回值
泛型	具名：类型别名/接口等匿名：函数/类等	泛型参数 / 代入具体类型（默认类型）	类型主体（包含属性类型声明、类型集合、集合运算等逻辑）	类型调用	返回新的类型

泛型是面向对象的经典概念之一 ⇧

泛型，即“参数化类型”，也是一种类型
泛型是一种接受其他类型的类型

也称为泛型函数

type A = 'hi' | 123 // TS
let a = ['hi', 123]

type F<T> = T | T[]
// type F_number = F<number>
// type F_string = F<string>
const fn = (x: number) => x + 1

泛型：未被声明具体类型的类型（类似 unknown），type X<T> = T extends unknown ? T : never
可以理解为类型的占位符
函数的本质是：
- 延后执行 一段逻辑，之前学过函数调用的时机，声明和执行分离
- 部分待定的代码作为参数，调用时才填入具体值

类比泛型

延后声明 具体类型，先用占位符表示，之后使用到时再替换为具体类型

部分待定的类型作为参数，调用时才填入具体类型

const add = (a: number, b: number) => a + b
// const add = (a: string, b: string) => a + b

type Add<T> = (a: T, b: T) => T
// type AddNumber = Add<number>
// type AddString = Add<string>

const addN: Add<number> = (a, b) => a + b
const addS: Add<string> = (a, b) => `${a} ${b}`

function returnIt<T>(arg: T): T{
return arg;
}

let s = returnIt<string>('hi')

具体代码：码上掘金，鼠标滑过类型查看类型提示
以函数形参来类比泛型，实参就可以理解为：为泛型明确声明具体类型，可称为泛型的类型收窄

为什么会有泛型 ⇧

弱类型语言不需要泛型，比如JS

具有复杂的类型系统的计算机语言需要泛型，比如JAVA

1
2
3

function echo(whatever: string | number | boolean) {
console.log(typeof whatever)
}

判断分支代码无法实现以一对应，存在类型不精确或错乱的情况

// bad
function echo(whatever: string | number | boolean) {
switch(typeof whatever)
case('string')
case('number')
case('boolean')
default return whatever
// ...
}

如果参数的类型和返回的类型有特殊的要求，比如一一对应，就需要泛型
判断分支代码无法实现以一一对应，存在类型不精确或错乱的情况
没有泛型，就无法实现复杂的逻辑需求
没有泛型的类型系统，就如同没有函数的编程语言

一星难度的 `TS` 体操：代入法 ⇧

type Union<A, B>= A | B
type Union3<A, B, C>= A | B | C

type Intersect<A, B> = A & B
type Intersect3<A, B, C> = A & B & C

// 列表值类型
interface List<A> {
  [index: number]: A
}

type L = List<string>
type Y = List<string | number>

// 代入法
/*
interface L = {
   [index: number]: string   
}
interface Y = {
   [index: number]: string | number
}
*/

// 哈希值类型
interface Hash<V> {
  [key: string]: V
}
type S = Hash<string>
type N = Hash<number>
// 泛型可传入复杂类型 如接口
type F = Hash<List>

鼠标悬浮的提示无法知道详细类型
可使用代入法理解
无需逻辑操作

可传类型默认值

1
2
3

interface Hash<V = string> {
  [key: string]: V
}

二星难度的 `TS` 体操：条件类型 ⇧

补全类型

提示：使用条件类型 Conditional Types，即三元表达式

提示：类型的关系运算符只有一种： extends 意为包含于，表示类型集合的从属关系

type Person = {name: string}

/*
type LikeString<T> = ???
type LikeNumber<T> = ???
type LikePerson<T> = ???
*/

// 补全上分代码，可实现
type S1 = LikeString<'hi'> // true
type S2 = LikeString<true> // false
type N1 = LikeNumber<8> // 1
type N2 = LikeNumber<false> // 2
type P1 = LikePerson<{name: 'frank', xxx: 1}> // yes
type P1 = LikePerson<{xxx: 1}> // no

集合的关系判断无法像值那样，有大于小于或相等的判断，只有从属关系的判断
集合范围决定了是否为从属包含关系，范围完全一样的是一种特殊的情况

extends 读作 “包含于”，而不是面向对象中的继承

1
2
3

type LikeString<T> = T extends string ? true : false
type LikeNumber<T> = T extends number ? 1 : 2
type LikePerson<T> = T extends Person ? 'yse' : 'no'

条件类型的特殊情况 `never` ⇧

never 可理解为空集，但在类型判断中，存在特殊情况

1
2

type LikeString<T> = T extends string ? true : false
type X1 = LikeString<never> // X1: never 而不是 true

规则

若 <T> 为联合类型，则各个类型，分开计算

若 <T> 代入 never，则表达式的值为 never

type ToArray<T> = T extends unknown ? T[] : never
type res = ToArray<string | number>
// res 结果为
// (string | number)[] 类型
// string[] | number[] 类型 √
/*
* 使用代入法
* (string | number) extends unknown ? ...
* (string extends unknown ? ...)
*  | (number extends unknown ? ...)
*  string[] | number[]
*/

联合类型的条件判断，分开计算可以理解为进行类型收窄时的处理过程

type ToArray<T> = T extends unknown ? T[] : never
type res = ToArray<never>
/**
* res 的类型为
* never[]
* never √
*/

空集没有元素，直接返回 never

使用类比来理解

泛型 + 联合类型，比作乘法的分配律 (A | B) extends X -> A extends X | B extends X
never 比作乘法中的 0
只对泛型有效

在泛型中使用 `extends` 泛型约束 ⇧

给泛型添加类型约束，缩小泛型的范围

关键字 extends，翻译为包含于（集合范围小于或等于），区别于类class的继承关键字

// 添加约束之前
function returnIt<T>(arg: T): T {
console.log(arg.length) // error
return arg;
}

// 添加约束之后
interface HasLength{
length: number
}

function returnIt<T extends HasLength>(arg: T): T {
console.log(arg.length) // no error
return arg;
}

声明的泛型 <T> 必须满足包含于 HasLength 接口

在泛型中使用 `keyof` ⇧

在泛型中使用 `extends keyof` ⇧

泛型的实际使用：在`React`中使用泛型 ⇧

安装 react 和 react-dom
安装 @types/react 和 @types/react-dom

Ctrl + 点击 查看泛型是什么，使用代入法

import React, { FunctionComponent, FC } from 'react'

type P = { name: string }

// 代入法
/*
interface FunctionComponent<P = {}> = {
(props: P, context?: any): ReactElement<any, any> | null;
// ...
}
*/
const App: FunctionComponent<P> = (props) => {
console.log(props.name)
console.log(props.children)
return (
<div>hi</div>
)
}

泛型区别于函数重载 ⇧

泛型：使用时声明具体类型类型
- 难以根据不同条件，约束所有参数的类型

函数重载：根据参数类型条件判断

支持多种属性签名

// 泛型
type Add<T> = (a: T, b: T) => T
const add: Add<string | number> = (a, b) => { // 防止出现 a: string, b: number 的情况，必须使用 函数重载
return a + b
}

// 函数重载
function add2 (a: string, b: string): string; // 重载1
function add2 (a: number, b: number): number; // 重载2
function add2 (a: unknown, b: unknown): unknown { // 具体实现
if(typeof a === 'string' && b === 'string' ) return `${a} ${b}`
if(typeof a === 'number' && b === 'number' ) return a + b
}

add2(1, 2)
add2('1', '2')
// add2('1', 2) // error

让函数满足多种的参数条件就是函数重载

如何用泛型封装网络请求库 ⇧

使用 axios 时可以根据参数的类型，来自动判断执行的逻辑分支
- axios.get('/url', {})
- axios.get({url: '/xxx', header: ''})
- axios.get(url?: string, options?: {url: string, header: unknown}): void

拿获取用户来举例

const user = createResource('/api/v1/user')

import axios from 'axios'
type User = {
id: string | number;
name: string;
age: number
}

type Resonse<T> = {data: T}
type O = Omit<Partial<User>, 'id'>
// type O2 = Partial<Omit<User, 'id'>>

type CreateResource = (path: string) => {
create: (arrts: O) => Promise<Resonse<User>>;
delete: (id: User['id']) => Promise<Resonse<never>>;
update: (id: User['id'], attrs: O) => Promise<Resonse<User>>;
get: (id: User['id']) => Promise<Resonse<User>>;
getPage: (page: number) => Promise<Resonse<User[]>>;
}

const createResource: CreateResource = (path) => {
return {
create(attrs) {
const url = `${path}s`
return axios.post<User>(url, {data: attrs})
},
delte(attrs) {},
update(attrs) {},
get(attrs) {},
getPage(attrs) {},
}
}

const user = createResource('/api/v1/user')

使用映射类型 `in` ⇧

难度为三星的泛型类型体操 ⇧

如何使用 `-readonly` ⇧

类型体操有多难 ⇧

如何提问 ⇧

stackblitz.com
- vanilla TS
- 需要默认导出任意 export {} 来消除报错
码上掘金
将有疑问的代码在平台上运行，保存后分享路径 url
描述问题

·未完待续·

参考文章 ⇧

TypeScript 全解7 PDF

Vite的库模式 -进行组件库的打包对比 vue cli 和 webpack 或 parcel的库模式

xmasuhai@163.org (Joel Xu) — Sun, 28 Aug 2022 09:35:11 +0800

`Vite` 的库模式 - 进行组件库的打包对比 `vue cli`、 `webpack` 和 `parcel` 的库模式

大纲链接 §

[toc]

区别于网页应用app，总结一些构建JS库（libraries）的经验，和打包工具库模式的对比

1. 老项目的 `Vue CLI` 构建库 ⇧

2. 老项目的 `webpack` 构建库 ⇧

3. `parcel3.x`库模式尝试 ⇧

4. `Vite` 库模式构建的项目 ⇧

·未完待续·

参考文章 ⇧

【前端智人大冲浪】HTML 和 CSS

xmasuhai@163.org (Joel Xu) — Wed, 17 Aug 2022 17:03:04 +0800

HTML 和 CSS

大纲链接 §

[toc]

必考概念题：你是如何理解 `HTML` 语义化的？ ⇧

举例法

回答：我平时写代码都用的是语义化标签
HTML 语义化就是使用正确的标签（总结）
- 只看标签，就能了解这个元素的意义
- 阅读 HTML 源码，就能了解网页大致结构，利于团队维护
- 提供无障碍优化，浏览器焦点管理
比如：
- 段落就写 p 标签
- 标题就写 h1~h6 标签
- 文章就写 article 标签
- 文章章节用 section
- 主要内容用 main
- 边栏用 aside
- 导航用 nav
- ~~视频就写 video 标签~~ 可忽略
- ~~音频就写 audio 标签~~ 可忽略
- 时间就写 time 标签
- 画板就用 canvas 标签(DOM API getContext('2d') 操作属性)
- 矢量图形就用 svg 标签
反向回答：无明确语义的标签 div span

阐述法

以前的后台开发人员使用 table 布局
美工人员使用 div + css 布局
专业的前端会使用正确的标签进行页面开发

概念题分六步回答

是什么：语义化标签是一种写 HTML 标签的方法论/方式，即使用 符合英语语义 的标签来表示对应的内容
怎么做：实现方法是：标题就用 h1 ~ h6，段落用 p，文章用 article，文章章节用 section，主要内容用 main，边栏用 aside，导航用 nav……（就是找到中文对应的英文）
解决了什么问题：明确了 HTML 的 书写规范
优点是：
一、适合 搜索引擎检索 SEO
二、适合开发者阅读源码，利于团队维护
三、提供无障碍访问优化：Web 无障碍访问 (accessibility也称为 a11y)，浏览器焦点管理等
缺点是：没有
怎么解决缺点：无需解决

参考

记忆题：`meta viewport` 是做什么用的，怎么写？ ⇧

标记网页元信息的标签<meta>，其中的一类表示浏览器视口
屏幕可见区域内容的呈现机制
移动端应用场景：禁止用户缩放

举例法

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
meta
name="viewport" 视口属性
content 内容属性
- width=device-width 宽度
- initial-scale 初始尺寸（倍数）
- maximum-scale 最大尺寸（倍数）
- minimum-scale 最小尺寸（倍数）

一般可参考淘宝等大厂的写法

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
- name="viewport"
- content
- width=device-width
- initial-scale=1
- minimum-scale=1
- maximum-scale=1
- user-scalable=no
- viewport-fit=cover

记忆题：你用过哪些 `HTML 5` 标签？ ⇧

文章相关：header main footer nav aside section article ~~figure mark~~ time 等标签
~~多媒体相关：video audio svg canvas~~
表单input新增：type=email type=tel
不要提不熟悉的标签，很可能变为下一道题

记忆题使用举例法

<header>可以表示整个网页的头部，也可以表示一篇文章或者一个区块的头部
- 如果用在网页的头部，就称为“页眉”
- 网站导航 和 搜索栏 通常会放在<header>里面
<footer>表示网页、文章或章节的尾部
- 如果用于整张网页的尾部，就称为“页尾”
- 通常包含 版权信息 或者其他相关信息
<header>和<footer>不能互相嵌套，一个具体的场景里面只能包含一个<header>和<footer>
<main>表示页面的主体内容，一个页面只能有一个
<article>表示一篇文章，可以有自己的标题h1~h6，段落p，章节<section>等
<aside>来放置侧边栏
<section> 通常用在文档里面表示一个章节，<article>可以包含多个<section>
<nav>标签用于放置页面或文档的导航信息，可放置ul > li ol等
<h1> ~ <h6>表示文章的标题
适当提一些在项目中使用的例子
- 我在share blog共享博客项目中，整个布局就是使用header main footer nav

区分题：Canvas 和 SVG 的区别是什么？ ⇧

区分题答题思路为：

先说一
再说二
再说相同点
最后说不同点

标准答案：

Canvas 主要是用笔刷来绘制 2D 图形
SVG 主要是用 svg标签(xml标签) 来标记绘制 矢量图
相同点：都是主要用来画 2D 图形
不同点1：
<canvas>调用canvas API方法(canvas.getContext('2d'))生成位图图像
SVG 则是一个 XML 文件，通过各种子元素生成图像，可使用JS 操作 SVG DOM
不同点2：SVG 支持分层和事件，Canvas 不支持，但是可以用库实现。
不同点3：SVG 矢量图形放大不失真非像素点

不同点详细

Canvas 画的是基于像素的位图，SVG 画的是无损的 矢量图
SVG 节点过多时渲染慢，Canvas 性能更好一点，但由于是使用JS脚本调用各种API，写起来更复杂
SVG 支持分层和事件，Canvas 不支持，但是可以用库实现
- 比如Echarts.js的Canvas模式

SVG 图像可单向转为 Canvas 图像

用到的API：new Image() new Blob() window.self.URL.createObjectURL(svg) 类似base64编码图片

<svg width="100" height="100">
<rect width="150"
height="75"
style="fill: rgb(0, 0, 20); stroke-width: 3; stroke: rgb(0, 0, 0);"
/>
</svg>

<canvas id="myCanvas"
width="100"
height="100">
</canvas>
<script>
const c = document.getElementById('myCanvas')
const cxt = c.getContext('2d')
cxt.fillStyle = '#f00'
cxt.fillRect(0, 0, 150, 75)
</script>

SVG 可用直接标签来表示形状，线条，轮廓等图形以及文字
SVG 可用直接使用CSS写样式属性
Canvas 通过脚本描述的动态绘制图形
Canvas 的图形基于像素

Canvas优势

绘制出的图形渲染性能好于SVG
适合数据量大的情况
大量图形高频交互
可以导出常用格式的图片

SVG优势

矢量图放大不失真
基于标签，支持事件处理器和分层结构
文字独立、可编辑、可读取、可搜索

Echarts.js应用

复杂的图表更适合Canvas

扩展

Canvas API和 SVG API都属于Web API 参考 WangDoc Web API 教程
可缩放矢量图形 (SVG) Scalable Vector Graphics (.svg)

项目

我在项目中使用svg
通常使用阿里图标库 iconfont 通过svg -spirit 的精灵图形式引入js脚本在svg标签中使用
使用一些第三方库
- vue svgo
好处是：相对于图片体积小请求一个脚本也可以作为本地脚本资源引

概念题：`H5` 是什么？ ⇧

阐述法

H5表示移动端页面，活动页，而不是HTML5

必考区分题：两种盒模型分别说一下 ⇧

答题思路为：先说一，再说二，再说相同点，最后说不同点

设置盒模型的属性为box-sizing，可取值为以下两种：
- 第一种盒模型是 content-box
- 第二种盒模型是 border-box
相同点是都是用来 指定元素宽高 的方式
不同点是 border-box 更符合习惯/直觉，不用额外考虑盒子实际尺寸，将padding + border计算在内，使用起来更方便
- content-box元素的宽高指定的仅仅是 content 区域宽度，而不是实际宽度
- 元素的实际宽高为 width/height + padding + border 计算不方便不符合直觉
- border-box元素的宽高指定的是包含边框 border 内的距离
- 元素的实际宽高为 width/height

记忆题：`flex` 怎么用，常用属性有哪些？ ⇧

适用于响应式布局，局部细节节点的布局，属于一维布局
常用API

记忆题：`grid` 怎么用，常用属性有哪些？ ⇧

适用于响应式布局，全局页面的整体布局，属于二维布局
常用API

必考概念题：BFC 是什么？（作用/副作用/触发条件） ⇧

概念特性作用触发条件

是什么（翻译成中文）：「块级格式化上下文」
怎么做（触发条件）：OFPD
- O：overflow 属性值不为默认值 visible 的块元素(实现做法：添加父元素，并在该父元素上加 overflow: hidden;)
- F：元素的 float属性不是 none（将浮动属性设为float: left/right; 浮动元素）
- P：元素的 position属性不为 relative 和 static（position: absolute/fixed/sticky; 绝对/固定/黏性定位元素）
- D：display: inline-block/flex/inline-flex/grid/inline-grid/...; 行内块元素 / 弹性元素 直接子元素 就可形成*FC
解决了什么问题：
- 清除浮动（为什么不用 .clearfix::after{display: block;clear: both;} 呢？）
- 避免父级元素高度塌陷
- 清除 BFC 区域外部浮动，避免重叠
- 内部浮动，不让 BFC 区域内的浮动元素“越界”影响区域外的布局，使其被浮动被限制于 BFC 区域内
- 防止 垂直方向 父子/相邻元素 margin 合并，隔离元素
- ~~某些古老的布局方式会用到（已过时）~~
优点：无
缺点：有副作用
怎么解决缺点：使用最新的 display: flow-root; 来为元素创建 BFC，就没有副作用了，从而实现清除元素外部浮动，避免元素被覆盖

隔离元素

BFC 区域内部元素的布局，不会“越界”影响外部元素布局
外部元素布局也不会“穿透”，影响 BFC 区域内部布局

根元素 html 天然就会创建 BFC

iframe 会创建一个 html，所以 iframe 也会天然创建 BFC
display 值为 flow-root 的元素。flow-root 可以创建一个无副作用的 BFC，模拟 html 根元素

FC 的全称是 Formatting Context，种类有：

BFC（Block Formatting Context）块级格式化上下文
IFC（Inline Formatting Context）行内级格式化上下文
GFC（Grid Formatting Context）栅格格式化上下文
FFC（Flex Formatting Context）弹性格式化上下文
CSS2.1 中只有 BFC 和 IFC，CSS3 中才有 GFC 和 FFC

记忆题：CSS 选择器优先级 ⇧

样式的权值越大越优先 A > B > C > D

内联样式表的权重值最高 A；
ID 选择器的权值为 B
Class 类/伪类/属性 选择器的权值为 C
HTML 标签/伪元素 选择器的权值 D

补充

等级越高的优先级越高：内联样式表 > ID选择器 > 类选择器 > 标签选择器
同等级 越具体 优先级越高：.aaa .bbb {} > .aaa {}
同等优先级，写在 后面覆盖前面
样式权重可累加计算（各等级间/同等级嵌套元素间），但无进位关系
!important 优先级最高，但基本不用
浏览器的默认样式权重低于网页内容中的样式
继承的 CSS 样式权重低于后来指定的样式
通配选择符* 关系选择符 +相邻兄弟, >子, ~同级兄弟, ' '后代和否定伪类:not()`对优先级没有影响
但在 :not() 内部声明的选择器会影响优先级
@layer 级联层语法可控制级联层间样式的优先级
- 先定义级联层命名和顺序
- 后写具体样式实现

记忆题：清除浮动说一下 ⇧

背代码

方法一：使用伪元素::after，给父元素加上.clear-fix类，子元素的浮动就被清除了

关键是clear: both;属性

.clear-fix::after {
content: '';
display: block; /*或者 table*/
clear: both;
}
.clear-fix {
zoom: 1; /* IE 兼容*/
}

方法二，给父元素加上 overflow: hidden;

必考实践题：如何垂直居中？ ⇧

基于box-sizing: border-box;
最常用法flex：align-items: center;
进阶用法grid：align-items: center;
超级居中 flex / grid: place-items: center;
古老用法absolute top/bottom/left/right: 0; margin: auto;
普通用法absolute 元素定位+移动 top/left：50%（子元素宽高）
- 负margin移动：margin-top/margin-left设置为-50%（子元素宽高）
- translate移动子元素的 -50%：transform: translate(-50%,-50%);
HACK用法 inline-block伪元素 0高0宽伪元素撑开父元素 vertical-align: middle;

不写死父元素的height

.parent 的 height 不写，只需 padding: 10px 0; 就能将 .child 垂直居中

水平居中

只需要变换 height/width X/Y top/left column/row align-items/justify-content; 等属性位置

实践题：如何处理文本的溢出显示 ⇧

如何实现单行文本的溢出显示省略号？ ⇧

设置 overflow: hidden; 属性
设置 text-overflow: ellipsis; 属性
设置 white-space: nowrap; 属性

设置 width 固定宽度属性

.omit-single {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* 定宽 */
max-width: 90vw;
}

如何实现多行文本的溢出显示省略号？ ⇧

设置 overflow: hidden; 属性，DOM盒内容超出显示
设置 text-overflow: ellipsis; 属性，文字内容超出显示
设置 white-space: nowrap; 属性，是否折行
设置 word-wrap: break-word; 属性，断字折行
设置 display: -webkit-box; 属性，元素显示模式
设置 -webkit-box-orient: vertical; 方向属性
设置 -webkit-line-clamp: 3; 属性，保留行数

设置 width & height 宽高属性

.omit-multi {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
/* 固定宽高 */
max-height: 4em;
max-width: 90vw;
}

如何实现多行文本的溢出显示透明蒙层`CSS mask`？ ⇧

:root {
  --height: 24px;
}

.mask {
  margin: auto;
  width: 450px;
  line-height: var(--height);
  font-size: 20px;
  overflow: hidden;
  word-wrap: break-word;
  white-space: normal;

  /* box */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;

  /* mask */
  -webkit-mask: linear-gradient(270deg, transparent, transparent 30%, #000),
  linear-gradient(270deg, #000, #000);
  -webkit-mask-size: 100% 66px, 100% calc(100% - var(--height));
  -webkit-mask-position: bottom, top;
  -webkit-mask-repeat: no-repeat;
}

在使用的时候，不再需要再去添加一个用于蒙层的盒子
只需要在文段上使用mask加上一层遮罩
mask在单独使用的时候，会默认设置100%的宽高
所以这里一共定义了两个遮罩，一个在上方，一个在末行占据剩下的位置

参考

实践题：如何快速实现元素靠右对齐 ⇧

有以下几种实现方法：

第一种：flex盒子中设置 justify-content: flex-end;
第二种：父、子节点 设置宽度值
设置子节点 margin-left: auto;
左边自适应撑开，左边自动占据了剩余的全部宽度
右边是容器盒子设置的宽度
具体见《css权威指南》 P170
第三种：position: absolute;元素定位设置 right: 0;
第四种：float: right;

实现10种现代布局 ⇧

1.实现超级居中 ⇧

.parent {
  display: grid;
  place-items: center;
}

是以下两个 CSS 属性的简写：
- align-items
- justify-items
MDN place-items

2.卡片弹性自适应 ⇧

<div class="parent">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.box {
  flex: 1 1 150px;
  /* flex: 0 1 150px; */ /*  No stretching: */
  margin: 5px;
}

flex-grow: 1 表示自动延展到最大宽度

3.网格列实现经典侧边栏 ⇧

grid-template-columns: minmax(<min>, <max>) ... 网格列

<div class="parent">
<aside>
Min: 150px / Max: 25%
</aside>
<main>
This element takes the second grid position (1fr), meaning
it takes up the rest of the remaining space.
</main>
</div>

.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}

边栏：最小为150px，最大为父容器的25%
内容：1fr 占据剩余空间总的 1等份 <flex>CSS单位

4.网格行实现固定 `header` 和 `footer` 三栏布局 ⇧

grid-template-rows: auto 1fr auto; 网格行
固定高度的 header 和 footer
占据剩余空间的 body 高度可变

利用 grid 和 fr 单位完美实现

<div class="parent">
<header>Header</header>
<main> Main Content</main>
<footer>Footer</footer>
</div>

.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}

5.网格布局实现经典圣杯 `classical holy Grail layout` ⇧

使用 Grid 布局来实现圣杯布局，并且是弹性的
grid-template: auto 1fr auto / auto 1fr auto;，表示网格模板简写，一种表示方式为：
- <'grid-template-rows'> / <'grid-template-columns'>
- 其他表示方式
grid-template 行列隐式生成
所简写属性：grid-template-rows、grid-template-columns与grid-template-areas
- 定义网格线的名称和网格轨道的尺寸大小
- grid-template-columns 网格列
- grid-template-rows 网格行

grid-column 指定竖栏网格线（划定起始和终止线）放置元素

grid-column-start 和 grid-column-end 的简写属性

<div class="parent">
<header>Header</header>
<nav>Left Sidebar</nav>
<main> Main Content</main>
<aside>Right Sidebar</aside>
<footer>Footer</footer>
</div>

.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
grid-template-areas: none;
}

header {
padding: 2rem;
grid-column: 1 / 4;
}

nav {
grid-column: 1 / 2;
}

main {
grid-column: 2 / 3;
}

aside {
grid-column: 3 / 4;
}

footer {
grid-column: 1 / 4;
}

MDN grid-template 定义网格中的行、列与分区

6.跨列 `columns` 网格 `Span Grid` ⇧

grid-template-columns 指定竖栏和项目grid-column划线放置，结合repeat函数和 fr单位

.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}

.span-12 {
grid-column: 1 / span 12;
}

.span-6 {
grid-column: 1 / span 6;
}

.span-4 {
grid-column: 4 / span 4;
}

.span-2 {
grid-column: 3 / span 2;
}

/* centering text */
.section {
display: grid;
place-items: center;
text-align: center;
}

7.卡片网格自适应 ⇧

RAM 技巧：repeat、 auto-fit、 minmax

适用网格布局 图片/卡片 ，一行可以排放（或叠放）的相同尺寸卡片数量，并自动适应
grid-template-columns结合repeat(auto-fit, minmax(150px, 1fr))

使用单位fr实现和flex相同的自适应功能

<div class="parent">
<div>Card 1</div>
<div>Card 2</div>
<div>Card 3</div>
</div>

.parent {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

MDN repeat(, )
- 以更紧凑的形式，写入大量显示重复模式的列或行
- 用于 CSS Grid 属性中 grid-template-columns 和 grid-template-rows
MDN auto-fit
- repeat()取值
MDN minmax()
- 定义了一个长宽范围的闭区间，与CSS 网格布局一起使用
MDN fr单位
- 代表网格容器中可用空间的一等份

8. 多卡片内容排齐 ⇧

grid 更精确地控制整体/区域（面性内容）排版样式

flex 控制内部线性内容排版样式

justify-content: space-between

<!-- vue 模板语法 -->
<div class="parent">
<div v-for="item in data" class="card">
<h3>{{ item.title }}</h3>
<p>{{ item.msg }}</p>
<div class="visual"></div>
</div>
</div>

.parent {
height: auto;
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(3, 1fr);
}

.visual {
height: 100px;
width: 100%;
}

.card {
display: flex;
flex-direction: column;
padding: 1rem;
justify-content: space-between;
}

9.剪裁`clamp`流式排版 `fluid typography` ⇧

clamp(<min>, <actual>, <max>)

适合包含阅读内容的卡片

<div class="parent">
<div class="card">
<h1>Title Here</h1>
<div class="visual"></div>
<p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
</div>
</div>

.parent {
display: grid;
place-items: center;
}

.card {
width: clamp(18em, 50%, 32em);
display: flex;
flex-direction: column;
padding: 1rem;
}

.visual {
height: 125px;
width: 100%;
}

MDN clamp() 裁剪上下限

10.完美实现比例 ⇧

aspect-ratio: <width> / <height>

期望图片、video、卡片能够按照固定的比例进行布局

<div class="parent">
<div class="card">
<h1>Video Title</h1>
<div class="visual"></div>
<p>Descriptive Text. This demo works in Chromium 84+.</p>
</div>
</div>

.parent {
display: grid;
place-items: center;
}

.visual {
aspect-ratio: 16 / 9;
}

.card {
width: 50%;
display: flex;
flex-direction: column;
padding: 1rem;
}

·未完待续·

参考文章 ⇧

【项目多人共享博客】6. 打包部署

xmasuhai@163.org (Joel Xu) — Wed, 27 Jul 2022 10:11:18 +0800

使用`Vite`对项目进行打包和上线部署

大纲链接 §

[toc]

基本概念

`import.meta.url`

配置文件

import {defineConfig, loadEnv} from 'vite';
// @types/node
// @ts-ignore
import path from 'path';

// plugins
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons';
// @ts-ignore
import removeConsole from 'vite-plugin-remove-console';

// setup name
import VueSetupExtend from 'vite-plugin-vue-setup-extend';
// 自动引入组件和方法
import autoComponents from 'unplugin-vue-components/vite';
import {AntDesignVueResolver,} from 'unplugin-vue-components/resolvers';
import AutoImport from 'unplugin-auto-import/vite';

//mock
import {viteMockServe} from 'vite-plugin-mock';


// 查看本地环境
// console.log('process.env', process.env);
// console.log('process.env.NODE_ENV', process.env.NODE_ENV);
// console.log('import.meta', import.meta); // Vite 3

/*
*
* 在开发中，分为本地，测试，和线上三种环境，
* 需要根据不同的环境配置项目接口请求地址，
* 可以根据node提供的全局对象process.env
* */

/*
// 本地开发模式
const localEnabled: boolean = (process.env.USE_MOCK as unknown as boolean) || false;
// 生产模式
const prodEnabled: boolean = (process.env.USE_CHUNK_MOCK as unknown as boolean) || false;
*/

// https://vitejs.dev/config/
export default defineConfig(({mode}) => {
  const env = loadEnv(mode, __dirname);
  return {
    // 项目根目录（index.html 文件所在的位置）
    root: './',
    // 开发或生产环境服务的公共基础路径
    base: env.VITE_RES_URL,
    // 开发模式 默认：'development'（开发模式），'production'（生产模式）
    mode: 'production',
    esbuild: {
      jsxFactory: 'h',
      jsxFragment: 'Fragment'
    },
    plugins: [
      vue(),
      vueJsx(),
      VueSetupExtend(),
      // unplugin-vue-components/vite
      autoComponents({
        // ui库解析器，也可以自定义
        // resolvers: [ElementPlusResolver()],
        resolvers: [
          AntDesignVueResolver(),
          /*
          ElementPlusResolver(),
          VantResolver(),
          HeadlessUiResolver(),
          */
        ],
        // 指定组件位置，默认是src/components
        dirs: ['src/components'],
        // valid file extensions for components.
        // 组件的有效文件扩展名
        extensions: ['vue', 'tsx'],
        // 配置文件生成位置
        dts: 'src/components.d.ts',
        // search for subdirectories
        // 搜索子目录
        deep: true,
        // Allow subdirectories as namespace prefix for components.
        // 允许子目录作为组件的命名空间前缀。
        directoryAsNamespace: false,
        // filters for transforming targets
        include: [/.vue$/, /.vue?vue/],
        exclude: [/[\/]node_modules[\/]/, /[\/].git[\/]/, /[\/].nuxt[\/]/],
      }),
      AutoImport({
        // targets to transform
        include: [
          /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
          /\.vue$/, /\.vue\?vue/, // .vue
          /\.md$/, // .md
        ],
        // global imports to register
        imports: ['vue', 'vue-router', 'pinia',/*'vue-i18n', '@vueuse/head', '@vueuse/core'*/],
        // 生成全局声明文件 .eslintrc-auto-import.json ，给eslint用
        // eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
        eslintrc: {
          enabled: true, // Default `false`
          filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
          globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
        },
        // 可以选择auto-import.d.ts生成的位置，使用ts建议设置为 'src/auto-import.d.ts'
        dts: 'src/auto-import.d.ts'
      }),
      removeConsole(),
      createSvgIconsPlugin({
        // Specify the icon folder to be cached
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        // Specify symbolId format
        symbolId: 'icon-[dir]-[name]',

        /**
         * custom insert position
         * @default: body-last
         */
        inject: 'body-last', /*| 'body-first'*/

        /**
         * custom dom id
         * @default: __svg__icons__dom__
         */
        customDomId: '__svg__icons__dom__',
      }),
      viteMockServe({
        // ignore: /^\_/, // 忽略的文件名
        // ↓解析根目录下的mock文件夹
        mockPath: './mock',
        /*
        localEnabled: localEnabled,  // 开发打包开关
        prodEnabled: prodEnabled, // 生产打包开关
        */
        localEnabled: true,
        supportTs: true, // 打开后，可以读取 ts 文件模块。 请注意，打开后将无法监视.js 文件
        watchFiles: true, // 监视文件更改
        /*
        // 下面这段代码会被注入 main.ts
        injectCode: `
        import { setupProdMockServer } from '../mock/_createProductionServer';
        ();
        `,
        */
      })
    ],
    server: {
      host: '0.0.0.0' // 解决  Network: use --host to expose
    },
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
      },
    },
    css: {
      // 配置 css modules 的行为
      modules: {
        scopeBehaviour: 'local',
        // generateScopedName: // default,
        localsConvention: 'camelCase',
      },
      postcss: {
        plugins: []
      },
      preprocessorOptions: {
        scss: {
          additionalData: `
        @import "@/assets/style/variables.scss";
        @import "@/assets/style/global.scss";
        @import "@/assets/style/reset.scss";
        @import "@/assets/style/mixin.scss";
        @import "@/assets/style/blog-article.scss";
        `,
        }
      }
    },
  };
});

打包

直接pnpm run build就可以得到生产环境的代码，但是如果需要对打包做更精确的操作，还需要单独做一些配置

部署

部署在github

开启Git Pages

部署在gitee

开启Gitee Pages

使用`Github Actions`实现自动化部署

.github/workflows/deploy-website.yml

name: Deploy GitHub Pages

on:
  # 每当 push 到 main 分支时触发部署
  push:
    branches: [main]

# 任务
jobs:
  build-and-deploy:
    # 服务器环境：最新版 Ubuntu
    runs-on: ubuntu-latest

    steps:
      # 拉取代码
      - name: Checkout
        uses: actions/checkout@v2
        with:
          persist-credentials: false

      # 1、生成静态文件
      - name: Build
        run: yarn install && yarn build:app

      # 2、部署到 GitHub Pages
      - name: Deploy WebSite
        uses: JamesIves/github-pages-deploy-action@v4.2.5
        with:
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
          REPOSITORY_NAME: xmasuhai/vite-share-blog
          BASE_BRANCH: main
          BRANCH: gh-pages
          FOLDER: dist

遇错

/usr/bin/git worktree remove github-pages-deploy-action-temp-deployment-folder --force fatal: 'github-pages-deploy-action-temp-deployment-folder' is not a working tree

更改版本uses: JamesIves/github-pages-deploy-action@v4.2.5
BASE_BRANCH: main
Fail to deploy to Github Pages - Blazor webassembly using GitHub Actions
🚀 📦 🔨 🔧 发布部署 Deploy GitHub Pages #11

·未完待续·

参考文章

https://juejin.cn/post/6986169708722520072#heading-17 | Vite+Typescript+React 构建标准化应用 - 掘金 https://cn.vitejs.dev/config/ | 配置 Vite | Vite 官方中文文档 https://juejin.cn/post/7028773763827105829 | Vite 开发实践 - 打包部署 - 掘金 https://juejin.cn/post/7061559210902814750 | Vite 的打包和预览功能 - 掘金 https://juejin.cn/post/6946007023951544357 | Vite生产环境踩坑记录，满满的干货，建议收藏！ - 掘金 https://juejin.cn/post/7032988013361627143 | vite2 + vite.config.js 比较坑的环境变量，vite2模式的使用 - 掘金 https://juejin.cn/post/6992495028425719815 | vue3 + vite 项目搭建 - 配置环境变量env - 掘金 https://juejin.cn/post/6941641892840865805 | 前端工程化之Vite2配置详细说明 - 掘金 https://juejin.cn/post/7072176925061414925 | Vite多环境配置：让项目拥有更高定制化能力 - 掘金 https://juejin.cn/post/6994310850290909214 | vite根据环境变量与模式打包项目 - 掘金 https://juejin.cn/post/6999416108813910053 | 用vitePress高效快速构建面试题文档/博客网站 - 掘金 https://juejin.cn/post/6950203740737503240 | Vite 打包项目 - 掘金 https://juejin.cn/post/6946036158509875208 | 基于 Node.js 的 ssh2 实现前端项目自动化打包、发布和部署 - 掘金 https://juejin.cn/post/7017636195567927333 | 三分钟实现 Vite + Vue3多入口项目开发 - 掘金 https://juejin.cn/post/6951557699079569422 | vite 动态 import 引入打包报错解决方案 - 掘金 https://juejin.cn/post/7044876656049127437 | vite项目初始化之~打包去掉console信息 - 掘金 https://juejin.cn/post/6978033267865812999 | Vite2.0项目的类mono-repo实践（一仓库多项目，独立打包） - 掘金 https://juejin.cn/post/6900852894321836046 | [vite] 开发用vite,打包用webpack–解决别名路径不同的问题 - 掘金 https://juejin.cn/post/6887013512364130311 | 5 分钟带你快速读懂 vite 打包过程 | 源码解读 - 掘金 https://juejin.cn/post/6897253817726238728 | Vite +Vue 3 + Vue Router4 项目打包后首页一片空白 - 掘金 https://juejin.cn/post/7040750959764439048 | Vite为什么快呢？快在哪？说一下我自己的理解吧 - 掘金 https://juejin.cn/post/7065538392322211877 | 老项目从webpack迁移到vite失败经验 - 掘金 https://juejin.cn/post/6923417451333959694 | 浅谈Vite 原理与 Webpack比较 - 掘金 https://juejin.cn/post/7031421642513317918 | 带你解读 webpack 打包原理及vite的优势 - 掘金

https://juejin.cn/post/6986169708722520072#heading-17 | Vite+Typescript+React 构建标准化应用 - 掘金 https://cn.vitejs.dev/config/ | 配置 Vite | Vite 官方中文文档 https://juejin.cn/post/7028773763827105829 | Vite 开发实践 - 打包部署 - 掘金 https://juejin.cn/post/7061559210902814750 | Vite 的打包和预览功能 - 掘金 https://juejin.cn/post/7032988013361627143 | vite2 + vite.config.js 比较坑的环境变量，vite2模式的使用 - 掘金 https://juejin.cn/post/6992495028425719815 | vue3 + vite 项目搭建 - 配置环境变量env - 掘金 https://juejin.cn/post/6941641892840865805 | 前端工程化之Vite2配置详细说明 - 掘金 https://juejin.cn/post/7072176925061414925 | Vite多环境配置：让项目拥有更高定制化能力 - 掘金 https://juejin.cn/post/6994310850290909214 | vite根据环境变量与模式打包项目 - 掘金 https://juejin.cn/post/6999416108813910053 | 用vitePress高效快速构建面试题文档/博客网站 - 掘金 https://juejin.cn/post/6950203740737503240 | Vite 打包项目 - 掘金 https://juejin.cn/post/6946036158509875208 | 基于 Node.js 的 ssh2 实现前端项目自动化打包、发布和部署 - 掘金 https://juejin.cn/post/7017636195567927333 | 三分钟实现 Vite + Vue3多入口项目开发 - 掘金 https://juejin.cn/post/6951557699079569422 | vite 动态 import 引入打包报错解决方案 - 掘金 https://juejin.cn/post/7044876656049127437 | vite项目初始化之~打包去掉console信息 - 掘金 https://juejin.cn/post/6978033267865812999 | Vite2.0项目的类mono-repo实践（一仓库多项目，独立打包） - 掘金 https://juejin.cn/post/6900852894321836046 | [vite] 开发用vite,打包用webpack–解决别名路径不同的问题 - 掘金 https://juejin.cn/post/6887013512364130311 | 5 分钟带你快速读懂 vite 打包过程 | 源码解读 - 掘金 https://juejin.cn/post/6897253817726238728 | Vite +Vue 3 + Vue Router4 项目打包后首页一片空白 - 掘金 https://juejin.cn/post/7040750959764439048 | Vite为什么快呢？快在哪？说一下我自己的理解吧 - 掘金 https://juejin.cn/post/7065538392322211877 | 老项目从webpack迁移到vite失败经验 - 掘金 https://juejin.cn/post/6923417451333959694 | 浅谈Vite 原理与 Webpack比较 - 掘金 https://juejin.cn/post/7031421642513317918 | 带你解读 webpack 打包原理及vite的优势 - 掘金

作者： Joel
文章链接：
版权声明
非自由转载-非商用-非衍生-保持署名

Joel in The House

关于我

【CSS非全解01】CSS基础 初识CSS

引入 css 的方式 ⇧

行内样式表：行内样式 ⇧

内部样式表：页面级样式 <style> 元素中 ⇧

外部样式表：外部css文件 使用<link> 元素 ⇧

css资源文件 ⇧

CSS基本语法一：样式语法 ⇧

基本语法注意事项 ⇧

样式选择器 ⇧

id 选择器 ⇧

类型选择器 Type selectors (元素/标签选择器) ⇧

类型选择器 (class 类选择器) ⇧

属性选择器 ⇧

通配符 选择器 ⇧

伪选择器（Pseudo） ⇧

伪类 ⇧

子伪类选择器 ⇧

否定伪类（negation pseudo-class）（:not()） ⇧

聚焦内部（:focus 和 :focus-within） ⇧

:has()

:where

:is

前后伪元素 ⇧

首字母伪元素 ::first-letter ⇧

首行伪元素 ::first-line ⇧

选中伪元素 ::selection ⇧

分组选择器（Grouping selector） ⇧

选择器并列 ⇧

选择器列表 ⇧

组合器（Combinator） ⇧

后代组合器 ⇧

直接子代组合器 ⇧

一般兄弟组合器 ⇧

紧邻兄弟组合器 ⇧

样式层叠 ⇧

样式层叠的顺序，即权重计算顺序 ⇧

选择器优先级-简单判断 ⇧

css 权重，真正影响样式的原因 ⇧

比较重要性 ⇧

比较特殊性 ⇧

比较源次序 ⇧

css 层叠特性 权重应用 ⇧

选择器嵌套 ⇧

CSS语法二：常用属性 ⇧

样式继承 ⇧

不能被继承的样式 ⇧

属性值的计算过程 ⇧

属性值计算过程 ⇧

CSS语法三：常用@语法 at-rule ⇧

@import ⇧

@charset ⇧

@font-face ⇧

@media ⇧

基本单位 ⇧

长度单位 ⇧

颜色 ⇧

参考文章 ⇧

相关文章 ⇧

【React非全解 5】React 内置 Hooks 各个击破

Hooks 各个击破

1. useState ⇧

注意事项1：不可局部更新属性，不自动合并 ⇧

注意事项2：地址要变 ⇧

注意事项3 接受函数 ⇧

2. useReducer ⇧

3. 用 useReducer 代替 redux ⇧

辅助函数和基本结构 ⇧

复杂useReducer使用步骤 ⇧

模块化处理 ⇧

4. useContext ⇧

使用useContext注意事项 ⇧

5. useEffect & useLayoutEffect ⇧

useEffect ⇧

useLayoutEffect ⇧

useEffect V.S. useLayoutEffect ⇧

6. useMemo ⇧

使用useMemo前，先需要理解 React.memo ⇧

React.memo的bug ⇧

【CSS非全解01】CSS基础初识CSS

引入 `css` 的方式 ⇧

内部样式表：页面级样式 `<style>` 元素中 ⇧

外部样式表：外部`css`文件使用`<link>` 元素 ⇧

`css`资源文件 ⇧

`CSS`基本语法一：样式语法 ⇧

`id` 选择器 ⇧

类型选择器 `Type selectors` (元素/标签选择器) ⇧

类型选择器 `(class` 类选择器) ⇧

通配符选择器 ⇧

否定伪类（negation pseudo-class）（`:not()`） ⇧

聚焦内部（`:focus` 和 `:focus-within`） ⇧

`:has()`

`:where`

`:is`

首字母伪元素 `::first-letter` ⇧

首行伪元素 `::first-line` ⇧

选中伪元素 `::selection` ⇧

`css` 权重，真正影响样式的原因 ⇧

`css` 层叠特性权重应用 ⇧

CSS语法三：常用`@`语法 `at-rule` ⇧

`@import` ⇧

`@charset` ⇧

`@font-face` ⇧

`@media` ⇧

1. `useState` ⇧

2. `useReducer` ⇧

3. 用 `useReducer` 代替 `redux` ⇧

复杂`useReducer`使用步骤 ⇧

4. `useContext` ⇧

使用`useContext`注意事项 ⇧

5. `useEffect` & `useLayoutEffect` ⇧

`useEffect` ⇧

`useLayoutEffect` ⇧

`useEffect` V.S. `useLayoutEffect` ⇧

6. `useMemo` ⇧

使用`useMemo`前，先需要理解 `React.memo` ⇧

`React.memo`的`bug` ⇧

配合使用`useMemo`解决`React.memo`的问题

`useCallback`是`useMemo`的语法糖

7. `useRef` ⇧

`useRef`用途： ⇧

`useRef`读取值为什么需要`.current`？ ⇧

`useRef`不能做到变化时自动`render`刷新`UI`，需要额外步骤 ⇧

8. `useRef`配合`forwardRef`用在函数组件中 ⇧

9. `useImperativeHandle` ⇧

10. 自定义 `Hook` ⇧

11. `Stale Closure`过时的闭包 ⇧

`Hooks` 之 `useState` 原理解析

1. 最简单的 `useState` 实现 ⇧

2. 如何让两个 `useState` 不冲突 ⇧

3. `useState` 不能写在 `if` 条件判断语句里 ⇧

`useState`小结

使用 `useRef` 和 `useContext`解决数据状态分身问题 ⇧

`useRef` 的一个作用：固定数据状态 ⇧

`useContext` 的作用 ⇧

模拟`componentDidMount`： ⇧

部分模拟`componentDidUpdate`： ⇧

模拟`componentWillUnmount`： ⇧

3.自定义 `Hooks` 之 `useUpdate` ⇧

`useUpdate`小结 ⇧

2. 两种创建 `class` 组件的方式 ⇧

3. 回顾`props` ⇧

父组件的`state`传给子组件作为其 `props` ⇧

子组件读取`props` ⇧

原则：不准对组件的 `props` 进行写入 ⇧

`props`相关的钩子 ⇧

`props`的作用 ⇧

4. 回顾`state` ⇧

初始化 `state` ⇧

读写 `state` ⇧

5.1 生命周期之 `constructor` ⇧

5.2 生命周期之 `shouldComponentUpdate` ⇧

关于 `React.PureComponent` ⇧

5.3 生命周期之 `render` ⇧

5.4 生命周期之 `componentDidMount` ⇧

5.5 生命周期之 `componentDidUpdate` ⇧

5.6 生命周期之 `componentWillUnmount` ⇧

8. 课后习题测试 `Class` 组件