从一个主力语言是JavaScript的开发者角度来分析俄罗斯方块，不同形状的方块的下落、移动、消除其实是 复杂的状态管理和组件通信。这不刚好就是React和Redux的射程范围嘛！（并没有说它们适合游戏开发）

我将通过这篇博文拆解实现俄罗斯方块的一些核心逻辑，以及Redux Tool Kit的使用。

你可以在我的Github仓库上找到项目代码，也可以通过Github Page来试玩这个游戏。

本文涉及的技术

• JavaScript数组高阶函数
• 使用Redux Tool Kit对React单页面项目进行状态管理
• 使用requestAnimationFrame实现动画效果

文件结构

项目总结构

|-- src
    |-- App.js
	|-- index.js
	|-- store.js
	|-- features/
		|-- game/
			|-- components/
			|-- game-slice.js
	|-- styles/
	|-- utils/

我是通过create-react-app创建的项目，游戏界面及功能所有代码都在src路径下：

• 我保留了index.js和App.js，同时添加了store.js来处理Redux store的配置代码；
• 样式全部放在了styles文件夹中，游戏运行的核心逻辑放到了utils文件夹中；
• Redux官方推荐在使用RTK（Redux Tool Kit）时，创建一个features目录，并把不同的功能模块放在这个目录下，每一个功能模块包含自己的组件、reducer和其他相关文件（如与后端通信的代码），所以我在features目录下创建了game文件夹，并在其下创建了components目录和game-slice.js。

组件结构

我规划的组件包括：

|-- components/
	|-- Board.js
	|-- Control.js
	|-- MessagePopup.js
	|-- NextBlock.js
	|-- ScoreBoard.js
	|-- Square.js

• Board.js是主游戏区
• Control.js是按钮控制面板
• MessagePopup.js是游戏结束时弹出的消息框
• NextBlock.js是下一个形状提示框
• ScoreBoard.js显示当前分数和历史最高分数
• Square.js是组成主游戏区和提示框的小方块

核心UI组件搭建的逻辑

游戏区域的实现

主游戏区框架的实现

将主游戏区看作一个10*18的网格，可以通过单项数据为0的二维数组实现：

//src/utils/index.js

const boardDefault = () => {
    const rows = 18; //共18行
	const cols = 10; //共10列	
	const array = Array.from(Array(rows), () => Array(cols).fill(0));
	return array;
};

注：在示意图中，我标注了x和y象限，因为之后会使用x和y的值来判断形状在主游戏区的位置。

形状的实现

既然主游戏区可以通过数组来实现，那么不同形状的方块也可以通过数组来实现：

设定每一种形状都用一个4*4的网格作为容器：

[

	[0, 0, 0, 0],
	[0, 0, 0, 0],
	[0, 0, 0, 0],
	[0, 0, 0, 0],

],

在俄罗斯方块游戏中，不同的形状的颜色不同，所以可以用整数1,2,3,4...来区分它们。

使用整数的另一个好处是可以和样式绑定，先提前设置好每个颜色对应的编号：

:root {
	--color-0: #282c34;
	--color-1: #ff6600;
	--color-2: #eec900;
	...
	--color-7: #ff0000;
}

.color-0 {
	background-color: var(--color-0);
}

.color-1 {
	background-color: var(--color-1);
}

...
  
.color-7 {
	background-color: var(--color-7);
}

然后就可以通过数字1,2,3,4...在前文的4*4网格数组中的排列来表达不同的形状了，需要注意的是每个形状还有旋转后的样式也要考虑进去。

比方说一个长条形状及它旋转后可以表示为：

//I

[
	[
		[0, 0, 0, 0],
		[1, 1, 1, 1],
		[0, 0, 0, 0],
		[0, 0, 0, 0],
	],

	[
		[0, 1, 0, 0],
		[0, 1, 0, 0],
		[0, 1, 0, 0],
		[0, 1, 0, 0],
	],
],

• 把单个形状及其旋转后的样式放在同一个数组中，引用时就可以通过索引号来获得形状的旋转效果。
• 再把所有形状的数组汇总到一个数组中，这样通过索引号就把表示颜色的数字和形状挂钩了。

形状到主游戏区的映射

我们完成了主游戏区和形状分别的实现，那么当游戏进行时，如何把形状映射到主游戏区呢？

在React中，每一次渲染都相当于一次快照，那么就可以把游戏进行时，形状在主游戏区域的每一次移动都看作独立的一次形状数组到主游戏区数组的映射：

具像化我们映射过程就是从以上第一幅图到第二幅图。

代码实现如下：

//src/features/game/components/Board.js

//这里的board变量是10*18的由0组成的二位数组
const boardSquare = board.map((rowArray, row) => {
	return rowArray.map((square, col) => {
	//col（0-9）row（0-17)
	const blockX = col - x;
	const blockY = row - y;
	//square为0
	let color = square;
	//生成移动的block的颜色
	if (
		blockX >= 0 &&
		blockX < block.length &&
		blockY >= 0 &&
		blockY < block.length
	) {
    //这里的block变量引用了从函数外部取得的表示形状的数组
		color = block[blockY][blockX] === 0 ? color : blockColor;
	}
	//生成key
	const k = row * board[0].length + col;
	return <Square key={k} color={color} />;
	});
});

让我们看看上面代码发生了什么：

• x,y是形状起始的横轴（行）和纵轴（列）的坐标，我设定的初始值为x=4, y=-5，这样每一个形状的初始位置就位于主游戏区差不多正上方，随着形状的移动，这两个值也会发生变化；
• boardSquare函数实际上做了两件事：将我们用数组表达的10*8主游戏区展示到UI；根据主游戏区纵坐标（0-17）、横坐标（0-9）与x、y的差值来定位，将形状数组映射到主游戏区；
• 首先通过一组嵌套结构的Array.map()的方法，遍历主游戏区所有网格，并将所有网格的color设置为0；
• 在遍历主游戏区的同时，通过blockX和blockY坐标来锁定位于形状数组内部的方块，如果它的值不为0的话，就返回对应数字的颜色；
• 因为React要求遍历的组件包含一个独一无二的key，所以通过row * board[0].length + col生成key。

判断边界的逻辑

移动范围边界

形状在主游戏区的移动遵守一定的规则：

1. 左右下边都不可越界
2. 如果在主游戏区碰到其他的形状，也不得移动。

我们只用检查形状内部每一个方块是否符合以上规则，就可以判断形状是否可以移动了。

此处还需要注意的是，每一形状都被放置在4*4的网格中，所以要排除方块值为0情况：

//src/utils/index.js

const canMoveTo = (shape, board, x, y, rotation) => {
	const currentShape = shapes[shape][rotation];
	for (let row = 0; row < currentShape.length; row++) {
		for (let col = 0; col < currentShape[row].length; col++) {
			if (currentShape[row][col] !== 0) {
				const proposedX = col + x;
				const proposedY = row + y;
			if (proposedY < 0) {
				continue;
				}
			const possibleRow = board[proposedY];
			if (possibleRow) {
				if (
					possibleRow[proposedX] === undefined ||
					possibleRow[proposedX] !== 0
					) {
						return false;
					}
				} else {
				//超越底线
						return false;
					}
				}
			}
		}
	//默认可以移动
	return true;
};

• 使用canMoveTo函数来判断是否可以移动，函数接受shape（形状数组）、board（主游戏区数组）、x,y（形状定位坐标）、rotation（旋转索引号）作为参数，返回布尔值。
• 首先默认可以移动；
• 利用两个嵌套Array.map()遍历形状数组内部的方块，如果方块的值为非0，就根据x和y的值来判断方块位于游戏主区的位置，即proposedX和proposedY；
• 因为形状的初始情况是位于游戏主区上方，不在主区内，所以存在proposedY小于0的情况，这个时候继续遍历就好；
• 根据propsedY可以推断出方块位于主游戏区的行数possibleRow，如果不存在possibleRow的话，则说明方块已经超越了主游戏区的底边，返回false；
• 用possibleRow[proposedX]来定位形状方块位于主游戏区该行的哪一个方块，如果值不为0或者为undefined的话，说明主游戏区上已经有其他形状的方块或者超越主游戏区左右边界，返回false。

消除条件

当主游戏区一整行填满形状方块就会消除，放在数组的框架下思考，就是检查一行是否全不为0。如果符合条件就删除一整行，然后在数组最开始重新添加一行：

//src/utils/index.js

const checkRows = (board) => {
	for (let row = 0; row < board.length; row++) {
	//检查是否一整行都不为'0'
		if (board[row].indexOf(0) === -1) {
		//如果是，删除这一行
				board.splice(row, 1); 
				//同时在数组最开始添加一行新的数组
				board.unshift(Array(10).fill(0));
			}
	}
}

状态管理

使用Redux Tool Kit

在这个应用中，我使用Redux Tool Kit（后文简称RTK）来实现状态管理。

RTK对比传统的Redux来说的优势在于：

1. 更少的样板代码
2. RTK通过Immer库来实现不可变数据，提高应用程序的性能。

创建Slice

在RTK中，reducer和action集合到slice中，可以通过引用createSlice来实现：

//src/features/game/game-slice.js

import {createSlice} from '@reduxjs/toolkit'

const gameSlice = createSlice({
	name:'game',
	initialState: {...},
	reducer: {
		rotate:(state, action) =>{
			...
			},
		moveRight: (state, action) =>{
			...
			},
			...
		},
})

export const {rotate, moveRight} = gameSlice.actions
export default gameSlice.reducer;

注：在传统方式中若要修改不可变数据，需要手动复制原始数据，并在副本上进行修改，由于immer库的存在，在编写reducer的时候，可以直接修改state，详细代码可以查看github仓库。

创建store

//src/store.js

import { configureStore } from '@reduxjs/toolkit';
import gameReducer from './features/game/game-slice';

export const store = configureStore({ reducer: { game: gameReducer}})

将数据提供给应用

//src/index.js

import { Provider } from 'react-redux';
import { store } from './store';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
	<React.StrictMode>
		<Provider store={store}>
			<App />
		</Provider>
	</React.StrictMode>
);

使用数据

//src/features/game/components/Control.js

import { useSelector, useDispatch } from 'react-redux';
import { rotate } from '../game-slice';

export default function Controls() {
	const dispatch = useDispatch();
	const isRunning = useSelector((state) => state.game.isRunning);
    const gameOver = useSelector((state) => state.game.gameOver);

	const handleRotate = () => {
		if (!isRunning || gameOver) return;
		dispatch(rotate());
	};

	return (
		<div className="controls">
		{/* rotation */}
			<button
				disabled={!isRunning || gameOver}
				className="control-button"
				onClick={handleRotate}
			>						
			 Rotate
			</button>

下落动画的实现

Delta Time

Delta time（Δt）是一个计算两个时间点之间经过的时间差的量。在游戏开发中，delta time 指的是每一帧之间的时间间隔。

实现方块的下落动画，会运用到delta time。

这里我们需要计算两次调用requestAnimationFrame的时间差的值，如果累计差值比我们设定的游戏速度要大，就触发moveDownaction。

形状的下落实际上就是在一定时间间隔下更新画面（触发moveDown这个action），不就是定时器嘛！

使用requestAnimationFrame、useRef和useEffect实现定时器的原因

• requestAnimationFrame

一般想到定时器会想到setInterval和setTimeout，但实际上使用requestAnimationFrame的性能更好。

这是因为requestAnimationFrame更符合屏幕的刷新率，通常屏幕的刷新率是60Hz，也就意味着浏览器每间隔16.7毫秒（1000毫秒/60）就会更新一次页面。requestAnimationFrame的回调函数会在浏览器准备好下一帧时调用，从而确保每一帧都能够在屏幕刷新之前完成绘制。

但setTimeout和setInterval的时间并不精准，可能会出现卡顿、延迟等性能问题。

• useRef

React中的函数组件就像一个快照，每次渲染完成后值就会丢失。所以如果需要让函数“记住”值的话，就需要使用额外的钩子。

在俄罗斯方块游戏中，我们需要对形状下落的帧进行记录，这个值不受组件的生命周期影响，因此需要useRef。

• useEffect

游戏中只需要在特定时间调用控制下落的函数，并且这个过程是Board.js组件的一个副作用，因此需要使用useEffect。

//src/utils/useTimer.js

import { useEffect, useRef } from 'react';
import { useDispatch } from 'react-redux';

export function useTimer(flagVal, benchmark, func) {
	const requestRef = useRef();
	const lastUpdateTimeRef = useRef(0);
	const progressTimeRef = useRef(0);
	
	const dispatch = useDispatch();

	const update = (time) => {
		requestRef.current = requestAnimationFrame(update);
		if (!flagVal) return;
		if (!lastUpdateTimeRef.current) {
			lastUpdateTimeRef.current = time;
		}
	
		const deltaTime = time - lastUpdateTimeRef.current;
		progressTimeRef.current += deltaTime;
	
		if (progressTimeRef.current > benchmark) {
		dispatch(func());
		progressTimeRef.current = 0;
		}
		lastUpdateTimeRef.current = time;
	};

	useEffect(() => {
		requestRef.current = requestAnimationFrame(update);
		return () => cancelAnimationFrame(requestRef.current);
	}, [flagVal]);
}

• 使用useRef创建了三个引用变量requestRef、lastUpdateTimeRef和progressTimeRef，用于存储定时器的状态和进度。
• requestRef用于存储当前动画帧的引用， lastUpdateTimeRef用于存储上一次更新的时间戳，progressTimeRef用于存储已经过去的时间。
• 在update函数中实现定时器逻辑。
• 首先使用requestAnimationFrame来获取下一帧的引用，并存储到requestRef.current中，以实现流畅的动画效果；
• 然后通过flagVal的值，来决定是否退出函数；
• 接着如果没有lastUpdateTimeRef.current的值，就将当前的时间戳(time)存储到里面。
• 创建deltaTime，它的值为当前时间戳和lastUpdateTimeRef.current的时间差，将每次更新得到的deltaTime都添加到progressTimeRef.current中，记录累计过去的时间；
• 如果这个累计值大于我们设定的时间间隔benchmark，就执行传入的函数，执行完毕后，将累计时间清零；
• 最后将当前时间戳存储在lastUpdateTimeRef.current中，以便下一次调用时使用。
• 在使用这个定时器时，我们传入应用的状态属性isRunning作为flagVal来判断是否需要退出函数，speed作为benchmark来和累积值做对比，控制形状的下移动画的速度，moveDown作为func来实现方块下移的动作。

总结

本项目通过数组实现了基本的游戏静态画面，动画部分使用了requestAnimationFrame，游戏复杂的状态管理借助了更简洁的RTK。

如果你仔细观察项目代码，会发现我还使用了第三方库Redux Persist来存储最高分数。

如果你想要动手实验一下我在文章中提到的逻辑和状态管理，我准备了starter仓库，它包含了基础的框架和样式，你可以在此基础上搭建属于你的俄罗斯方块，当然你也可以在我的项目基础上添加新的内容，如不同的关卡（下落速度不同），将按键和键盘绑定等。

希望阅读这篇文章让你有所收获，祝你实验愉快！

代码仓库

• 完整项目
• 仅UI部分
• 试玩

在通关 JS 的道路上你一定也遇到过两个难缠的大 BOSS：this的指向和闭包，而且不能逃课。

在使用 React 时，如果你习惯编写 class 组件，就绕不开this；如果你使用函数组件，就一定会用到 React Hooks，而 React Hooks 又大量使用闭包。（闭包真的无处不在呢！）

本文将用代码示例，仿写一个简化版的 useState Hook，浅析闭包在 React 中的应用。当然本文的代码示例不代表 React 源码的真实情况。

前置条件

想要彻底理解本文内容需要你：

• 对 JS 闭包有大概了解。不太了解也没关系，我会在本文回顾。
• 浏览过 React Hooks 文档，最好是使用过 React Hooks。

Let's get our hands dirty!

“闭包”是什么？

请允许我引用来自《你不知道的 JavaScript》对闭包的定义：

当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。

第一次读到这句话的时候，我深刻地体会到了什么叫“每一个字我都认识，但是我完全不知道它说了什么”的绝望。现在回看，其实《你不知道的 JavaScript》的章节设计得很好，想要真的理解闭包这个概念，推荐熟读前面词法作用域部分，了解了作用域，如何查找变量，闭包问题也就引刃而解了。

对于我个人来说，开悟的那一刻是当我把闭包的英文closure转换成动词词组close over来理解的那一刻。close就是打包了当前作用域，而over是超越了自己的作用域，在作用域之外也可以执行。

顺便提一句，很多概念直接通过英文来理解会容易很多，另一个例子是作用域的英文：scope。技术书能读英文原版就读原版，比方说《JavaScript 忍者秘籍》，很好的一本书，但是中文翻译了个啥？？？

废话就说这么多，请看一个经典的代码示例：

function addOne() {
  let num = 1;
  return function inner() {
    num = num + 1;
    return num;
  };
}

const outer = addOne();

console.log(outer()); // 2
console.log(outer()); // 3
console.log(outer()); // 4
console.log(outer()); // 5
num = 999; // 报错

让我们一起看看在上面的代码片段发生了什么？

• 当我们在调用outer函数的时候，实际调用的是addOne的内部的inner函数。
• inner函数引用了其作用域之外的num的值。
• inner函数在自己的作用域（即addOne函数）之外（即outer函数）中执行。
• 我们通过在addOne函数中返回inner函数（close），并在外部调用（over）实现了一个经典的闭包（closure）。

而通过打印到控制台的结果，发现实现了两个效果：

1. num为私有变量，尝试在全局修改变量的值会报错。私有变量也是闭包的常用场景之一。
2. 反复调用outer函数可以实现数字的等差累加（+1），也就是说outer是一个有状态的函数（stateful function）。

闭包与有状态函数（stateful function）

有状态函数就是利用闭包，使得函数拥有内部状态，这样每一次调用函数会基于上一次的结果产生不一样的结果。（可以对比纯函数的概念理解）

看到这里你是不是想到了什么？React 不就是利用 React Hooks 对组件进行状态管理嘛？！

仿写 useState

编写 useState 函数

那让我们进入正题，从仿写useState开始。

根据useState的结构，可以得出如果编写一个useState函数的话，需要返回一个数组，包含一个值和一个相关的 setter 函数：

function myUseState(initValue) {
  let _value = initValue;
  const state = _value;
  const setState = (newValue) => {
    _value = newValue;
  };
  return [state, setState];
}

让我们看看上面的代码片段发生了什么：

• useState函数返回了一个数组，这个数组包含两个变量：state和一个 setter 函数setState。
• useState函数通过内部变量_value记住了我们传入的初始值，setState引用了这个值，并做修改。

在真实的 React 中，我们是通过React.useState来调用这个 hook，那我们需要调整一下上面这个函数的写法，将函数封装在 React 中。

我们先写个简单的练手，把前文的outer函数改写一下：

const outer = (function addOne() {
  let num = 1;
  return function inner() {
    num = num + 1;
    return num;
  };
})();

console.log(outer()); // 2
console.log(outer()); // 3
console.log(outer()); // 4
console.log(outer()); // 5

利用 IIFE 将代码封装后和之前的输出结果一致，同理就可以把myUseState函数改写为：

const MyReact = (function () {
  function myUseState(initValue) {
    let _value = initValue;
    const state = _value;
    const setState = (newValue) => {
      _value = newValue;
    };
    return [state, setState];
  }
  return { myUseState };
})();

让我们测试一下使用：

const [count, setCount] = MyReact.myUseState(1);

console.log(count); //1
setCount(count + 1);
console.log(count); //1

为什么setCount失效了？让我们来分析一下调用setCount(count + 1)的时候发生了什么：

• setCount是在外部调用了setState函数（over）
• setState可以访问和修改myUseState函数内部_value的值（close）
• setState是一个闭包，并且当我们在调用setCount(count + 1)时，确实改变了_value的值
• 但count拿到的值是返回数组的第一项，并不持续追踪_value值的变化

让我们再回到闭包的概念：

当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。

很容易以为误闭包记住的是值，但实际上闭包 close（记住）的是作用域。那我们只需要把state也修改为_value的闭包，让 state 也记住它的作用域就可以了：

const MyReact = (function () {
  function myUseState(initValue) {
    let _value = initValue;
    const state = () => _value; //state 为 _value 的闭包
    const setState = (newValue) => {
      _value = newValue;
    };
    return [state, setState]; //外部可以调用 state
  }
  return { myUseState };
})();

对应打印到控制台的代码也要修改：

const [count, setCount] = MyReact.myUseState(1);

console.log(count()); //1
setCount(count() + 1);
console.log(count()); //2

编写函数组件

让我们继续：

在真实的 React Hook 的使用场景中，我们是在一个函数组件中调用 Hook，让我们边调整边完善：

function MyComponent() {
  const [count, setCount] = MyReact.myUseState(1);

  return {
    //此处应该为 JSX
  };
}

假设返回的 JSX 是一个可以展示count的值的标签，以及一个按钮，每次点击之后count的值加 1。

为了简化案例，我们把 JSX 改写为打印到控制台，这样 return 返回的对象就包含两个方法：

• 一个render方法，在控制台输出count的值；
• 一个click方法，模拟按钮，每次调用改变count的值。

function MyComponent() {
  const [count, setCount] = MyReact.myUseState(1);

  return {
    render: () => console.log(count),
    click: () => setCount(count + 1),
  };
}

这样我们就构建好了一个函数组件。

编写渲染方法

通常我们使用ReactDOM.render（要渲染的内容，在哪里渲染）将函数组件渲染到页面，那么我们的仿写还差一个渲染方法：

const MyReact = (function () {
  function myUseState(initValue) {
    ...
    return [state, setState];
  }

  function myRender(Component){
    const _c = Component();
    _c.render();//在控制台打印状态
    return _c;
  }

  return { myUseState, myRender };
})();

由于在编写函数组件的时候，我们返回的render方法是() => console.log(count)，直接在控制台打印状态，所以我们对myUseState要稍作修改：

const MyReact = (function () {
  let _val; //放在最外层
  function myUseState(initVal) {
    const state = _val || initVal;//不需要使用函数
    const setState = (newVal) => {
      _val = newVal;
    };
    return [state, setState];
  }
  ...
  return { myUseState, myRender };
})();

现在完整的代码为：

const MyReact = (function () {
  let _value; //在 MyReact 最外层声明变量
  function myUseState(initValue) {
    const state = _val || initVal; //不需要使用函数
    const setState = (newValue) => {
      _value = newValue;
    };
    return [state, setState];
  }
  function myRender(Component) {
    const _c = Component();
    _c.render(); //在控制台打印状态
    return _c;
  }
  return { myUseState, myRender };
})();

function MyComponent() {
  const [count, setCount] = MyReact.myUseState(1);

  return {
    render: () => console.log(count),
    click: () => setCount(count + 1),
  };
}

我们来查看一下调用效果：

var App = MyReact.myRender(MyComponent); //1
App.click();
var App = MyReact.myRender(MyComponent); //2

简要分析一下在这个代码片段里发生了什么：

• MyReact.myRender方法对我们编写的组件MyReactComponent进行调用，直接将count的值打印到控制台，同时也暴露了click方法；
• 使用App.click调用暴露的方法，在非setCount的词法作用域调用setCount方法（over），修改了之前的_val值（close）；
• 当我们再次利用myRender方法获取count值时，count拿到的是修改后_val的值，就从1变成了2。

做得不错！

但往往我们在一个函数组件中使用不止一个useState：

function MyComponent() {
  const [count, setCount] = MyReact.myUseState(1);
  const [text, setText] = MyReact.myUseState('freeCodeCamp');

  return {
    render: () => console.log({ count, text }), //同时展现两个变量
    click: () => setCount(count + 1),
    type: (newText) => setText(newText), //假设有一个输入框
  };
}

打印控制台就会出现诡异的效果：

var App = MyReact.myRender(MyComponent); //{"count": 1, "text": 1}
App.click();
var App = MyReact.myRender(MyComponent); //{"count": 2, "text": 2}

这是因为我们只有_val这一个值来存储变量，这个时候我们就需要引入数组：

const MyReact = (function () {
  let hooks = [];
  let idx = 0;
  function myUseState(initVal) {
    const state = hooks[idx] || initVal;
    const _idx = idx; //记住这个值
    const setState = (newVal) => {
      hooks[_idx] = newVal; //调用 setState 修改的是创建 state 同索引所指向的值
    };
    idx++; //这样才能在 hook 数组中记录下一个值
    return [state, setState];
  }

  function myRender(Component) {
    idx = 0; //每一次渲染的时候，索引要回到 0
    const C = Component();
    C.render();
    return C;
  }
  return { myUseState, myRender };
})();

重新调用：

var App = MyReact.myRender(Component); //{"count": 1, "text": 'freeCodeCamp'}
App.click();
var App = MyReact.myRender(Component); //{"count": 2, "text": 'freeCodeCamp'}
App.setText('awesome!');
var App = MyReact.myRender(Component); //{"count": 2, "text": 'awesome!'}

这里要稍微解释一下为什么在myRender函数中，一定要将idx的值重新设置为0。

因为每一次调用MyReact.myRender都是独立的，如果不将索引设置为0的话，多次调用useState会将在上次索引上继续索引，这样上次索引的记录就不会被重写，每次渲染Component时就会返回同样的状态值和 setter 函数。

总结

探索闭包和 React Hooks 之间的关系是一段有趣的旅程。

你也可以尝试仿写其他 hook 方法。

希望这篇文章可以启发你，在以后的打怪之路上优雅地理解和利用闭包。

参考资料

Swyx - Deep dive: How do React hooks really work?
Rudi Yardley - React hooks: not magic, just arrays

对于一名高效工作的前端开发者来说，了解 JavaScript 中的 DOM 和事件是如何运行非常重要。

本文将讲解 DOM 是什么以及如何运行的。

DOM 是什么

DOM 的全称是文档对象模型，是连接 JavaScript 和 web 浏览器之间的接口。

借助 DOM，你可以编写 JavaScript 来创建、修改、删除 HTML 元素，设置样式、类别和属性，监听以及响应事件。

HTML 文档生成 DOM 树之后，你就可以与之交互。DOM 是一个复杂的 API，包含与 DOM 树交互的方法和属性。

你可以在这个网站视觉化 DOM。

DOM 是如何运行的 – 幕后揭秘

DOM 的组织形式非常巧妙。顶层元素被称作EventTarget。你可以借助下图更好地了解工作原理。

EventTarget接口由可以接收事件、并且可以创建监听器的对象实现。换句话说，任何事件目标都会实现与该接口有关的这三个方法。虽然 Element 及其子项、Document 和 Window 是最常见的事件目标（EventTarget），但其他对象也可以是。

Window 代表了浏览器窗口。所有全局的 JavaScript 对象、函数和变量都自动归属于 window 对象。全局变量是 window 对象的属性，全局函数是 window 对象的方法。即便是文档对象（HTML DOM）也是 window 对象的属性。

window.document.getElementById("header");

//两者相同

document.getElementById("header");

Nodes 归属于 DOM（即文档对象模型）。在 DOM 中，如元素、属性、文本等都被组织在一个分层级的树状结构中，相互为子或父元素。这些个体就被称为 node（节点）。

上图中的 Node 可以被 JavaScript 对象表示。我们通常使用document.querySelector(), document.getElementById()等方法来调用这些节点。

现在让我们看看文档。

如何使用 DOM 来选择、创建和删除元素

借助 DOM，我们可以使用 JavaScript 来选择、删除和创建元素。

如何选择元素

JavaScript 中有各种各样的方式来选择 HTML 元素：

• document.getElementById();
• document.getElementByClassName();
• document.getElementByTagName();
• document.querySelector();
• document.querySelectorAll();

如何使用 document.getElementById() 方法

getElementById()方法返回的元素 id 与传入的字符串匹配。因为 HTML 元素的 id 是唯一值，所以这种方式的速度最快。

例子:

const ele = document.getElementById("IDName");
console.log(ele); // 打印对应id名称的元素

如何使用document.getElementByClassName()方法

document.getElementByClassName()返回一个HTMLCollection，这个集合中的元素类名与传入的字符串匹配。我们可以同时搜索多个类别名称，传入的时候用空格隔开，它会实时返回的 HTMLCollection。

“实时”是什么意思？就是说，一旦我们给传入的类名添加一个元素，HTMLCollection 会自动获取这个新的元素。

例子:

const ele = document.getElementByClassName("ClassName");
console.log(ele); // 打印实时HTMLCollection

如何使用document.getElementByTagName();方法

document.getElementByTagName()返回一个HTMLCollection，这个集合中的元素标签与传入的字符串匹配。可以对任何 HTML 元素调用这个方法，它会返回实时的 HTMLCollection。

例子:

const paragraph = document.getElementByTagName("p");
const heading = document.getElementByTagName("h1");

console.log(paragraph); // p 元素 HTMLCollection
console.log(heading); // h1 元素 HTMLCollection

如何使用 document.querySelector() 方法

document.querySelector()返回满足传入条件的第一个 HTML 元素。在这个方法中我们可以传入类名、id和标签名。参见例子：

const id = document.querySelector("#idname"); // 使用id
const classname = document.querySelector(".classname"); // 使用类名
const tag = document.querySelector("p"); // 使用标签名

选择规则：

• 若使用类别名，在开头要添加(.)，如 (".classname")
• 若使用 id， 在开头要添加(#)，如("#id")
• 若使用标签，可以直接使用标签名，如("p")

如何使用 document.querySelectorAll() 方法

document.querySelectorAll()是querySelector方法的延伸。这个方法返回所有匹配传入值的元素。该方法返回一个不会实时更新的 NodeList。

const ele = document.querySelectorAll("p");
console.log(ele); // 返回 p 标签的 NodeList

注意： HTMLCollection 是实时更新的，但是 NodeList 并不是。

如何创建元素

你可以在 JavaScript 中创建 HTML 元素，并且动态地添加到 HTML 中。可以使用document.createElement()来添加元素，在括号内传入元素的标签名。

元素创建成功之后，可以添加类名，属性以及该元素的文本内容。

例子：

const ele = document.createElement("a");
ele.innerText = "Click Me";
ele.classList.add("text-left");
ele.setAttribute("href", "www.google.com");

// 类似于以下标记
// <a href="www.google.com">Click Me</a>

// 在 HTML 中更新已有的元素
document.querySelector(".links").prepend(ele);
document.querySelector(".links").append(ele);
document.querySelector(".links").before(ele);
document.querySelector(".links").after(ele);

在上述例子中，我们在 JavaScript 中创建了一个 anchor 标签，并且添加了类名和属性。在 HTML 中更新这个元素有以下四种方法：

• prepend()：在父节点的第一个子节点之前插入数据
• append()：对位于最后一个索引的元素之后插入数据或内容
• before()：在选定的元素前插入数据
• after()：在选定的元素后插入数据。也可以说是在匹配的其父节点的子节点列表之后插入。（可以不作为元素插入，作为相邻的文本内容插入。）

如何删除元素

我们已经了解了如何使用 JavaScript 创建元素以及如何将它添加到 HTML 中。但是如果我们想要删除一个 HTML 元素呢？很简单！只需要对这个元素调用remove()方法。

例子：

const ele = document.querySelector("p");

// ele被点击后就会被删除
ele.addEventListener('click', function(){
	ele.remove();
})

如何通过 JavaScript 来控制 CSS

我们已经学习了如何通过 JavaScript 来控制 HTML，现在我们来学习如何通过 JavaScript 来控制 CSS，帮助你动态地更改页面。

如果想要通过点击一个元素，就更改这个元素的背景颜色的话，可以通过 JavaScript 来实现。

语法如下：

const ele = document.querySelector("desired element");

ele.style.propertyName = value;
// e.g.
//ele.style.color = red;

当使用 JavaScript 来修改 CSS 属性的时候，需要注意在 CSS 中 - 用来连接单词，如 background-color但在 JavaScript 中我们使用 backgroundColor（驼峰样式）。

例子：

const ele = document.querySelector("div");
ele.style.backgroundColor = "red";

假设你已经给项目编写好了 CSS，你希望通过 JavaScript 来添加类名，可以使用classList。

例子：

const ele = document.querySelector(".link");
ele.classList.add("bg-red"); // 为已经存在的列表添加 bg-red 类名
ele.classList.remove("pb-4");// 为已经存在的列表删除 pb-4 类名
ele.classList.toggle("bg-green"); // 将 bg-red 类切换到现有的类列表中，这意味着如果它已经存在，那么它将被删除，如果它不存在，它将被添加。

当我们使用classList时，直接对元素进行添加、删除或切换类。这就像在更新现有的类。

element.className的特别之处在于，它删除了所有现有的类别，然后添加一个新的类别。

例子：

const ele = document.querySelector(".link");
ele.classList.add("bg-red"); // 在现有的类别中添加 bg-red 类别
ele.classList.remove("pb-4");//从现有的类别中删除 pb-4 类别

ele.className = "p-10"; // 删除所有现有类别，添加 p-10

如何使用事件处理器

对象状态的改变被称作为事件。对事件做出反应的过程被称为事件处理。

当用户点击鼠标、让鼠标在元素上滑过、按键等时，事件就发生了。所以当你想在事件发生时做一些事情的话，就可以使用事件处理器来引发这个事件。

我们使用事件处理器在事件发生的时候来执行一些 JavaScript 代码。在 JavaScript 中有许多不同的事件处理器（这里是一份简单的列表），但将事件处理器添加到元素的方法相同。

语法如下：

const ele = document.querySelector("a");

ele.addEventListener("event", function(){
	// 回调函数
});

你可以使用的事件

• click（点击鼠标）
• mouseover（鼠标移动到某个元素）
• mouseout（鼠标离开某个元素）
• keypress（按下键盘）
• keydown（按下键盘）

这里是使用 “click” 事件的例子：

const ele = document.querySelector("a");

ele.addEventListener("click", function(){
	ele.style.backgroundColor = "pink";
});

事件传播：冒泡和捕获

事件传播决定了元素接收事件的顺序。有两种处理 DOM 中事件传播顺序的方式：事件冒泡和事件捕获。

什么是事件冒泡

当一个事件发生在一个组件时，首先会在该组件上触发事件处理器，然后传播到它的父组件，一直向上到其他的父组件。

事件处理器的默认情况时从中心组件一路向外到最外层的组件传播。

什么是事件捕获

这个过程和冒泡刚好相反。事件处理器首先作用在父组件，然后再作用到触发处理器的组件。

简言之，事件首先由最外层的元素捕获，然后传递到最内层的元素。这个过程也被称作涓涓细流。

让我们看一下下面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
    <style>
        nav{
            display: flex;
            justify-content: center;
            padding: 30px;
        }

        nav li{
            list-style: none;
            padding: 5px;
        }

        nav li a{
            text-decoration: none;
            padding: 20px;
        }
    </style>
</head>
<body>
    
    <div>
        <nav>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </nav>
    </div>

    <script>
        const navbar = document.querySelector("nav");
        navbar.addEventListener('click', function(){
            navbar.style.backgroundColor="green"
        });

        const anchor = document.querySelector("a");
        anchor.addEventListener("click", function(){
            anchor.style.backgroundColor="pink";
        })
    </script>
</body>
</html>

代码效果如图：

仔细看上面的代码示例，我分别在nav标签和anchor标签添加了事件处理器：当你点击nav的时候背景色会变成绿色，而当点击anchor标签的时候，背景色会看成粉色。

但是当你点击anchor标签的时候，anchor 和 nav 的背景色都发生了变化。这是因为事件冒泡。

当你只点击 nav 元素的时候发生的事情：

当你只点击 anchor 元素的时候发生的事情：

停止事件传播的方式是在事件发起的元素的事件处理器上使用 stopPropagation()。这样就可以阻止 nav 元素因为上面的原因被激活。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
    <style>
        nav{
            display: flex;
            justify-content: center;
            padding: 30px;
        }

        nav li{
            list-style: none;
            padding: 5px;
        }

        nav li a{
            text-decoration: none;
            padding: 20px;
        }
    </style>
</head>
<body>
    
    <div>
        <nav>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </nav>
    </div>

    <script>
        const navbar = document.querySelector("nav");
        navbar.addEventListener('click', function(){
            navbar.style.backgroundColor="green"
        });

        const anchor = document.querySelector("a");
        anchor.addEventListener("click", function(e){
            e.stopPropagation();
            anchor.style.backgroundColor="pink";
        })
    </script>
</body>
</html>

如何遍历 DOM

“优秀的 JavaScript 开发者应该知道如何遍历 DOM — 即从一个元素选择到另一个元素的行为 ” – Zell Liew

现在我们来看看为什么遍历会比document.querySelector()方法好用，以及如何像专家一样遍历。

有三种遍历 DOM 的方式：

• 向上
• 向下
• 相临

如何向上遍历 DOM

有两种向上遍历 DOM 的方式：

• parentElement
• closest

parentElement是选取父元素的属性，如下：

const ele = document.querySelector("a");
console.log(ele.parentElement); // <div>

parentElement可以完美地选择上一层的元素，而closest可以让你选择上几层的元素。 closest可以选择符合选择器最近的祖先元素。

使用closest的例子：

<article id="target">
  <h1 id="heading">This is the main heading</h1>
  <div id="outer-div">
    This is the outer div
    <div id="inner-div">This is the inner div</div>
  </div>
</article>

const innerDiv = document.querySelector("#inner-div");
console.log(innerDiv.closest("#target")); // article#target

在上述代码中我们选择离#inner-div最近并且 id 为#target的元素。

如何向下遍历 DOM

我们可以在选择器中使用children方法来向下遍历，就可以选择到直属子元素。

例子：

<div>
    <a href="#">Link-1</a>
    <a href="#">Link-2</a>
    <a href="#">Link-3</a>
    <a href="#">Link-4</a>
</div>

const ele = document.querySelector("div");
const child = ele.children;

console.log(child); // 返回 HTMLCollection
// div 中的 4 个元素

如何遍历相邻的 DOM

遍历相邻的 DOM 很有趣，有两种主要的方法：

• previousElementSibling
• nextElementSibling

使用previousElementSibling方法，我们可以选择 HTML 中的前一个元素：

<div>
    <a href="#">Link-1</a>
    <h1>Heading</h1>
</div>

const ele = document.querySelector("h1");
console.log(ele.previousElementSibling); // <a href="#">Link-1</a>

使用nextElementSibling，我们可以选择 HTML 中的后一个元素：

<div>
    <a href="#">Link-1</a>
    <h1>Heading</h1>
</div>

const ele = document.querySelector("a");
console.log(ele.nextElementSibling); // <h1>Heading</h1>

总结

希望你已经了解 JavaScript 中的 DOM 是如何工作的，感谢阅读！

你可以在以下地方关注我：

• Twitter
• LinkedIn
• Instagram

网站安全和漏洞是一个全球性问题，网络安全漏洞正在增加。过去几年，这类案件的平均数量有了显著增长，2021 年达到了历史最高水平。

因此，在本教程中，我们将讨论 DOM XSS 跨站脚本安全问题以及它们对数据产生的影响。请务必阅读到最后。让我们从复习 DOM XSS 跨站脚本安全的基础知识开始。

什么是跨站脚本？

跨站脚本（也称为 XSS）是一种网站安全问题，当用户使用脆弱的应用程序时，会危害用户信息和数据。攻击者可以利用此漏洞绕过同源策略，该策略将两个网站彼此隔离。

攻击者可能会利用 XSS 假装自己是用户，执行用户将会执行的操作，并获取用户的信息。如果攻击者拥有权限和特权，攻击者便可以完全访问用户的信息。持续恶化下去，攻击者还可以接管网站的整个操作和性能。

为了帮助你更好地理解这些类型的攻击，我们将讨论 XSS 的运作原理和方法相关的基础知识。

XSS 如何运作？

跨站脚本利用技术操纵脆弱网站，使其向用户发送危险的 JavaScript。这使攻击者能够在脚本获得用户系统访问权限时完全获得用户在网站的权限。但这一切的开始是用户执行 JavaScript。

XSS 攻击的类型

反射型 XSS

这种恶意脚本来自 HTTP 请求。这是 XSS 攻击的最基本类型，在这种情况下，应用程序接收到恶意数据后立即向用户反映。

攻击者的负载必须是发送到服务器的请求的一部分，然后反映到用户的应用程序上并执行。

其中一个例子是攻击者想方设法让某人点击钓鱼链接，然后攻击才生效。

存储型 XSS

这种恶意脚本来自网站的数据库。攻击者在服务器上输入恶意请求，除非手动处理，否则它可能永久存在。

例如，攻击者可以在评论字段中输入恶意脚本，该脚本将对访问该页面的所有人显示。即使没有直接与脚本互动，页面访问者也可能成为此攻击的受害者

基于 DOM 的 XSS

这种是更高级的漏洞，它存在于客户端代码中的，而不是在服务器代码中。基于 DOM 的 XSS 既不是反射型的，也不存在于服务器上，而是存在于页面的文档对象模型（DOM）中。Web 应用程序读取恶意代码并将其作为 DOM 的一部分在浏览器中执行，这更难检测，因为它不通过服务器传递。

基于 DOM 的 XSS 攻击中涉及的安全漏洞对于大多数网站来说是一个严峻的问题。我们将讨论一些开源 Web 构建平台（例如 WordPress）上最常见的基于 DOM 的 XSS 风险。

攻击者在受害者的浏览器中执行恶意 JavaScript 代码，窃取敏感信息或以受害者的名义执行其他有害的操作。

以下是一个例子：

<script>
  //该函数接受一个用户提供的 URL 并展示在页面
  function displayURL(url) {
    // URL 通过 innerHTML 获得，执行 JavaScript 代码
    document.getElementById('display').innerHTML = url;
  }
</script>

<!-- 用户的输入传递给 displayURL 函数 -->
<p>Enter a URL to display: <input type="text" id="user-input" /></p>
<button onclick="displayURL(document.getElementById('user-input').value)">
  Display URL
</button>

<!-- URL 在 div 中显示 -->
<div id="display"></div>

请注意本教程仅用于教学目的，帮助你识别和防护 XSS。你不可以复刻类似攻击。

DOM XSS – WordPress 漏洞

WordPress 的 DOM XSS 攻击的主要目标是它的用户。用户输入他们的详细信息，账户和网站凭证以访问他们的 WordPress 站点，这就是 DOM XSS 攻击试图在线损害的内容。攻击者可以使用 DOM XSS 获取用户信息和详细信息，只需点击一下。

这也包括你的 cookies、信息等，使它成为最常见的 WordPress 安全漏洞。

以下是你应该牢记的一些顶级 WordPress 网站安全问题，以确保更好的跨站脚本安全

访问用户私人信息

一个最常见的 WordPress 安全漏洞与 DOM XSS 攻击有关，攻击者可以获得有用的信息，甚至完全控制用户的网站。这通常会使事态迅速升级，导致完全数据泄露。

假冒用户

攻击者可以假装是用户，与受害者的在线用户，客户互动，以获得信息。

破坏网站

另一个相关的 XSS 安全问题是，攻击者破坏网站并从用户那里夺取访问权限。这包括在网站上显示与原始网站不同的内容（或不是来自原始网站的内容）。

其他情况可能涉及改变 WordPress 在线的外观。其他人也可能通过安装特定工具使用网站。

社交工程

更严重的情况下，攻击者可能通过网络钓鱼影响 WordPress 网站。这是一个常见的网站构建平台安全漏洞，我们马上就要详细讨论。

XSS 跨站脚本安全问题对每个网站的影响各不相同。然而，WordPress 网站通常面临更高的风险，因为用户在网站上保存了个人信息。如果用户是管理员，风险进一步增加，因为攻击者可以破坏整个 WordPress 网站。

DOM XSS 和非开源网站构建平台

不同于 WordPress，如 Weebly、Squarespace、Webflow 和 Wix 这类网站构建器是非开源平台。它们允许用户通过拖放式 DIY 功能，在没有任何代码或设计经验的情况下，直观地为业务创建网站。这些平台也努力保护用户的安全。

有大量有用的工具、选项、易于整合的仪表板和托管方式，供用户使用并信任这些平台。当然，网站安全问题对于这些平台的大多数用户来说是一个主要关注点。

许多网站构建器都在努力保护用户网站免受黑客威胁。但是在所有可用的网站构建器中，我相信 Wix 在遵循 NIST 网络安全框架方面做得最好，并已成为该领域的重要贡献者。

Wix 使用如下工具保护用户不受这类攻击的影响：

• 第三方更新项目，防止 DOM XSS 攻击
• 安全的套接字层，防止网站上的用户被未经授权的访问
• 全天候的安全网络托管，防止任何不需要的登录或网络钓鱼攻击
• 只有给原始所有者控制和访问限制网站的管理员特权
• 显示弱密码并建议更难解密的密码

防御 XSS 攻击的方法

防御 XSS 攻击通常需要多维度的方法，以确保服务器和应用程序不受各种类型攻击的影响。

防御 XSS 攻击的最佳方法是适当地对用户输入进行清理。这意味着确保任何用户输入被正确编码，浏览器则不能将其解释为代码。

此外，你可以使用 web 应用程序防火墙（WAF）来帮助识别和阻止 XSS 攻击。最好将软件和 web 应用程序保持在最新版本，因为许多 XSS 漏洞可以通过最新的安全补丁来解决。

输入验证

这种编程技巧确保只有格式正确的数据才能进入软件系统。网站可以允许或阻止某些值，以确保不会有 XSS 侵入其服务器。

转义或编码用户输入

编码和转义将用户输入转换为更安全的形式。编码用更安全的等效物替换特殊字符（例如，将 < 转换为 &lt），而转义则添加特殊字符以防注入攻击。

执行内容安全策略（CSP）

内容安全策略帮助管理员通过限制页面在特定时间内加载的资源来减轻 XSS 攻击的影响。这些资源可以包括可能损害客户端和服务器的脚本和图像。

底线

DOM XSS 跨站脚本安全问题对网站用户是一个严峻的问题。但是封闭的代码网站构建平台提供的，如：管理员权限、密码最佳实践、第三方更新等功能，使它们比许多开放代码平台更加安全。

你可以通过过滤输入来防止 XSS 攻击。你也可以通过只接受有效输入来实现。

输出时对数据进行编码，该过程应在 HTTP 响应中完成，以免被读取为活跃内容。根据输出的上下文，可能需要更复杂的编码，例如应用 URL、JavaScript、CSS 和 HTML 编码的组合。

检查响应标头，以便浏览器对内容有适当的解释。

最后，使用内容安全策略（CSP）来最大程度地降低 XSS 攻击的严重性。

<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline';"
/>

CSP 允许网站从同一个源（即你自己的网站）加载脚本和样式，但它将阻止来自外部来源的脚本和样式。它还将允许使用内联脚本和样式，但阻止 eval() 语句，因为这个语句可用于执行任意代码。

当然，这只是一个简单的例子，你可以根据自己的特殊需求自定义 CSP。有关如何使用 CSP 来防御 XSS 攻击的更多信息，你可以参考内容安全策略级别 2 规范。

图片来自 Unsplash（Florian Olivo）。

我们都希望构建强大的应用，避免不必要的渲染。有一些钩子可以帮助你实现这个愿望，但你可能不确定钩子的选择和使用时机。

我们将通过本文学习 useCallback 和 useMemo的区别，以及如何衡量在代码中使用它们的收益。

在我们开始之前，请注意以下用于优化 React 的方法实际上是不得已的选择。代码本身可能有许多改进空间，在改进代码前，本文性能提升技巧可能还派不上用场。

但了解这些工具，以及知道如何使用它们很有必要。

帮助你理解文章的资料

• useCallback 和 useMemo 的 Beta 版本官方文档
• 示例项目源码
• 示例项目 Demo

与往常一样，我提供了一个示例项目，以便你在简化的环境中测试本文说明的所有内容。示例项目是对你将要学习要点的总结。

在开始比较这两个钩子之前，让我们回顾一些必要的背景概念。

什么是引用相等（Referential Equality）

当 React 对比 useEffect、 useCallback的依赖数组的值，或者传入子组件的 props 值时，使用的是 Object.is()。

详细介绍可以查看 Object.is，简言之：

• 原始值是相等的（上文链接有少数例外）。
• 非原始值指向内存中相同的对象。

译者注：原始值指的是数据类型为基本数据类型（如：number、string、boolean 等）时，两个值相等的数据在严格模式下（===）也是相等的。非原始值值的数据类型是引用类型（如：object），由于引用类型存储的是对象的引用，所以只有当两个对象引用相同的底层对象，它们在严格模式下才是相等的。这种比较方式被称为“引用相等”。

简化示例如下：

"string" === "string" // true
0 === 0 // true
true === true // true
{} === {} // false
[] === [] // false

const f = () => 'Hi'
const f1 = f
const f2 = f

f1 === f1 // true
f1 === f2 // true

React.memo 的运行机制

我将简单说明一下React.memo的运行机制（后文也会讲解）。你可以在合适的时候使用它来提升性能。

当想要避免子组件不必要的重新渲染（即便父组件发生了更改），你可以使用 React.memo 打包子组件 – 只要 props 不发生改变，就不会重复渲染。请注意此处是引用相等（译者注：沿用了旧版本 React 的“浅比较”）——子组件不会被重新渲染。

import { memo } from 'react';

const ChildComponent = (props) => {
  // ...
};

export default memo(ChildComponent);

现在你知道 React.memo 的运行机制，让我们开始应用吧。

useCallback 的运行机制

useCallback 是 React 用来优化代码的内置钩子之一。但正如你将看到的那样，它并不是直接为性能提升设计的钩子。

简单来说，useCallback 允许你在组件渲染之间保存 函数定义。

import { useCallback } from 'react';

const params = useCallback(() => {
  // ...
  return breed;
}, [breed]);

使用方法很简单：

• 从 React 引入useCallback，因为它是内置钩子。
• 打包你想要保存定义的函数。
• 像使用 useEffect一样，传入依赖数组，告诉 React 这些存储的值（在这里是函数定义）何时更新。

需要注意的是 函数定义 部分。它存储定义，而不是执行本身，也不是结果——所以每次调用时都会执行该函数。因此，不要使用这个钩子避免冗长的计算。

那么保存函数定义的好处在哪儿呢？

回到引用相等

如果使用的是函数本身，而不是返回值，那么在：

• useEffect 等钩子的依赖数组
• 子组件的 prop、上下文等

要实现渲染之间真正的相等，useCallback就得保存内存中对同一个对象的的引用。

如果不使用这个钩子，每一次渲染函数都会重新指向内存中的另一个引用。即便使用React.memo打包子组件，React 也会认为是不同的函数。

你可以通过示例项目测试这个行为。在没有优化的版本中，每一次在输入框填写内容都会引发子组件的副作用。

在示例中，没有优化的版本只会导致一个虚拟的渲染放缓和重新抓取图片。但假设在一个大型的项目中，会导致客户端执行大量计算，或者服务器的巨大开销。

useMemo 是如何运作的

这是今天的第二个内置钩子。你可以把这个钩子当作直接优化的手段，因为它存储函数的结果，除非依赖数组发生变化，函数不会再次执行。

由于它可以存储函数的结果，防止在组件渲染之间重复执行，因此你可以在两种情况下使用此钩子。

引用相等

和 useCallback 一样，我们也可以通过 useMemo 来实现引用相等——但这次是结果的相等。

如果函数的返回值类型在渲染间会被当作不同的值对待，如对象或者数组，你可以使用 useMemo 来实现引用相等。

import { useMemo } from 'react';

const params = useMemo(() => {
  // ...
  return { breed };
}, [breed]);

从上面例子我们可以得出这样使用 useMemo：

• 由 React 引入 useMemo，因为它是内置钩子。
• 打包你想要保存结果的函数。
• 像使用 useEffect 一样，传入依赖数组，告诉 React 这些存储的值（在这里是函数的返回值）何时更新。

在示例中，函数返回一个对象。 通过 Object.is 我们得知对象是不相等的，因为它们存储了不同的内存地址。但是useMemo可以保存相同的引用。

你可以像之前一样在示例项目中测试这个行为。在未优化版本中，每一次按下键盘，都会重新检索图片。使用 useMemo后，相等的返回值被保持，子组件不在重新检索图片。

昂贵的计算

由于使用 useMemo保存了值，避免函数重复执行，所以我们可以使用它避免不必要的昂贵计算，提高网站的性能。

让我们查看示例项目：

有一个组件，给定一个数字 n，就会打印出第 n 个斐波那契数。但是算法采用的递归版本性能很差。

你会发现有一个常量不断被重复渲染。示例中的性能标尺（Performance Gauge）会改变 state（每秒添加或者删除方块 60 次）。由于 state 一直发生改变，所以计算斐波那契数的函数也在重复执行，即便给定的数字是一样的。

在这种情况下，当你在非优化版本中使用更大的数字，就会发现性能肉眼可见的下降。优化版本只会在你更改滑块中的数字（更改给定数字）时出现性能峰值，但其余渲染将跳过计算并直接提供结果。

这里的问题是，在我们的日常工作中，不会遇到可以称为“昂贵计算”的计算，使用 useMemo 的决定不一定是“总是”或“从不”。

何时优化

到目前为止，你已经了解了通过一些指标确定何时使用不同的钩子来避免不必要的渲染和/或副作用。现在让我们定义一些通用规则来决定在那些不太清楚的情况下到底是否使用这些钩子：

• 回顾你的代码，重新思考代码构建。你会发现最能提升性能的其实是你代码本身。更多信息可以查看 Dan Abramov 的这篇博文。
• 如果不能证明优化可以带来好处，就不要优化——优化也有成本。
• 如果你不希望做额外的工作来证明优化可以带来好处，那请诚实对待自己的内心：其实你也不想优化。

如何衡量性能影响/收益

最重要的优化规则（总是在检查代码之后再使用）是能够衡量更改是否生效以及增益百分比是多少。你这样做不仅是为了可以在下一次绩效评估提高相应的百分比。

当你怀疑存在性能问题或只是想检查代码可以改进部分时，有以下两种选择：

笨拙的方法

我把这个方法也纳入到文章中来，是因为让我们面对现实吧：你一直在到处使用 console.log 调试代码，不是吗？别担心，我和你一样。

尝试衡量性能问题的一种快速方法是找出执行某个动作需要多长时间以及该动作执行了多少次。因此，可以这么做：

const t0 = performance.now();
expensiveCalculation(targetNumber);
const t1 = performance.now();
console.log(`Call to expensiveCalculation took ${t1 - t0} milliseconds.`);
console.count('Expensive Calculation');

但这种方法只能检测出一些你已经怀疑的非常明显的情况。

同时请小心 StrictMode，出于稳定性考虑，它可能会导致 console.count 重复渲染。

现在让我们查看正确的方法。

专业的方法

在这个方法中，你将使用官方的 React 开发者工具来检查代码片段的性能。一旦你在浏览器添加了这个扩展程序，你就可以打开浏览器，搜索 Profiler。

我将通过示例项目演示，你也可以在你自己的项目中测试。

当你点击 record 按钮，然后开始进行你认为需要关注性能的一些行为，profiler 就会保存并且打印出这个过程具体发生的细节和解释。

如在昂贵计算项目中，我们对比的没有优化和 useMemo 版本的结果：

在两个版本中，我分别点击 record 按钮，等待几秒钟，再次点击 record 按钮获取结果。如你所见，在我们准备的极端案例中，可以见到巨大的性能提升。

让我们仔细观察 profiler 中发生了什么：

• 灰色条目是在渲染间没有发生变化的组件，所以不用担心性能方面的问题。
• 绿色和黄色条目是发生变化的组件，你可以看到渲染需要多长时间。
• 如果你点击每一个条目，可以看到更多的解释信息和数据。

我之后会出一篇文章详细介绍 profiler，但是现在让我们看几个使用小技巧：

• 在 settings 图标 General 菜单下，勾选 Highlight updates when components render.。这将显示渲染的内容，并可以检测在某些操作下不被渲染的子组件。
• 在 settings 图标 Profiler 菜单下，勾选 Record why each component rendered while profiling. 这将对正在渲染的组件内容的添加简要说明，或许能帮助你找到哪里需要提升。

总结

如你所见，这两个常被误解的钩子是完全不同的函数，使用的场景也不太相同。现在你可以检查你现在或者过去的项目，来看看是否误用了这些钩子。

在未来 React 或许能够自动完成优化。但在撰写本文时，优化仍是一个应该谨慎对待并经过全面分析的过程。

我希望你觉得这篇教程有用，能帮助你使用 React 构建性能更好的应用程序。谢谢你阅读本文！

什么是 Express？

Express 是一个基于 Node.js 的 Web 框架。

Node.js 是一种搭建网络服务和应用的实用工具。

Express 搭建在 Node.js 之上，提供易于使用的功能来满足 Web 服务器的用例需求。它开源、免费、易于扩展并且非常高效。

可以使用各种各样的预构建的包来处理应用中的各项内容。

点击获取 Express 手册的 PDF 和 ePub 版本。

目录

• 如何安装 Express
• 第一个 "Hello, World"
• 请求参数
• 如何向客户端发送响应
• 如何发送一个 JSON 响应
• 如何管理 Cookies
• 如何处理 HTTP 标头
• 如何处理重定向
• Express 中的路由
• Express 中的模版
• Express 中间件
• 如何使用 Express 提供静态资源
• 如何向客户端发送文件
• Express 中的会话
• 如何在 Express 中验证输入
• 如何在 Express 中清理输入
• 如何在 Express 中处理表单
• 如何在 Express 中处理表单中的文件上传

如何安装 Express

你可以使用 npm 在任何项目中安装 Express。

如果是一个空文件夹，首先使用命令创建一个新的 Node.js 项目：

npm init -y

然后执行：

npm install express

在项目中安装 Express。

第一个 "Hello World"

我们要创建的第一个示例是一个简单的 Express Web 服务器：

请复制以下代码：

const express = require('express');
const app = express();

app.get('/', (req, res) => res.send('Hello World!'));
app.listen(3000, () => console.log('Server ready'));

并将其保存在项目根文件夹的 index.js 文件中，然后通过以下命令启动服务器：

node index.js

你可以打开浏览器并通过 localhost 导航到 port 3000，就会看到 Hello World! 信息。

上面四行代码在幕后做了很多工作：

首先我们通过 express 变量引用 express 包。

通过调用 express() 方法来实例化一个应用。

一旦创建了应用对象，就使用 get() 方法监听来自 / 路径的 GET 请求。

每一种 HTTP 方法都有一个对应的动词：get()、post()、put()、delete()和 patch()：

app.get('/', (req, res) => {
  /* */
});
app.post('/', (req, res) => {
  /* */
});
app.put('/', (req, res) => {
  /* */
});
app.delete('/', (req, res) => {
  /* */
});
app.patch('/', (req, res) => {
  /* */
});

这些方法接受一个回调函数（当请求开始时调用），我们需要处理回调函数。

可以在回调中传入一个箭头函数：

(req, res) => res.send('Hello World!');

Express 在回调中发送两个对象：req 和res，分别代表了请求（Request）和响应（Response）对象。

更多标准可以参考这里和这里。

请求是一个 HTTP 请求，它包含了所有请求信息：包括请求参数、标头、请求体等。

响应是 HTTP 响应对象，会返回给客户端。

在这个回调示例中，我们通过Response.send()方法发送 "Hello World!" 字符串给客户端。

这个方法将字符串作为请求体，传输完毕后关闭连接。

Hello World 示例中最后一行代码启动服务器，并且告诉它在 port3000监听。我们传入一个回调，当服务器准备好接受新请求时调用该回调。

请求参数

我介绍了 Request 对象是如何持有 HTTP 请求信息的。

以下是主要的属性：

如何向客户端发送响应

在 Hello World 示例中， 我们使用响应对象的send()方法来将一个简单的字符串作为响应，之后关闭连接。

(req, res) => res.send('Hello World!');

如果你传入一个字符串，它将Content-Type标头设置为text/html。

如果你传入的是对象或者数组，它将Content-Type标头设置为application/json，并将传入的对象或数组解析为JSON。

之后send()关闭连接。

send()自动设置 Content-Length HTTP 响应标头，不像 end() 需要你手动设置。

如何使用 end() 发送空响应

另一个发送响应的方式，是使用Response.end()方法，这种方法不发送任何响应体：

res.end();

如何设置 HTTP 响应状态

在响应对象使用 status() 方法：

res.status(404).end();

或者

res.status(404).send('File not found');

sendStatus() 是快捷方式。

res.sendStatus(200);
// === res.status(200).send('OK')

res.sendStatus(403);
// === res.status(403).send('Forbidden')

res.sendStatus(404);
// === res.status(404).send('Not Found')

res.sendStatus(500);
// === res.status(500).send('Internal Server Error')

如何发送一个 JSON 响应

当你在 Express 中监听路由上的连接时，回调函数将在每次网络调用时被调用，并带有一个 Request 对象实例和一个 Response 对象实例。

示例：

app.get('/', (req, res) => res.send('Hello World!'));

我们在这里使用 Response.send() 方法，接受任意字符串。

你可以使用JSON，即使用 Response.json()发送到客户端。

它接受一个对象或者数组，并在发送前将其转换为 JSON 格式：

res.json({ username: 'Flavio' });

如何管理 cookies

使用Response.cookie()方法来控制 cookies。

示例：

res.cookie('username', 'Flavio');

这个方法还接受第三个参数，这个参数包含各种选项：

res.cookie('username', 'Flavio', {
  domain: '.flaviocopes.com',
  path: '/administrator',
  secure: true
});

res.cookie('username', 'Flavio', {
  expires: new Date(Date.now() + 900000),
  httpOnly: true
});

一些你可以设置的有用的参数包括：

清除 cookie 可以使用：

res.clearCookie('username');

如何处理 HTTP 标头

如何通过请求获取 HTTP 标头值

可以使用 Request.headers 属性访问所有 HTTP 标头的值：

app.get('/', (req, res) => {
  console.log(req.headers);
});

使用Request.header() 方法获取单个请求标头的值：

app.get('/', (req, res) => {
  req.header('User-Agent');
});

如何为响应改变 HTTP 标头

可以使用 Response.set()改变 HTTP 标头值：

res.set('Content-Type', 'text/html');

Content-Type 标头的便捷方式是：

res.type('html');
// => 'text/html'

res.type('json');
// => 'application/json'

res.type('application/json');
// => 'application/json'

res.type('png');
// => image/png:

如何处理重定向

在 Web 开发中重定向很常见，可以使用 Response.redirect()实现：

res.redirect('/go-there');

这样就创建了一个 302 重定向。

可以使用以下方法创建一个 301 重定向：

res.redirect(301, '/go-there');

你可以指定绝对路径（/go-there）、绝对 URL（https://anothersite.com）、相对路径（go-there）或者 .. 返回上一层：

res.redirect('../go-there');
res.redirect('..');

你还可以重定向回 Referrer HTTP 标头值（如果未设置默认值为 /）：

res.redirect('back');

Express 中的路由

路由是确定调用 URL 时应该发生什么的过程，或者应用程序的哪些部分应该处理特定的传入请求。

在 Hello World 示例中，我们使用了这段代码：

app.get('/', (req, res) => {
  /* */
});

这里创建一个路由，访问根域 URL/，并使用 HTTP GET 方法映射到我们需要的响应。

命名参数

如果想监听自定义请求怎么办？也许我们想创建一个接受字符串并将其作为大写字母返回的服务——我们不希望参数作为查询字符串发送，而是作为 URL 的一部分发送。在这种情况下，我们使用命名参数：

app.get('/uppercase/:theValue', (req, res) =>
  res.send(req.params.theValue.toUpperCase())
);

如果发送请求到 /uppercase/test，我们会在响应体中得到 TEST。

你可以在同一个 URL 中使用多个命名参数，它们都将存储在 req.params.

如何使用正则表达式匹配路径

可以通过一条正则表达式 来匹配多个路径：

app.get(/post/, (req, res) => {
  /* */
});

以上代码将匹配 /post, /post/first, /thepost, /posting/something等路径。

Express 中的模版

Express 能够处理服务器端模板引擎。

模板引擎允许我们向视图添加数据，并动态生成 HTML。

Express 默认使用 Jade。Jade 是 Pug 的旧版本，特指 Pug 1.0。

请注意，由于商标问题，该项目在 2016 年发布第二版时，名称从 Jade 改为 Pug。你仍然可以使用 Jade，又称 Pug 1.0，但往后最好使用 Pug 2.0。

尽管 Jade 的最后一个版本已经陈旧了，但出于向后兼容的原因，它仍然是 Express 中的默认版本。

你可以在任何新项目中使用 Pug 或你选择的引擎。Pug 的官方网站是https://pugjs.org/。

可以使用许多不同的模板引擎，包括 Pug、Handlebars、Mustache、EJS 等。

要使用 Pug，我们必须先安装它：

npm install pug

在初始化 Express 应用程序时，我们需要设置它：

const express = require('express');
const app = express();
app.set('view engine', 'pug');

然后就可以在 .pug 文件中编写模板。

创建一个 about 视图：

app.get('/about', (req, res) => {
  res.render('about');
});

模板路径为views/about.pug:

p Hello from Flavio

该模板创建一个 p 标签，内容为 Hello from Flavio。

你也可以使用以下代码插入变量：

app.get('/about', (req, res) => {
  res.render('about', { name: 'Flavio' });
});

p Hello from #{name}

更多使用 Pug 的信息，可以查看 Pug 指南。

推荐你使用这个在线 HTML 到 Pug 转换器 https://html-to-pug.com/。

Express 中间件

中间件是一个挂钩到路由过程中的函数，在链中的某个点执行任意操作（取决于我们想要它做什么）。

它通常用于编辑请求或响应对象，或者在请求到达路由处理程序代码之前终止请求。

可以通过如下方法将中间件添加到执行栈：

app.use((req, res, next) => {
  /* */
});

这和定义路由类似，但是在 Request 和 Response 实例之后，我们还引用了 next 中间件函数，并分配给了next变量。

我们总是在中间件函数末尾调用next()以便将执行传递给下一个处理程序。除非我们想提前结束响应并将其发送回客户端。

通常我们通过 npm 包来使用预制的中间件。你可以在这里找到中间件列表。

其中一个预制中间件示例就是 cookie-parser，它可以将 cookie 解析为 req.cookies对象。 你可以使用 npm install cookie-parser 命令安装并使用：

const express = require('express');
const app = express();
const cookieParser = require('cookie-parser');

app.get('/', (req, res) => res.send('Hello World!'));

app.use(cookieParser());
app.listen(3000, () => console.log('Server ready'));

我们还可以将中间件函数设置为仅针对特定路由运行（而不是针对所有路由），方法是将其作为路由定义的第二个参数：

const myMiddleware = (req, res, next) => {
  /* ... */
  next();
};

app.get('/', myMiddleware, (req, res) => res.send('Hello World!'));

如果需要存储中间件生成的数据，并传递给后续中间件函数或请求处理程序，你可以使用Request.locals对象。它将该数据附加到当前请求：

req.locals.name = 'Flavio';

如何使用 Express 提供静态资源

通常图片、CSS 被存储在 public子文件夹，并暴露给根目录：

const express = require('express');
const app = express();

app.use(express.static('public'));

/* ... */

app.listen(3000, () => console.log('Server ready'));

如果在 public/有一个index.html文件，当你访问根域 URL（http://localhost:3000）时，就会提供静态资源。

如何向客户端发送文件

Express 提供了一个简便的方法将文件转换为附件传输： Response.download()。

一旦用户点击使用此方法发送文件的路由，浏览器将提示用户下载。

Response.download() 方法允许发送附加到请求的文件，浏览器不会在页面中显示它，而是将其保存到磁盘。

app.get('/', (req, res) => res.download('./file.pdf'));

在应用上下文中的示例：

const express = require('express');
const app = express();

app.get('/', (req, res) => res.download('./file.pdf'));
app.listen(3000, () => console.log('Server ready'));

你可以将文件设置为使用自定义文件名发送：

res.download('./file.pdf', 'user-facing-filename.pdf');

此方法提供了一个回调函数，你可以使用它在文件发送后执行代码：

res.download('./file.pdf', 'user-facing-filename.pdf', (err) => {
  if (err) {
    //handle error
    return;
  } else {
    //do something
  }
});

Express 中的会话

默认情况下，Express 请求是有顺序的，但请求之间没有相互链接，所以没有办法知道这个请求是否来自之前已经执行过请求的客户端。

除非使用某种识别机制，否则用户无法识别请求。

会话就应运而生。

使用会话后，你的 API 或网站的每个用户都将被分配一个唯一的会话，就可以存储用户的状态。

我们将使用 express-session 模块来演示，它由 Express 团队维护。

可以使用以下命令安装：

npm install express-session

安装完毕后，可以通过以下代码实例化：

const session = require('express-session');

它是一个中间件，所以你使用以下代码在 Express 中 安装 它：

const express = require('express');
const session = require('express-session');

const app = express();
app.use(
  session({
    secret: '343ji43j4n3jn4jk3n'
  })
);

编写完毕后，所有应用路由都使用会话。

secret是唯一的必填参数，还有许多可选参数。secret必须为一个唯一的随机字符串。

会话被添加到请求，所以可以通过 req.session访问：

app.get('/', (req, res, next) => {
  // req.session
}

该对象可用于从会话中获取数据，也可用于设置数据：

req.session.name = 'Flavio';
console.log(req.session.name); // 'Flavio'

此数据在存储时被序列化为 JSON，所以可以安全使用嵌套对象。

你可以使用会话将数据传递给稍后执行的中间件，或者稍后根据后续请求检索数据。

会话数据存储在哪里？这取决于你如何设置express-session模块。

会话数据可被存储在：

• 内存，不适用于生产
• 数据库，如 MySQL 或者 Mongo
• 内存缓存，如 Redis 或者 Memcached

在 https://github.com/expressjs/session 中有一个巨大的第三方包列表，可以实现不同兼容性的缓存存储。

所有解决方案都将会话 ID 存储在 cookie 中，并将数据保存在服务器端。客户端将在 cookie 中接收会话 ID，并将它与每个 HTTP 请求一起发送。

我们将引用该服务器端以将会话 ID 与本地存储的数据相关联。

内存是默认设置，不需要你进行特殊操作。这样很便捷，但它仅用于开发目的。

最好是选择 Redis 之类的内存缓存，需要为其设置自己的基础架构。

另一个常用管理会话的包是cookie-session，与 Redis 巨大的不同是将数据存储在客户端的 cookie。

我不建议这样做，因为将数据存储在 cookie 中意味着它存储在客户端，并在用户发出的每个请求中来回发送。它的大小也有限制，因为它只能存储 4 KB 的数据。

Cookie 也需要受到保护，但默认情况它不受保护，安全 Cookie 可以在 HTTPS 站点上使用，如果你使用代理上网，则需要配置它。

如何在 Express 中验证输入

让我们看看如何验证作为输入进入 Express 端点的任何数据。

假设你有一个接受 name、email 和 age 参数的 POST 端点：

const express = require('express');
const app = express();

app.use(express.json());

app.post('/form', (req, res) => {
  const name = req.body.name;
  const email = req.body.email;
  const age = req.body.age;
});

如何对这些结果执行服务器端验证以确保：

• name 是包含至少 3 个字符的字符串？
• email 是真正的邮箱地址？
• age 为 0 到 110 之间的数字？

在 Express 中处理来自外部的任何输入的验证的最佳方法是使用 express-validator 包：

npm install express-validator

引用包中的check和validationResult对象：

const { check, validationResult } = require('express-validator');

在post()调用中，我们将包含check()调用的数组作为第二个参数传入。每一个 check() 都接受参数名作为实参。最后调用validationResult()来验证是否有验证报错，如果有就告知客户端：

app.post(
  '/form',
  [
    check('name').isLength({ min: 3 }),
    check('email').isEmail(),
    check('age').isNumeric()
  ],
  (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      return res.status(422).json({ errors: errors.array() });
    }

    const name = req.body.name;
    const email = req.body.email;
    const age = req.body.age;
  }
);

注意我使用了：

• isLength()
• isEmail()
• isNumeric()

还有更多方法，都来自 validator.js，包括：

• contains(), 检查是否包含指定值
• equals(), 检查是否与指定值相等
• isAlpha()
• isAlphanumeric()
• isAscii()
• isBase64()
• isBoolean()
• isCurrency()
• isDecimal()
• isEmpty()
• isFQDN(), 检查是否为完全合格的域名
• isFloat()
• isHash()
• isHexColor()
• isIP()
• isIn(), 检查值是否属于允许值数组
• isInt()
• isJSON()
• isLatLong()
• isLength()
• isLowercase()
• isMobilePhone()
• isNumeric()
• isPostalCode()
• isURL()
• isUppercase()
• isWhitelisted(), 检查输入是否在白名单内

你也可以使用matches()来进行正则表达式验证。

日期可以通过以下方式验证：

• isAfter(), 检查输入的日期是否在你传入的日期之后
• isBefore(), 检查输入的日期是否在你传入的日期之前
• isISO8601()
• isRFC3339()

更多如何使用验证器的方法，可以参考这份文档。

所有上述验证都可以串联起来：

check('name').isAlpha().isLength({ min: 10 });

如果有任何错误，服务器会自动发送一个响应来传达错误。例如，如果电子邮件无效，将返回以下内容：

{
  "errors": [{
    "location": "body",
    "msg": "Invalid value",
    "param": "email"
  }]
}

可以使用 withMessage()覆盖默认报错：

check('name')
  .isAlpha()
  .withMessage('Must be only alphabetical chars')
  .isLength({ min: 10 })
  .withMessage('Must be at least 10 chars long');

如果你想要编写自定义验证器，可以使用 custom 验证器。

在回调函数中，你可以通过抛出异常或返回被拒绝的 promise 来拒绝验证：

app.post(
  '/form',
  [
    check('name').isLength({ min: 3 }),
    check('email').custom((email) => {
      if (alreadyHaveEmail(email)) {
        throw new Error('Email already registered');
      }
    }),
    check('age').isNumeric()
  ],
  (req, res) => {
    const name = req.body.name;
    const email = req.body.email;
    const age = req.body.age;
  }
);

自定义验证器：

check('email').custom((email) => {
  if (alreadyHaveEmail(email)) {
    throw new Error('Email already registered');
  }
});

也可改写为：

check('email').custom((email) => {
  if (alreadyHaveEmail(email)) {
    return Promise.reject('Email already registered');
  }
});

如何在 Express 清理输入

你已经了解了如何验证从外部世界到 Express 应用程序的输入。

当运行面向公众的服务器时，你很快就会学到一件事：永远不要相信输入。

即使在客户端你已经预做了一遍清理，确保人们不会输入奇怪的内容，你仍然会受到人们使用工具（甚至只是浏览器开发工具）直接 POST 到端点的影响。

或者机器人尝试人类已知的每一种可能的攻击组合。

需要做的是在服务器端清理输入。

express-validator 包除了可以验证输入以外也可以清理输入。

假设你有一个接受 name、email 和 age 参数的 POST 端点：

const express = require('express');
const app = express();

app.use(express.json());

app.post('/form', (req, res) => {
  const name = req.body.name;
  const email = req.body.email;
  const age = req.body.age;
});

你可以这样验证输入：

const express = require('express');
const app = express();

app.use(express.json());

app.post(
  '/form',
  [
    check('name').isLength({ min: 3 }),
    check('email').isEmail(),
    check('age').isNumeric()
  ],
  (req, res) => {
    const name = req.body.name;
    const email = req.body.email;
    const age = req.body.age;
  }
);

你可以通过在验证方法之后串联清理方法来添加清理：

app.post(
  '/form',
  [
    check('name').isLength({ min: 3 }).trim().escape(),
    check('email').isEmail().normalizeEmail(),
    check('age').isNumeric().trim().escape()
  ],
  (req, res) => {
    //...
  }
);

在代码中我使用的清理方法包括：

• trim()修剪字符串开头和结尾的字符（默认为空格）
• escape()将 <, >, &, ', "和 /替换成它们对应的 HTML 实体
• normalizeEmail()规范化电子邮件地址，它接受小写邮件地址或者子地址的选项。（如 flavio+newsletters@gmail.com）

其他的清理方法包括：

• blacklist() 删除出现在黑名单中的字符
• whitelist() 删除未出现在白名单中的字符
• unescape() 将 HTML 编码的实体替换为<, >, &, ', " 和 /
• ltrim() 类似于 trim()，但只修剪字符串开头的字符
• rtrim() 类似于 trim()， 但只修剪字符串末尾的字符
• stripLow()删除通常不可见的 ASCII 控制字符

强制转换格式：

• toBoolean() 将输入字符串转换为布尔值。除了 '0'、'false' 和 '' 之外的所有内容都返回 true。在严格模式下，只有 '1' 和 'true' 返回 true。
• toDate() 将输入字符串转换为日期，如果输入不是日期，则为 null。
• toFloat() 将输入字符串转换为浮点数，如果输入不是浮点数，则转换为 NaN。
• toInt()将输入字符串转换为整数，如果输入不是整数，则转换为 NaN。

与自定义验证器一样，你可以创建自定义清理器。

在回调函数中，你只需返回清理后的值：

const sanitizeValue = (value) => {
  //sanitize...
};

app.post(
  '/form',
  [
    check('value').customSanitizer((value) => {
      return sanitizeValue(value);
    })
  ],
  (req, res) => {
    const value = req.body.value;
  }
);

如何在 Express 中处理表单

以下是一个 HTML 表单示例：

<form method="POST" action="/submit-form">
  <input type="text" name="username" />
  <input type="submit" />
</form>

当用户按下提交按钮时，浏览器会自动向页面同源的/submit-form URL 发出 POST请求。浏览器发送表单包含的数据，编码为 application/x-www-form-urlencoded。在此特定示例中，表单数据包含username输入字段值。

表单也可以通过 GET 方法发送数据，但是大多数情况为POST。

表单数据将在 POST 请求体中发送。

可以使用express.urlencoded()中间件提取：

const express = require('express');
const app = express();

app.use(
  express.urlencoded({
    extended: true
  })
);

现在，需要在/submit-form 路由上创建一个 POST 端点，任何数据都可以在 Request.body 访问：

app.post('/submit-form', (req, res) => {
  const username = req.body.username;
  //...
  res.end();
});

别忘记提前使用express-validator验证数据。

如何在 Express 中处理表单中的文件上传

以下代码是允许用户上传文件的 HTML 表单示例：

<form method="POST" action="/submit-form" enctype="multipart/form-data">
  <input type="file" name="document" />
  <input type="submit" />
</form>

别忘记在表单添加enctype="multipart/form-data"，否则表单不会被上传。

当用户按下提交按钮时，浏览器会自动向页面同源的/submit-form URL 发出 POST 请求。浏览器发送表单包含的数据，但表单未编码为普通表单 application/x-www-form-urlencoded，而是 multipart/form-data。

在服务器端，处理多部分数据可能很棘手且容易出错，因此我们将使用一个名为 formidable 的库。这里是它的 GitHub 仓库 – 拥有超过 4000 颗星，并且维护良好。

可以通过以下命令安装：

npm install formidable

然后引用到 Node.js 文件：

const express = require('express');
const app = express();
const formidable = require('formidable');

现在，在 /submit-form 路由的 POST 端点中，我们使用 formidable.IncomingForm() 实例化一个新的 Formidable 表单：

app.post('/submit-form', (req, res) => {
  new formidable.IncomingForm();
});

这样做之后，我们需要解析表单。我们可以通过回调来同步执行此操作，这意味着所有文件都已处理。一旦 formidable 完成，文件就可以被访问：

app.post('/submit-form', (req, res) => {
  new formidable.IncomingForm().parse(req, (err, fields, files) => {
    if (err) {
      console.error('Error', err);
      throw err;
    }
    console.log('Fields', fields);
    console.log('Files', files);
    for (const file of Object.entries(files)) {
      console.log(file);
    }
  });
});

或者可以使用事件而不是回调。例如，当每个文件被解析时，或其他事件（例如文件处理完成、接收非文件字段或发生错误）时，都会收到通知：

app.post('/submit-form', (req, res) => {
  new formidable.IncomingForm()
    .parse(req)
    .on('field', (name, field) => {
      console.log('Field', name, field);
    })
    .on('file', (name, file) => {
      console.log('Uploaded file', name, file);
    })
    .on('aborted', () => {
      console.error('Request aborted by the user');
    })
    .on('error', (err) => {
      console.error('Error', err);
      throw err;
    })
    .on('end', () => {
      res.end();
    });
});

无论选择哪种方式，你都将获得一个或多个 Formidable.File 对象，这些对象为你提供有关已上传文件的信息。这些是可以调用的一些方法：

• file.size, 以字节为单位的文件大小
• file.path, 文件写入的路径
• file.name, 文件名
• file.type, 文件的 MIME 类型

路径默认为临时文件夹，如果监听 fileBegin 事件可以修改：

app.post('/submit-form', (req, res) => {
  new formidable.IncomingForm()
    .parse(req)
    .on('fileBegin', (name, file) => {
      file.path = __dirname + '/uploads/' + file.name;
    })
    .on('file', (name, file) => {
      console.log('Uploaded file', name, file);
    });
  //...
});

感谢阅读！

这就是手册的全部内容。别忘了，如果需要的话，你可以下载该手册的 PDF 或者 ePub 版本。

当你打开终端时，很可能发现终端使用 Bash 作为其 UNIX shell 环境。当然除了 Bash，还存在其他“shell”环境。

例如 C Shell、Korn Shell、Z Shell，甚至 Fish Shell。不同的 shell 环境各有千秋，在你选择自己系统的 shell 之前，你应该评估一下。

我将在本文中介绍一些流行的 shell 及主要功能，帮助你做选择。

Bash Shell

Bash Shell（或 Bourne Again Shell）是一种 UNIX shell 和命令语言。它是由 Brain Fox 为 GNU 项目编写的，目的是作为 Bourne Shell (sh) 的免费软件替代品。

Bash 于 1989 年首次发布，它是大多数 Linux 发行版的默认 Shell 环境。其他发行版，如 Kali Linux，使用 Z Shell 作为默认 shell。

Bash 是 Linus Torvalds（Linux 的创建者）移植到 Linux 的首批程序之一。

这是以上图片的来源

你应该记住 Bash 也是一种编程语言。所以它即是一个“Shell”，同时你也可以使用 Bash 对行为进行编程，例如，Bash 中的"Hello World"程序：

#!/bin/bash
echo "Hello World"

Bash 的关键点

• 因为 Bash 是大多数系统上的默认 shell 环境，大多数用户使用它。
• Bash 没有内联通配符表达式。通配符表达式是当你想要在 Shell 中搜索模式（pattern）的时候使用，类似于正则表达式（Regex）。三个主要的通配符是 *、? 和 []。
• 不能自动更改目录名称。
• # 在脚本中被视为注释。
• 它有shopt（shell option 缩写）设置。
• 提示符（prompt）有反斜杠转义。
• 用户配置设置在 .bashrc 中。

Z Shell

Z Shell 又称 Zsh， 是一个与 Bash 非常相似的 UNIX shell。你还可以使用 Zsh 编写脚本并将 shell 用作命令解释器。

Zsh 是 Bourne shell 的扩展，因此在此之上很多改进。 Zsh 于 1990 年由 Paul Falstad 发布，它具有 Bash、Korn Shell 和 C Shell 共有的一些功能。

macOS 默认使用 Zsh Shell。

这是以上图片的来源

Zsh 的关键点

• 在终端使用时，Zsh 带有自动补全功能。因此，当你按下Tab↹以自动补全你想运行的任何命令时，它不仅为你自动补全，而且弹出下拉菜单，包含所有其他可能的文件和目录。

• 支持内联通配符表达式
• 比 Bash 可配置度更高
• 支持插件和主题。这里是 Zsh 的插件清单

同时，还有围绕 Z Shell 构建的框架。最受欢迎的框架之一是Oh My Zsh，它是一个社区驱动的开源框架，用于管理 Zsh 配置。（我用 Oh My Zsh😄）

这是以上图片的来源

Zsh 和 Oh My Zsh 很相似，但并不完全相同。重申一下，Oh My Zsh 是一种管理 Zsh 配置的方式，它不是 Shell 本身。

Fish Shell

Fish 是一个强调交互性和可用性的 UNIX shell 环境。与 Zsh 不同，Fish 旨在为用户提供交互性，而不是信任用户实现自己的配置。

它由 Axel Liljencrantz 于 2005 年创建。由于不符合 POSIX shell 标准，Fish 被认为是“奇异的 shell”。 [[资料来源](https://en.wikipedia.org/wiki/Fish_(Unix_shell)]

这是以上图片的来源

Fish 的关键点

• Fish 根据你的命令历史记录和所在目录提供“键入时搜索”自动建议。与 Bash 的历史搜索类似，Fish Shell 的搜索历史始终处于打开状态。这样，用户终端工作时能够获得交互式反馈。

这是以上图片的来源

• Fish 还倾向将功能作为命令而不是语法。这使得功能的选项和帮助文本可见。
• 由于默认情况下 Fish 已经预置了很多配置，因此它被认为比 Zsh 等其他 sh 选项更适合初学者。
• Fish 的脚本语言不同于 Zsh 和 Bash。 Zsh 使用更多简化指令（alias），而 Fish 避免在脚本语言中使用简化指令。

如果你只是使用基本命令（如 cd、 cp、 vim、 ssh 等）编写脚本，你将不会注意到 Fish 和 Bash 的脚本语言的工作方式有何不同。

两者最大的区别之一是当你尝试捕获命令的输出时。在 Bash 中你可能习惯于这样：

todays_date=$(date)
echo "Todays date is $todays_date"

Todays Date is Tue Dec 13 15:29:28 CST 2022

而在 Fish 中，捕获输出的方式不同。Fish 脚本等价物如下：

set date (date)
echo "Todays Date $date"

todays date is Tue Dec 13 21:35:03 UTC 2022

总结

Bash、Z Shell 和 Fish Shell 各有优点，也有一些相似之处。既然对它们有了更多的了解，你就可以在工作中更有效地使用它们。

如果你想要更可配置的 shell，你可以使用 Zsh（甚至安装 Oh My Zsh）。如果你想要更多交互的终端体验，同时不需要大量配置，你可以使用 Fish Shell。如果你想要经典的感觉，你可以保留 Bash。

选择取决于你作为开发人员的偏好 - 所以只需选择最适合你的 shell。

希望这对篇文章对你有所帮助！感谢阅读 🐚🐚🐚

许多 React 新手会将逻辑和展示代码放在同一个 React 组件中，不知道将两者分离的重要性，对于他们来说，最重要的是代码能运行。

但之后当他们需要对文件进行改动，就面临一项艰巨的任务。这个时候他们就得重新考虑将两者分离的问题。

产生问题的原因是他们不了解关注点分离的概念、展示组件和容器组件模型。所以我将在这篇文章讲解这方面内容，帮助你在项目开发早期缓解这个问题。

本文将深入探讨容器和展示组件，稍微讲解一下关注点分离。

话不多说，让我们开始吧！

目录

• 什么是关注点分离
• 什么是容器组件和展示组件
• 为什么需要这两种组件
• 展示组件和容器组件示例
• 如何通过 React 钩子取代容器组件
• 总结

什么是关注点分离

关注点分离是一个在编程中广泛使用的概念。它指的是执行不同操作的逻辑不应被分组或结合在一起。

例如接下来的代码示例就违反了关注点分离。我们把获取数据和展示数据放在了同一个组件中。

若要解决这个问题，并且遵循关注点分离，我们应该将两块（即：获取数据和在 UI 上展示）逻辑分开放置在不同的组件。

此时就需要容器组件和展示组件模式。在下文将做详细讲解。

什么是容器组件和展示组件

为了实现关注点分离我们需要两种类型的组件：

• 容器组件
• 展示组件

容器组件

是提供、创建和持有数据并服务于子组件的组件。

容器组件的唯一工作是处理数据。它不包含自己的任何 UI。相反，展示组件作为使用这些数据的子组件。

一个简单的示例就是 FetchUserContainer 组件，包含获取所有用户的逻辑。

展示组件

主要职责是在 UI 上呈现数据。从容器组件中获取数据。

这些组件是无状态的，除非它们需要状态来呈现 UI。它们不会更改收到的数据。

一个简单的示例就是 UserList组件，展示所有用户。

为什么需要这两种组件

我们可以通过一个示例来理解，假设我们需要展示一份从 JSON placeholder API 获取的帖子列表。代码如下：

import { useEffect, useState } from 'react';

interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

/**
 * 我们不应该把逻辑和数据展示结合的例子
 */
export default function DisplayPosts() {
  const [posts, setPosts] = useState<Post[] | null>(null);
  const [isLoading, setIsLoading] = useState<Boolean>(false);
  const [error, setError] = useState<unknown>();

  // 逻辑
  useEffect(() => {
    (async () => {
      try {
        setIsLoading(true);
        const resp = await fetch('https://jsonplaceholder.typicode.com/posts');
        const data = await resp.json();
        setPosts(data);
        setIsLoading(false);
      } catch (err) {
        setError(err);
        setIsLoading(false);
      }
    })();
  }, []);

  //展示
  return isLoading ? (
    <span>Loading... </span>
  ) : posts ? (
    <ul>
      {posts.map((post: Post) => (
        <li key={`item-${post.id}`}>
          <span>{post.title}</span>
        </li>
      ))}
    </ul>
  ) : (
    <span>{JSON.stringify(error)}</span>
  );
}

这个组件做了这些事：

• 它包含三个变量： posts, isLoading 和 error。
• 使用 useEffect 来处理业务逻辑。 从 API 获取数据： [https://jsonplaceholder.typicode.com/posts](https://jsonplaceholder.typicode.com/posts)，获取方法采用的是 fetch API。
• 确保数据获取完毕后，使用 setPosts存储到 posts状态。
• 确保在不同的场景变换 isLoading 和 error 的值。
• 将这个逻辑放置在一个异步的 IIFE（立即调用函数）。
• 最后，我们以无序列表的形式返回帖子并映射我们获取的所有帖子。

上面的问题是获取数据和显示数据的逻辑被编码到一个组件中。可以说组件现在与逻辑高耦合。这正是我们不想要的。

以下是我们需要容器和展示组件的原因：

• 创建低耦合的组件
• 保持关注点分离
• 代码更易重构
• 代码更有组织性和可维护性
• 更易测试

展示组件和容器组件示例

好了，讲解部分就到这里——让我们从一个简单的例子开始吧。我们将使用与上面相同的示例——从 JSON placeholder API 获取数据。

先理解文件结构：

• 容器组件为 PostContainer
• 有两个展示组件：
  • Posts：展示无序列表
  • SinglePost：呈现单个列表标签的组件。即呈现列表的每个元素。

注意：我们将把上述所有组件存储在一个名为 components 的单独文件夹中。

了解文件结构后，让我们从容器组件开始：PostContainer。将下面代码复制到 components/PostContainer.tsx 文件。

import { useEffect, useState } from 'react';
import { ISinglePost } from '../Definitions';
import Posts from './Posts';

export default function PostContainer() {
  const [posts, setPosts] = useState<ISinglePost[] | null>(null);
  const [isLoading, setIsLoading] = useState<Boolean>(false);
  const [error, setError] = useState<unknown>();

  useEffect(() => {
    (async () => {
      try {
        setIsLoading(true);
        const resp = await fetch('https://jsonplaceholder.typicode.com/posts');
        const data = await resp.json();
        setPosts(data.filter((post: ISinglePost) => post.userId === 1));
        setIsLoading(false);
      } catch (err) {
        setError(err);
        setIsLoading(false);
      }
    })();
  }, []);

  return isLoading ? (
    <span>Loading... </span>
  ) : posts ? (
    <Posts posts={posts} />
  ) : (
    <span>{JSON.stringify(error)}</span>
  );
}

从本文上一节我们看到的例子来看，上面的代码只是包含了获取数据的逻辑。此逻辑存在于 useEffect 中。容器组件将数据传递给 Posts 展示组件。

让我们看一看 Posts 展示组件。将下面代码复制粘贴到 components/Posts.tsx 文件：

/**
 * 展示组件
 */

import { ISinglePost } from '../Definitions';
import SinglePost from './SinglePost';

export default function Posts(props: { posts: ISinglePost[] }) {
  return (
    <ul
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center'
      }}
    >
      {props.posts.map((post: ISinglePost) => (
        <SinglePost {...post} />
      ))}
    </ul>
  );
}

如你所见，这是一个简单的文件，包含一个 ul 标签——一个无序列表。该组件映射作为 props 传递的posts。然后传递给 SinglePost 组件。

还有另一个呈现列表标签的展示组件，即 li 标签。它显示帖子的标题和正文。将以下代码复制粘贴到 components/SinglePost.tsx 文件中：

import { ISinglePost } from '../Definitions';

export default function SinglePost(props: ISinglePost) {
  const { userId, id, title, body } = props;
  return (
    <li key={`item-${userId}-${id}`} style={{ width: 400 }}>
      <h4>
        <strong>{title}</strong>
      </h4>
      <span>{body}</span>
    </li>
  );
}

正如你所见，这些展示组件只是在屏幕上显示数据。就这样。其他什么都不做。由于它们用于显示数据，因此会有自己的样式。

我们已经设置好组件，让我们回顾一下做了些什么：

• 在例子中没有违反关注点分离的概念。
• 为每个组件编写单元测试变得更加容易。
• 代码的可维护性和可读性要好得多。因此，我们的代码库变得更有条理。

我们实现了我们想要的，但是我们利用钩子进一步增强这个模式。

如何通过 React 钩子取代容器组件

自 React 16.8.0 以来，借助函数组件和钩子构建和开发组件变得更加容易。

我们将利用这一能力，用钩子替换容器组件。

将以下代码复制粘贴到 hooks/usePosts.ts 文件中：

import { useEffect, useState } from 'react';
import { ISinglePost } from '../Definitions';

export default function usePosts() {
  const [posts, setPosts] = useState<ISinglePost[] | null>(null);
  const [isLoading, setIsLoading] = useState<Boolean>(false);
  const [error, setError] = useState<unknown>();

  useEffect(() => {
    (async () => {
      try {
        setIsLoading(true);
        const resp = await fetch('https://jsonplaceholder.typicode.com/posts');
        const data = await resp.json();
        setPosts(data.filter((post: ISinglePost) => post.userId === 1));
        setIsLoading(false);
      } catch (err) {
        setError(err);
        setIsLoading(false);
      }
    })();
  }, []);

  return {
    isLoading,
    posts,
    error
  };
}

在这里：

• 将 PostContainer 组件的逻辑提取到钩子中。
• 此钩子将返回一个包含 isLoading、posts 和error的对象。

现在我们可以简单地移除容器组件 PostContainer。然后，我们可以直接在 Posts 展示组件中使用这个钩子，而不是将容器的数据作为 prop 传递给展示组件。

对Post组件进行以下编辑：

/**
 * 展示组件
 */

import { ISinglePost } from '../Definitions';
import usePosts from '../hooks/usePosts';
import SinglePost from './SinglePost';

export default function Posts(props: { posts: ISinglePost[] }) {
  const { isLoading, posts, error } = usePosts();

  return (
    <ul
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center'
      }}
    >
      {isLoading ? (
        <span>Loading...</span>
      ) : posts ? (
        posts.map((post: ISinglePost) => <SinglePost {...post} />)
      ) : (
        <span>{JSON.stringify(error)}</span>
      )}
    </ul>
  );
}

通过使用钩子，我们消除了存在于这些展示组件之上的额外组件层。

使用钩子，我们获得了与容器/展示组件模式相同的结果。

总结

通过这篇文章，我们学习了：

• 关注点分离
• 容器和展示组件
• 为什么需要这两种组件
• 钩子如何取代容器组件

如果想要了解更多，我强烈推荐你阅读 react-table:。这个库使用了大量的钩子都是很好的示例。

你可以在 codesandbox 找到本文的完整代码。

感谢阅读！

可以在 Twitter、GitHub和 LinkedIn 上关注我。

从开始学习JSON Web令牌（JWT），我就一直很好奇，它是如何被验证的。

我了解我们签名了令牌，并且使用签名后的令牌来验证真实性。但是我还是特别好奇以及为什么我之前没有去了解内部的细节。

希望这篇文章可以帮助你理解签名JWT是如何运作的，你是如何签名和验证令牌的。

什么是JWT？

在我们正式开始之前，让我们快速回顾一下JSON Web令牌到底是什么。

JSON Web令牌（JWT）是一种在两方之间紧凑的、URL安全的传输数据的方式。

它由开放标准（RFC 7519）定义，并由三个部分组成：header（头部）、payload（负载）以及一个加密部分。

JWT在生成时会被签名，相同的签名JWT在收到时会被验证，以确保它在传输过程中没有被修改。

如果你想要了解JWT的细节，我推荐你阅读我的博文——JSON Web令牌（JWT）以及我们为什么使用它.

为什么你不需要知道签名和验证是如何工作的？🤔

现在的问题是，为什么大部分的JWT资源都会说“然后你签名并验证”就没有别的信息了？答案是因为这些信息很抽象。

就好比当你在开车的时候，你并不需要知道引擎是如何工作的，或者也不需要靠自己来调整引擎，使汽车运行得更好。

相反，你信任制造商利用他们的专业、并且尽责为你制造了对你有用的产品。

同样的，你也不需要了解签名和验证JWT的流程是什么，就可以高效地使用它来验证和授权你的应用和API。

请注意你大概率是不需要自己签名和验证令牌的，但了解背后的原理能够帮助你更有信心地使用JWT。但总的来说，身份供应商和身份（Identity-as-a-Service ）即服务平台（如 Auth0、Okta 和 Microsoft Active Directory）可确保此过程很简单。

如果你仍对它是如何运作的感兴趣（和我一样），欢迎你继续阅读。

JSON Web令牌由什么组成？🤔

我在这篇教程中做了深入的介绍，但是让我们快速回顾一下。

JSON Web令牌由三段URL安全的字符串并用句号 .连接组成。

JWT的Header（头部）部分

第一个部分是头部，如下：

eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9

头部是一个JSON对象，包含了一个签名算法和一个令牌类型。它是由base64Url编码而成。

解码后如下：

{
  "alg": "RS256",
  "typ": "JWT"
}

JWT的Payload（负载）部分

第二部分是负载：

eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0

这是一个包含数据声明的JSON对象，其中包含有关用户的信息和其他与身份验证相关的信息。

是JWT从一个实体传递到另一个实体的信息。它也是base64Url编码的。数据声明如下所示：

{
  "sub": "1234567890",
  "name": "John Doe",
  "admin": true,
  "iat": 1516239022
}

JWT的加密/签名部分

最后一部分是加密/签名部分。JWT被签名之后不能在传输的过程中被修改。一旦一个授权的服务器发行了一个令牌，就使用密匙来签名。

当客户端接收到ID的令牌，也通过密匙来验证签名。

签名算法不同，使用的密钥也会有所不同。如果使用的是非对称签名算法，则使用不同的密钥进行签名和验证。在这种情况下，只有授权服务器能够签名令牌。

JWT中的签名和验证是如何运作的？🤔

如何签名一个JWT？

在这篇文章中，我将使用RS256签名算法。RS256是使用SHA-256的RSA电子签名。

SHA-256是一种非对称密钥加密算法，它使用一对密钥：一个公钥和一个私钥来加密和解密。

在这里，授权服务器将使用私钥，而接收令牌以验证它的应用程序将使用公钥。

签名输入

首先让我来看看JWT的前两个部分（头部和负载），如下：

eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0

基本上就是一个由base64url编码的头部和负载，并且由 .连接。

base64UrlEncode(header) + "." 
+ base64UrlEncode(payload)

以上就是签名输入。

对签名输入做哈希加密

然后我们使用SHA-256哈希算法对签名输入进行加密。哈希将一个值转换为另一个不同的值。哈希函数使用数学算法从现有值生成新值。

注意:

• 哈希是不可逆的，一旦我们将输入哈希之后，就无法再次获取原有的输入。
• 如果输入相同，哈希后的结果始终相同。
• 不存在两个不同的哈希输入产出相同的结果。

SHA-256 (
    base64UrlEncode(header) + "." 
    + base64UrlEncode(payload)
)

现在我们就拥有了哈希后的头部和负载部分，可以用此和其他的哈希结果比较，但是不能逆转返回到最初的签名输入。

加密签名输入

接下来，我们给哈希后的签名输入加密。和哈希不同的是，加密是可逆的。授权服务器使用加密私钥给哈希后的签名加密，产生一个结果。

这个最终结果（哈希过、加密过、头部和负载编码后）就是JWT的加密/签名部分。

RSA (
    SHA-256 (
        base64UrlEncode(header) + "." 
        + base64UrlEncode(payload)
    ),
    {RSA Private Key}
)

这就是JSON Web令牌产生的过程。

如何验证JWT？

现在你知道令牌是如何签名的，我们可以进一步了解当收到令牌后，如何验证这个JWT是没有被篡改的。

假设有一个接受JWT的应用，并且需要验证JWT。这个应用也可以访问授权服务器的公钥。

JWT的验证是为了达到一个目的：即我们可以有效地将我们收到的与我们期望的进行比较。

解码声明

应用可以对头部和负载解码来获取信息。

请记住，这两个段是用base64Url编码，以使它们是URL安全的。这并不是密码学维度的安全。

你可以使用简单的在线base64解码工具来解码。一旦被解码，我们就可以轻松地读取其中的信息。

例如，我们可以解码头部，看看JWT说它是用什么算法签名的。

解码后的头部如下：

{
  "alg": "RS256",
  "typ": "JWT"
}

当我们读取JWT头部的算法后，我们应该验证它是否和我们期待的配置匹配，如果不匹配，就马上拒绝这个令牌。

哈希加密（再次）

如果令牌中的算法符合我们的期望（即使用RS256算法），我们需要生成头部和负载的SHA-256哈希。

请记住，哈希是不可逆的，但相同的输入总是会产生相同的输出。所以我们将哈希连接在一起的、由base64Url编码的头部和负载。现在我们在应用程序端重新哈希计算签名输入。

解密

哈希签名输入也在JWT的签名中，但它已由授权服务器使用私钥加密。应用程序可以访问公钥，因此我们可以解密签名。

完成此操作后，我们就可以访问原始哈希：第一次生成令牌时由授权服务器生成的哈希。

对比哈希值

现在我们可以将解密的哈希与计算的哈希进行比较。如果它们相同，那么我们验证JWT头部和负载段中的数据在授权服务器创建令牌到应用程序收到它的之间没有被修改。

验证令牌声明

此外，一旦我们验证了签名，我们就可以验证JSON Web令牌的数据。也可以验证负载段中的声明，因为它包含有关令牌颁发者、令牌到期时间、令牌的目标受众、令牌绑定到授权请求的信息等。

这些声明为应用程序提供了签名验证以外的详细信息。

例如，对声明的检查可以揭示技术上有效的令牌实际上是为不同的应用程序或用户准备的、它已经过期、它来自与该应用程序无关的发行者等等。

总结

我们已经介绍完毕JWT是如何签名和验证的，希望可以帮助你更好地理解JWT并且使用它。我想再重复一次，你不需要自己来签名和验证JWT。

有Auth0、 Okta、Ping Identity等身份平台帮助你完成。他们也提供应用端和API端的SDK、验证库和令牌管理系统。

如果你对使用Auth0感兴趣，你需要注册一个账号。你可以免费在这里注册。

感谢阅读！希望你觉得这篇文章对你有帮助，我也很感兴趣收听你的想法，回答你的问题。如果你觉得本文对你有帮助，请你转发给其他人。

感谢阅读！:)

P.S 欢迎在LinkedIn或Twitter联系我。

附录

以下是撰写这篇文章我参考的资料：

• Signing and Validating JSON Web Tokens (JWT) For Everyone 作者：Kim Maida
• JSON Web Token (JWT) Signing Algorithms Overview 来自Auth0

今天，世界各地的计算机和网络通讯速度都变得越来越快。这有利于提升 Web 开发和用户体验。人们通过互联网能够实现的可能性也向前迈了一大步。

显著进步的另一面也意味着有一些人掉队了。在这个数字分化的年代，如何提高网络体验，以触达到更多网络和设备条件没有那么好的用户，是一个难题。

要解决这个难题，必须先理解浏览器上渲染网页的方法。

本文涉及的术语

在开始之前，我需要确保你熟悉本文涉及的术语。其中一些对于新开发者来说可能难以理解。如果你对这部分已经很了解了，可以跳过。

• 服务器：服务器是位于远程（互联网意义上的）电脑，它的职责就是处理客户端发来的请求并且做出响应。
• 客户端：客户端是用于和服务器通信的设备，以此来访问资源。在绝大多数情况下，客户端是可以访问网络的设备。在本文中，网络浏览器充当了客户端的角色。
• CDN：Content Delivery Network（内容分发网络）的首字母缩写。CDN 是“一个互连服务器网络，可加快数据密集型应用程序的网页加载速度”（引用自 AWS）。
• 构建时：在构建时，应用程序代码为另一个环境做准备。这里的另一个环境大多数时候指的是互联网上的托管环境。

现在让我们学习渲染网站的不同方式。

什么是客户端渲染（CSR）？

客户端渲染完全依赖 JavaScript 代码在浏览器中生成网页。在页面内容加载完毕，供用户浏览之前，浏览器预先处理 JS 代码。

JavaScript 在下载时就动态辅助定义网站架构。这里的架构指的是从 API 获取数据、 网站导航和一些网站内简单的业务逻辑。

客户端渲染和 JavaScript 框架

客户端渲染因为一些 JavaScript 框架或者库，如：React、 Vue 和 Angular 的发布而变得越来越流行。仅当在 HTML 页面的头部（head）引入一个 CDN，这些架构才生效——通常这些 CDN 包含大量的 JS 代码。

毫无疑问大文件意味着更久的下载时间，同时，在首次加载就下载好大文件意味着之后访问网站其他页面的加载时间会大幅下降。

网站首先从 API 获取数据，然后数据被用于填充在客户端渲染的页面。

许多我们现实生活中的渐进式应用（PWA）就是使用 CSR 的示例，如：Spotify、Figma 和 Google Drive。

什么是服务端渲染（SSR）？

客户端渲染改变了游戏规则，并且这种改变仍在持续。但是，如果细看 CSR 的性能，会发现想要网站具备更多的功能，就需要更多的 JS 代码。也就是上文提到的越多的 JS 代码意味着更久的下载时间。

牺牲首次加载时间来换取网页的快速访问，对于一些人来并不划算。服务器端渲染就应运而生。

SSR 并未解决网页渲染的所有问题，但确实解决了使用 CSR 会面临的问题，如首次加载的时间，更多优势会在后文提到。

服务器端在接收到浏览器的请求后就在服务器渲染生成网页。服务器通过 SSR 渲染整个 HTML、CSS 和资源需求的必要 JavaScript，并且返回给浏览器。

也就意味着网站内容始终是来自服务器的最新的信息。你可以把这个类比为 REST API——后端内容实时更新。

和其他渲染手段一样，SSR 也有一些弊端。其中一个就是因为需要通过向服务发送请求才能加载网页，所以网络带宽小的用户会收到影响。同时，SSR 也对计算机的算力有要求。

什么是静态网站生成（SSG）？

静态网站生成是渲染网页一个常用的手段，在 JavaScript 框架诞生之前，大部分的网站都是静态生成的。

静态网站很受欢迎，但是有更好的生成它们的方式。这主要取决于网站是否看重性能。

但是，静态网站是什么？

静态网站的渲染和生成是一致的，也就是说静态网站的内容基本上不会被浏览的用户影响，不像使用 CSR 或者 SSR 渲染的 web 应用，用户看到的内容取决于认证和授权。

静态网站是展现不会改变，或者只需要定期更新内容的理想手段。

静态网站生成详解

静态网页生成主要设计到自动化构建网页的过程。今天的 JavaScript 框架（如 Nuxt.js、Next.js 等）提供模版引擎，可使用一个模板来构建多个静态页面，可以想像这样可以解决时间。

在 SSR 和 CSR 中，HTML 网页是在构建时须髯安和生成，但是静态网站生成截然不同。在你尝试访问网页之间，SSG 就生成了网站。这就是为什么 SSG 被认为是预渲染，苦差事都在渲染前做完了。

看上去 SSG 可以春风化雨，但使用 SSG 渲染页面有一个大缺点就是必须为网站的每一个可以访问的 URL 生成一个页面，如果你使用动态页面，就会更复杂。

这就回到上文提到的，静态网站的理想使用场景是展现不怎么更新的内容，也就是静态网站并不是万金油。

不同渲染方式优势和折衷

在分别了解这些渲染方式之后，让我们把知识整合到一起做一下对比。

我们将看三个指标——性能、SEO 和花销。

性能

搭建可以兼容不同网络和电脑速度的网站，需要考虑到网站的性能。这里的性能指的是网站的加载速度和从 API 获取数据的速度。

接下来将分析 CSR、SSR 和 SSG 在这方面的表现

客户端渲染性能

客户端渲染网站相对较慢。因为一开始需要加载 JS 代码，才能生成用户可以看到的内容。

通常情况下，JS 下载都很慢，特别是使用 JS 框架的时候。客户端渲染网页也调用 API 以从后端获取数据，这样也会增加用户的加载时间。

服务器端渲染性能

SSR 渲染网页可以非常快。这主要取决于服务器的速度以及用户电脑的速度，如果两者都达到预期，SSR 在性能方面可以轻松取胜。

静态网站生成性能

使用 SSG 生成页面相对较快，因为实际渲染并没有在浏览器发生。

SSG 不需要额外的工作就可以向浏览器提供内容。和 CSR 一样，SSG 可能也需要调用 API 来获取后端数据，这样也会增加用户的加载时间。

最终性能是由网页中使用的 JavaScript 的数量决定的。

搜索引擎优化（SEO）

页面如果需要曝光的话，就应当重视搜索引擎优化。SEO 决定了内容在如 Google 这样的搜索引擎上的可访问性，同时也决定了网站在搜索引擎结果页面（SERP）上的排名。

让我们看看当这些网站被搜索引擎索引的时候，它们的 SEO 表现如何。

CSR 搜索引擎优化

使用 CSR 渲染的页面并没有语义化的内容，内容主要靠 JS 生成。这样的弊端是不是所有网络爬虫都支持 JS，因此你的网站可能不能被搜索引擎正确索引。

SSR 搜索引擎优化

SSR 渲染通过由服务器发出的最新的内容生成页面，由 SS 渲染的页面可以被爬虫识别也可以被搜索引擎索引。

SSG 搜索引擎优化

由 SSG 生成的页面极易被网络爬虫爬取，因为它不完全依赖 JS 渲染。

花销

给用户提供最佳的体验很重要，但账单不会自我消化，所以由体验带来的花销约精简越好。

三种渲染手段的经济花销并不相同。让我们仔细分析一下：

CSR 花销

客户端渲染 100% 在浏览器运行，也就意味着没有额外产生花销。

SSR 花销

客户端渲染由远程的服务器生成功能完整的页面，所以为生成额外的计算资源和花销。

SSG 花销

没有花销。静态网站生成在构建时完成。因此，生成的网页被托管，不需要服务器额外的渲染。

总结

当选择渲染方式的时候，请考虑好你的用例，可以根据本文所学来做判断。不同的渲染方式适用于不同的网站。

电子商务网站的开发者可能会选择 SSR 路线，或者选择更安全的静态网站。同时，web 应用的开发可能不在乎首次加载的时长，只要长远看的用户体验够好。

不论你选用哪种渲染方式，都要确保网站的可访问性——跳出自身经历。最后，千万别忘了 JS 代码的精炼。

在这篇文章中，我希望给读者建立一个网络世界的基本印象。我之前的文章都是互联网相关更高阶的内容，如：Angular 之旅、React 基础等。但在今天这篇文章中，我想带领各位读者一起领略点击 URL 之后的风光。

正如文章标题所示 - 当你点击 URL 之后会发生什么？——让我们开始吧！

在探讨点击 URL 之后，我们得先了解 URL 是什么，它的各个组成部分，对不对？那么别浪费时间了，让我们开始了解 URL 吧！

URL – 统一资源定位符（Uniform Resource Locator）

正如 URL 的全称所述：它表示了我们想要访问的资源的地址。它相当于一个物理世界的地址，而在这个地址有你想要交互或者搜寻的信息。

在你的日常生活中，如果你出于工作或者讯息需求想要拜访一位朋友，你首先需要他/她的住址。在网络世界也是如此，你想要访问的网站必须有一个地址。网站就相当于朋友的房子，而 URL 就是房子的地址。

剖析 URL

现在我们已经清楚了 URL 是什么，但还不了解它的组成部分，让我开始吧！

看看这个例子：

https://www.example.com/page1

在示例中，第一个部分是 ‘https’，它告诉浏览器应该使用哪种协议。协议可以是 http、https、ftp 等。协议是浏览器用于网络通信的一组规则。'https' 是安全版本，信息以一种安全的方式交换。

第二部分 www.example.com 是域名。你可以把它当作你朋友的房子。域名是网站的地址。我们使用域名来访问服务器（训练后的电脑），服务器的任务是给网站提供信息。稍等！我刚刚才说过 URL 是地址，现在又说域名也是地址。可别搞混了！

URL 和域名之间的区别

两者之间最大的不同是 URL 是完整的地址。 URL 提供了信息交流的方法以及登录网站之后的路径。而域名是 URL 的一部分。

让我们通过之前的示例来了解。你可以认为你朋友的住址是域名，同时 URL 不仅告知了朋友房子的住址（域名），以及你们交流的方式，如去到一个单独的房间（安全）或者当着所有人的面（信息可能会泄漏）。它也告知了路径，即到达房子之后，你应该去哪个房间。因此，域名是 URL 的一部分。一个包含域名和更多信息的地址才是 URL。

希望现在你更清楚 URL 是什么了，让我们进入下一个部分。

域名

上文我介绍了域名，但未做深入讨论。现在就来看看，域名是网站的地址。它是浩瀚网络世界中网站的唯一标识。不能有两个相同的域名，但是 - 对！还有一个“但是”。 域名之间不仅仅是通过这个来区别的，还有其他的内容。

当点击 URL，也就是域名之后，网站被打开，内容呈现出来。每一台计算机都有 IP 地址，用来在互联网通信。正如它的名字“IP 地址”所述，它就是一个地址。当我们点击任意URL时，我们实际上是在 点击 负责提供网站内容（托管）的电脑的 IP 地址。

现在你可能会觉得，什么鬼！所有东西都是地址？有 IP 地址的话，还要域名干嘛？为什么不直接用 IP 地址获取内容？

是的！你可以使用 IP 地址来获取内容，但你真的记得住所有网站对应的 IP 地址吗？显然不行！记住每一个网站的 IP 地址可太难了，域名才应运而生。

你可以类比通讯录。你记不住每一个人的手机号码，但是你可以记住他们的名字。域名和 IP 地址的关系也同样。你可记不住这些吓死人的 IP 地址，但是你可以轻松记住域名。

大量的数据由数据库维护，并且存储在域名下这个 IP 地址内。存储域名和对应 IP 地址的系统被称为 DNS（域名系统） 。（我相信你肯定听说过）

基础介绍得差不多了，让我们进入点击 URL 之后的步骤。

DNS lookup 查找 IP 地址

访问 URL 之后，首先要做的是解析与域名相关联的 IP 地址。DNS 辅助这个工作。DNS 就像电话簿一样，给我们提供与域名关联的 IP 地址，就如同我电话簿提供和人名相关的手机号码一样。

这是概述，但此域名查询通过四层，分以下几个步骤 ：

1. 点击 URL 之后，将检查浏览器缓存。因为浏览器会在一段时间内存储你访问过的网站的 DNS 记录，DNS 查询会先查缓存里的与域名关联的 IP 地址。

2. DNS 查询检查的第二个位置是系统缓存，其次是路由缓存。

3. 如果在上述步骤中，DNS 查询未得到解析，则需要解析服务器的帮助。解析器服务器只不过是 ISP（Internet 服务提供商）。查询被发送到 ISP，DNS 查询在 ISP 缓存中运行。

4. 如果在第 3 步中也没有找到结果，则将请求发送到 DNS 层级结构的顶层或者根服务器。从来没有发生过在这个阶段没有找到结果的情况，实际上，这部分告诉你可以从那儿找到信息。如果你正在搜索顶级域（.com、.net、.Gov、.org）的 IP 地址，就是告诉解析器服务器搜索 TLD 服务器（顶级域）。

5. 现在，解析器要求 TLD 服务器提供域名的 IP 地址。 TLD 存储域名的地址信息。它告诉解析器向权威性域名服务器询问。

6. 权威性域名服务器负责了解域名的所有信息。最终，解析器（ISP）获取与域名相关联的 IP 地址，并将其发送回浏览器。

获取 IP 地址后，解析器将其存储在缓存中，这样下次如果出现相同的查询，就不必再次执行所有这些步骤。它可以从缓存得到 IP 地址。

这就是解析与域名关联的 IP 地址所遵循的所有步骤。可以结合下图理解：

由浏览器发起的与服务器的 TCP 连接

一旦计算机的IP 地址（网站信息存储的地方）被发现，就会启动连接。网络通信遵循互联网协议。TCP/IP 就是最常见的协议。浏览器和服务器之间的通讯遵循 ‘TCP 三次握手’。让我们简短地了解一下这个过程：

1. 客户端计算机发送一个SYN 消息，确认另一台计算机是否可以建立连接。

2. 之后来到另一台计算机，如果可以建立新的连接，会同时发送 SYN 消息和 确认消息。

3. 在此之后，第一台计算机接收到它的消息，并通过发送 ACK 消息进行确认。

可以通过下图理解：

通信开始（请求响应过程）

最终客户端和服务器之间的连接建立，双方可以相互交流信息。连接成功之后，浏览器(客户端)向服务器发送请求，告诉服务器需要什么内容。服务器知道应该对每一种请求做何种反应。因此服务器响应客户端，响应包含了请求的所有内容，包括网页、状态码、缓存控制等。然后浏览器渲染请求内容。

就这么多，当你点击 URL 之后，上面的所有步骤就运转起来，当然这些步骤可能在一秒之内就完成了。这就回答了“当我们点击 URL 之后，发生了什么？”这个问题。

感谢你阅读本文！

如果你已经使用 React 一段时间，你会察觉 JavaScript 一些自由野性的天性让你难以驾驭（这当然不是 JS 的问题 😄），当你和团队协作的时候，这个特点尤为显著。

或许你不知道，你需要 TypeScript，至少试一下。

我先声明一下，我喜欢 JavaScript 的自由，甚至有相当长的时间，我“反对”使用 TypeScript。

我想和你一起探索 TypeScript 是否值得使用，还只是适合那些不怎么会写代码的人（这是我们团队内部玩笑）。

本文旨在介绍 TS 的基础以便你了解它的优势，决定是否使用它。本文的第二部分会介绍在 React 中的 TS。

目录

• 参考资料
• 为什么使用 ESLint、Prettier 和 Husky
• 何为 TypeScript
• 为什么要使用 TS
• 如何设置 TypeScript
• 购物清单项目示例
  • TypeScript 模块
  • TypeScript 类型
    • TypeScript 中的类型推论
    • TypeScript 中的any 和 unknown
    • TypeScript 中的数组
    • TypeScript 中的对象
    • TypeScript 中的类型别名
  • TypeScript 中的函数
    • TypeScript 中的可选参数
  • TypeScript 枚举
  • TypeScript 泛型
  • TypeScript 中的元组
  • TypeScript 中的类
  • TypeScript 中的接口
  • TypeScript 中的 DOM 操作
• 如何结合 React + TypeScript
  • 设置
  • 设置组件 Props 类型
    • React 内置类型
    • React 组件返回类型
    • 结合模板字面量
    • 如何使用Exclude
    • 自定义 HTML 组件
  • 定义 hook 的类型
    • useState hook
    • useReducer hook
    • useContext
    • useRef hook
  • 传递 ref
  • 如何在 React 中使用 TypeScript 泛型
  • 定义自定义 useFetch Hook 类型
• 总结

参考资料

你可以从以下样板着手：

• Create React App + TypeScript + ESLint + Prettier Boilerplate
• Vite + TypeScript + ESLint + Prettier Boilerplate

如果你喜欢游戏编程，可以尝试 PhaserJS。你可以在浏览器通过创建游戏边玩边学 TypeScript 。

确保你也阅读了 TS 官方文档。里面包含大量有用的文档和案例。

另外还有两个示例项目，这样你就可以看到代码是如何实现的：

购物清单项目

这是一个简单的体验 TypeScript 开发的项目，不需要 Webpack、React 以及任何其他组件，仅需要把 TypeScript 转换成 JavaScript。

• 在线示例
• 源码

动漫预告片项目

借助 JikanAPI我搭建了一个简单的结合 React 和 TypeScript 的应用，该应用提供一系列动画和基本信息，你可以观看你最喜欢的动画的最新预告。

• 在线示例
• 源码

为什么使用 ESLint、Prettier 和 Husky

在样板中我使用了 Airbnb 的 ESlint 规则、Prettier 建议规则以及 Husky 的提前提交（pre-commit)行为。团队协作的时候，这样可以促使大家遵循同样的代码规则，即便你是单人作业或者学习开发，这样操作也会对你的项目有所助益。

有些 Airbnb 的规则可能会有些奇怪，但是规则都有注解和示例，你可以以此来决定采不采用，如果想要关闭某个规则，可以放在.eslintrc文件中。

这些规则对入门开发和刚刚开始使用 JS 或者 TS 的人来说非常有用。所以我建议你将它们纳入你的项目，尝试一下。 😉

何为 TypeScript

TypeScript或者 TS 是由微软开发并且维护的开源语言，它具有以下特性：

• 它是一个多范式语言（和 JavaScript 一样）；
• 它是 JavaScript 的一个替代品（更准确地说，是一个超集）；
• 它允许静态类型；
• 它具有额外的特性: 泛型（generics)、接口（interfaces）、元组（tuples）等，将在下文详细说明；
• 它允许阶段性采用（也就是你可以一个文件一个文件地将现有的项目改写成 TS，而不是一次性改变）；
• 你可以在前端和后端中使用（和 JS 一样）。

浏览器不能解读 TS 代码，必须 转译 为 JS。JS 为动态类型映射值，而 TS 是静态类型，所以不易出错。

React 中已经是通过 Babel 转译 JS 了，所以转译代码并不是 TS 额外的优势。

为什么要使用 TS

问题就在这儿： 为什么要使用 TS，JS 不好用吗？你用得不开心吗？你不怕麻烦吗？正如上文所述，过去我们团队内部会取笑像 TS 这样带类型的语言（当时我还在使用 Java）。我们团队会说如果你需要类型，证明你不会正确地写代码。

TypeScript、Java 以及其他一些语言具备静态类型，也就是会定义变量的类型。一旦你将变量定义为 string 或者 boolean ，你就不能改变它的类型。

而 JavaScript 拥有动态类型。也就是说，变量一开始是字符串，之后可以变为布尔值、数字或者任意你想要的值。变量类型会在运行时动态分配。

当你浏览网络上的 TS 代码，你会看到……（语法糖）。

回到我们团队的玩笑，当然这个说法没错：如果你知道自己在做什么，你不需要别人不断提醒你这是字符串，也只能是字符串，在某一刻它变成了布尔值或者其他类型……我知道自己在做什么！

真相是人非完人，总有这样的事情发生：

• 赶进度的时候；
• 心情糟糕的时候；
• 周五的想法下周一再回顾的时候发现自己无法理解；
• 团队协作时，团队成员的技术和看法不在一个水平。

出于同样的原因，我们使用 IDE、IDE 插件、代码高亮、linter 而不是记事本应用。TypeScript 和这些辅助工具一样。

一些常见的问题

让我们看一看使用和不使用 TS 的一些对比示例：

拜托，我知道自己用的是什么！

// App.js
import { MemoryRouter as Router } from 'react-router-dom';

import Routes from './routes';

export default function App() {
  return (
    <Router basename="/my-fancy-app">
      <Routes />
    </Router>
  );
}

你知道上面代码块的问题出在哪儿吗？如果知道的话，请给自己一朵大红花！

这个文件在我的样板中存在了很长时间，这并不是一个 bug，但是…… MemoryRouter并不需要任何 basename。它出现的原因是我之前使用了BrowserRouter，所以需要basename属性。

如果使用 TS 你会被提示 No overload matches this call 告诉你有这个属性的组件并没有被签名。

TypeScript 不仅可以使用静态类型，也可以帮助你决定是否需要其他的库。这里的库可以是第三方或者同事提供的组件和函数。

肯定会有一些声音——“了解正在使用的库不是必须么”，是的，你是对的。但是让参与项目的每个人都知道每个“外部”库以及版本的细微差别，可是艰巨的任务！

魔鬼标志变量

let isVerified = false;
verifyAmount();

// isVerified = "false"
if (isVerified) proceedPayment();

我被这个问题困扰了很多次。虽然每次不是一模一样的代码，一些细微的差别，但是你可以从这个示例中体会我的用意：你设置一个布尔值变量来决定一些代码运不运行，但很有可能其他人（或者你自己）后来将布尔值变成了字符串，而非空字符串为真值。

如果使用 TypeScript，会出现报错: The type 'string' is not assignable to the type 'boolean'。代码在编译时就会出现这个报错，不需要等到运行时，那么在生产阶段出现这样的报错的机率非常低。

当然，和前文的规则一样，如果你正确编写代码，这个问题不会发生，如果你采用简洁代码的策略并且在编码的时候非常小心也可以避免这样的错误。TypeScript 并不是为了让我们偷懒，而是我们的好帮手，正如代码高亮可以帮助我们避免错误，找出不正常的变量。

我以为盒子里面的猫是活着的

const MONTH_SELECT_OPTIONS = MONTHS.map((month) => ({
  label: getMonthName(month),
  value: month
}));

export default function PaymentDisplayer() {
  const [currentMonthFilter, setCurrentMonthFilter] = useState(
    MONTH_SELECT_OPTIONS[0]
  );

  const onChangeHandler = (option) => {
    setCurrentMonthFilter(option.value);
  };

  return (
    <select onChange={onChangeHandler}>
      {MONTH_SELECT_OPTIONS.map(({ label, value }) => (
        <option key="value" value={value}>
          {label}
        </option>
      ))}
    </select>
  );
}

改变一个 state 的类型非常常见（虽然不建议这么做），有些时候会设置一个isError 标志变量，突然从布尔假值变成表示错误信息的字符串（也不建议这么做！）。还有一些时候是无意为之。

编写这段代码的人一开始认为 currentMonthFilter 会存储实际的选项，一个包含 label 和 value 的HTMLOptionElement。之后，同样的开发在另一个天（或者另一个开发）创建了 changeHandler函数并只设置了value而不是整个选项。

上述代码可以运行，为了方便学习我也做了简化，但是假设项目规模更大，特别是组件的行为是由 props 传递的时候，问题就复杂得多。

使用 TypeScript 可以从两个方面解决这个问题：

• 当你将currentMonthFilter的{label: string, value: number}改成number时，静态类型会报错。
• 下一个步骤的开发人员，在调用服务检索包含这个筛选条件的付款时候，会通过 IntelliSense（VS Code 中的代码提示）了解他从 state 中获得什么类型，这个类型是否和服务匹配。

所以使用 TypeScript，可以从 IDE 检查第三方库提供的函数、参数以及文档或者是同事编写的组件。

从上文例子中（可能不那么典型），我们可以得出，TypeScript 在 React 的环境中，可以帮助我们：

• 代码前后一致，静态类型一致
• 提供文档记录，并通过 IntelliSense 了解可能性
• 尽早发现问题

如何设置 TypeScript

在本文中我们将使用全局安装。因为我认为第一次探索 TypeScript 应该不受到 Webpack、React 等其他变量的干扰，这样才能更加了解 TypeScript 是如何运行和处理问题的。

如何全局安装 TypeScript

npm install -g typescript

#或

yarn install --global typescript

TypeScript 编译器（tsc）是如何工作的

在系统中安装好 TypeScript 之后，就可以使用 TypeScript 的编译器，使用 tsc 命令行。

让我们通过简单配置编译器测试一下：

• 创建一个新的空文件夹。
• 放置一个index.html文件，文件内容是基础的 HTML5 结构。
• 在index.html同一层，创建一个空的index.ts文件。
• 打开终端，并输入tsc --init（假设你是全局安装 TypeScript），便会创建一个 tsconfig.json文件。（我们将在下一章详细探讨这个文件）

你的文件夹结构如下：

- index.html
- index.ts
- tsconfig.json

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

你需要在 HTML 中添加 TS 文件，但是浏览器并不理解 TypeScript，只认识 JavaScript，所以你可以将index.html修改为：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script src="./index.js"></script>
</html>

打开一个新的终端，并输入tsc，你的 index.ts 文件将转换为 index.js，浏览器就可以理解。

为了不在每一次将 TS 文件转换为 JS 文件的时候都输入tsc，你可以将 TypeScript 设置为监控模式，使用tsc -w。

现在我建议你同时打开 TS 文件和 JS 文件，在index.ts文件中输入普通的 JS，测试输出是什么。（我们将在接下来的章节大量使用这样的方法）。

tsconfig.json里是什么

跟着文章一边看一边实践的话，通过tsc --init命令，你将创建 tsconfig.json并包含默认配置和初始化的注解。

让我们看一看一些关键的属性：

• target是 TS 代码将要转换成的 JS 的版本。版本主要取决于支持的浏览器，你可能需要使用比较早期版本的 JS。这也是很好的学习资源，你可以修改不同版本来看生成什么样的 JS 代码。
• module 设置模块的语法。 commonjs默认使用require/module.exports，现代 JS (ES6+)使用import/export。如果你希望使用 import/export，你需要将target设置为 ES6 或更高。 本文中的示例项目将使用这个语法。
• lib你需要指定你在项目中额外使用的库，检查额外的类型，如 DOM 相关。
• jsx如果使用 React，我们需要把这一项设置为preserve，也就是由另一个工具（即 Babel）来编译这 JSX，TSC 仅用于检查类型。你也可以设置为react或者react-native。这个配置决定是否使用 TSC 将你的 JSX 代码转换为常规的 JS 代码。大多数情况，我们将这个属性设置为preserve，将文件设置为常规的 JSX 并由 Babel 或者 Webpack 来处理编译工作。
• outDir是编译后文件存储的地方，例如大部分 React 项目会被存放在build文件。
• rootDir 是需要被编译的文件的位置，大部分 React 项目的位置为./src。
• strict开启一系列检查类型的规则，这些规则对"正确"的要求更为严格。我建议在学习阶段将它设置为 false，当你掌握得还不错了之后再开启。记住开启这个选项就是开启了 TS 的所有潜能，其中包含的一些选项你可以单独关闭。
• include 你想要编译的文件夹，如src文件夹。
• exclude 你不想要编译的文件夹，如node_modules文件夹。

在示例中，我们将 rootDir设置为 ./src， outDir设置为 public文件夹。

购物清单项目示例

项目示例很简单：你可以在购物清单中添加不同的物品、修改数量、删除物品以及查看需要买什么物品。

示例项目是为了让你适应 TypeScript 的工作流。一旦使用 React 环境，Webpack 和其他一些打包器就完成很多神奇的事情，所以我认为了解基础之后再接触 React 的打包器比较重要。

让我们来看看如何使用 TS 来获得一个更优并不容易出错的代码库。

TypeScript 模块

你如果想使用 ES6 import/export模块，你必须设置 tsconfig ：

• target: es6 or higher
• module: es2015 or later

并且在index.html 文件中增加模块类型：

<script type="module" src="app.js"></script>

注意使用模块有两个弊端：

• 和旧浏览器的兼容性不好
• 生产阶段的文件很分散，所以在文件间需要使用大量的请求（这可以通过使用 Webpack 这样的打包器来处理）。

TypeScript 类型

在 JavaScript 中，类型在运行时分配。当编译器遇到变量和值时候再决定它们的类型是什么。这就意味着我们可以这样做：

let job = 'Warrior'; // 字符串
let level = 75; // 数字
let isExpansionJob = false; // 布尔值

level = 'iLevel' + 75;
// 现在是一个字符串

在 TypeScript 中，类型在编译时分配，一旦一个类型被定义就受到该签名的保护：

let job: string = 'Samurai';
let level: number = 75;
let isExpansionJob: boolean = true;

level = 'iLevel' + 75;
// Error, Type string cannot
// be assign to type number!

TypeScript 中的类型推论

实际上不需要明确指定变量类型，TS 可以自行推断：

let job = 'Samurai';
let level = 75;
let isExpansionJob = true;

level = 'iLevel' + 75;
// Error, Type string cannot
// be assign to type number!

在接下来的 React 项目中，我们也会看到类似的推论，如在使用useState的时候：

const [currentMonthFilter, setCurrentMonthFilter] = useState('January');

useEffect(() => {
  setCurrentMonthFilter(1);
  // Error, Type number cannot
  // be assign to type string!
}, []);

TypeScript 中的`any`和`unknown`

我一直说 TS 有静态类型，但有一个细微的点需要说明：

let level: any = 10;

level = 'iLevel' + 125;
// OK, still type any

level = false;
// OK, still type any

欢迎回到 JavaScript！any 是一种动态类型，当你不知道这个变量在未来的值为何时可以使用，当然这也就放弃掉了 TS 提供的所有优势。

let level: any = 10;

level = 'iLevel' + 125;

level = false;

let stringLevel: string = level;
console.log(typeof stringLevel);
stringLevel.replace('false', 'true');

当你将 level分配给stringLevel时，变量类型并没有变成string，而是保持布尔值。所以replace函数并不存在，代码在运行时失效，你会收到报错： Uncaught TypeError: stringLevel.replace is not a function。

在这种情况下我们可以使用比any更安全的替换方案:

let level: unknown = 10;

level = 'iLevel' + 125;

level = false;

let stringLevel: string = level;
// Error

unknown和any一样，可以分配任何类型，当但你想要将它分配给另外一个变量时，编译器会报错。所以当你不知道变量未来是什么类型的值时，使用 unknown 而不是 any。

TypeScript 中的数组

let job = 'Red Mage';
let level = 75;
let isExpansionJob = false;
let jobAbilities = ['Chainspell', 'Convert'];

jobAbilities.push('Composure'); // OK
jobAbilities.push(2); // Error
jobAbilities[0] = 2; // Error

在上面例子中，我们定义了一个由字符串组成的数组：jobAbilities，我们可以在这个数组中添加其他的字符串，但是不能添加其他类型的值，也不能将当前值转换成其他类型。因为在声明数组时，我们将类型推论设置为了 string[]。

let job = 'Red Mage';
let level = 75;
let isExpansionJob = false;
let jobAbilities = ['Chainspell', 'Convert'];
let swordSkill = ['B', 5, 144, 398];

swordSkill.push('B+'); // OK
swordSkill.push(230); // OK

swordSkill[1] = 'C';
// OK, the type is not position related

swordSkill.push(true); // Error

和之前的例子一样，声明时类型推论就形成。所以我们声明了一个由字符串和数组组成的数组swordSkill。

如果你希望指定声明数组的类型，可以：

let jobAbilities: string[] = ['Chainspell', 'Convert'];
let swordSkill: (string | number)[] = ['B', 5, 144, 398];

| 是 union（联合声明）不同的类型。

TypeScript 中的对象

让我们回到例子，不过这一次是以对象的形式：

let job = {
  name: 'Summoner',
  level: 75,
  isExpansion: true,
  jobAbilities: ['Astral Flow', 'Elemental Siphon']
};

job.name = 'Blue Mage'; // OK
job.level = 'Four'; // Error
job.avatars = ['Carbuncle']; // Error

• job.level = "Four" 不可以实现，因为我们不可以修改属性的类型。对象的属性也是静态类型。
• job.avatars = ["Carbuncle"] – 我们不能增加新的属性，因为 job 对象已经拥有一个类型和定义好的结构。

let job = {
  name: 'Summoner',
  level: 75,
  isExpansion: true,
  jobAbilities: ['Astral Flow', 'Elemental Siphon']
};

job = {
  name: 'Blue Mage',
  level: 4,
  isExpansion: true,
  jobAbilities: ['Azure Lore', 'Burst Affinity']
}; // OK

job = {
  name: 'Corsair',
  level: 25,
  isExpansion: true
}; // Error

我们可以分配另一个对象，因为对象是由 let 声明的，但必须是一模一样的形式。

停下来思考一下：有多少次你在前端的工作中，在没有检查的情况下，像这样重复对象结构？有多少次你犯过如data.descrption这样的拼写错误，几天之后你发现问题？如果没有发生过，我保证这种问题迟早会发生。

让我们看看如何指定具体类型：

let job: {
  name: string;
  level: number;
  isExpansion: boolean;
  jobAbilities: string[];
} = {
  name: 'Summoner',
  level: 75,
  isExpansion: true,
  jobAbilities: ['Astral Flow', 'Elemental Siphon']
};

对于一个简单的对象来说，这样可能有一点复杂了，所以我们可以使用类型别名（Type Aliases）。

TypeScript 中的类型别名

type Job = {
  name: string;
  level: number;
  isExpansion: boolean;
  jobAbilities: string[];
};

let Summoner: Job = {
  name: 'Summoner',
  level: 75,
  isExpansion: true,
  jobAbilities: ['Astral Flow', 'Elemental Siphon']
};

let BlueMage: Job = {
  name: 'Blue Mage',
  level: 4,
  isExpansion: true,
  jobAbilities: ['Azure Lore', 'Burst Affinity']
};

使用类型别名可以定义可复用的常见类型。在 React、DOM 和其他的库中有很多这种即用型定义类型。

TypeScript 中的函数

TS 中的函数语法和 JS 类似，但是你可以指定参数类型和返回类型。

type Enemy = {
  name: string;
  hp: number;
  level: number;
  exp: number;
};

let attack = (target: Enemy) => {
  console.log(`Attacking to ${target.name}`);
};

attack = 'Hello Enemy'; // Error

在示例中我使用了箭头函数，你也可以使用普通的函数声明。JS 和 TS 函数的两大不同是：

• 你需要指定传入参数的类型，如 target: Enemy。
• attack变量已经设定了返回类型，之后就不能修改。

函数的类型可以这样声明：

let attack = (target: Enemy): void => {
  console.log(`Attacking to ${target.name}`);
};

当返回值为空的时候可以用void类型，也不需要指定特定类型。

// let attack = (target: Enemy): number => {
let attack = (target: Enemy) => {
  return target.hp - 2;
};

any和void类型有一些不同：

let attack = (target: Enemy): void => {
  console.log(`Attacking to ${target.name}`);
};

attack = (target: Enemy): number => {
  return target.hp - 2;
};

// lizard has 200hp
console.log(attack(lizard)); // 198

上面的示例没有报错：即便你认为将 attack从(target: Enemy) => void变成了 (target: Enemy) => number，类型实际上还是 void。

尝试一下如果首先使用 number来定义函数会怎么样：

let attack = (target: Enemy) => {
  return target.hp - 2;
};

attack = (target: Enemy) => {
  console.log(`Attacking to ${target.name}`);
}; // Error

let attackResult = attack(lizard);

Type '(target: Enemy) => void' is not assignable to the type '(target: Enemy) => number'. Type 'void' is not assignable to the type 'number'，所以在这个情况下 void 和 any类似。

attackResult的类型为 number，没有必要重新指定，TS 会通过函数的返回类型完成推论。

TypeScript 中的可选参数

使用 ?来定义 TS 函数中的可选参数：

let heal = (target: Player | Enemy, spell: Spell, message?: string) => {
  if (message) console.log(message);
  return target.hp + spell.power;
};

heal(player1); // Error
heal(player1, cure, 'Healing player1'); // OK
heal(skeleton, cure); // OK

第一个函数调用不成功是因为我们必须至少传入两个参数，后面两次调用成功。 message是一个可选参数，如果没有传入的话，就被定义为undefined。

这个示例转换为 JS 为：

let heal = (target, spell, message) => {
  if (message) console.log(message);
  return target.hp + spell.power;
};

heal(player1); // Error
heal(player1, cure, 'Healing player1'); // OK
heal(skeleton, cure); // OK

两个函数的基本行为一致，只是 JS 的问题会在运行时显示出来，第一个调用出错的原因是不可以从一个没有定义的值获取 power。

从示例中我们可以发现，TS 的函数更安全，因为你不需要依赖外部环境，也清楚知道需要传入什么参数。

这对于其他使用这个函数的开发者说也是一样的，他们知道需要使用什么参数、形式以及会返回什么参数。

TypeScript 枚举（Enum）

使用枚举，我们可以定义一个常量集合。

enum BattleMenu {
  ATTACK,
  MAGIC,
  ABILITIES,
  ITEMS,
  DISENGAGE
}

enum Equipment {
  WEAPON = 0,
  HEAD = 1,
  BODY = 2,
  HANDS = 3,
  LEGS = 4
}

console.log(BattleMenu.ATTACK, Equipment.WEAPON);
// 0 0

枚举默认是自动序列化的，示例中的两种声明方式对等。

也可以使用枚举来存储字符串，我常在 React 中使用枚举来存储路径：

enum Routes {
  HOME = '/',
  ABOUT = '/about',
  BLOG = '/blog'
}

TypeScript 泛型（Generics）

const getPartyLeader = (memberList: Player[]) => {
  return memberList[0];
};

const partyLeader = getPartyLeader(partyA);

上面代码想要实现一个 getPartyLeader 函数，返回党魁（数组的第一位）。

如果我们想要函数支持除 Player以外的类型呢？根据我们所知的信息，可以采取这样的做法：

const getPartyLeader = (memberList: Player[] | Enemy[]) => {
  return memberList[0];
};

const partyLeader = getPartyLeader(partyA);
// Player[] | Enemy[]

现在我们可以传入 Player组也可以传入 Enemy组，但是 PartyLeader常数可以为两组中任意一种类型，所以使用 Player[] | Enemy[]。

如果我们想要使用指定类型的话，也可以使用泛型：

const getPartyLeader = <T>(memberList: T[]) => {
  return memberList[0];
};

const partyLeader = getPartyLeader(partyA); // Player

partyA 数组内是Player类型， partyLeader 就为 Player类型。 让我们查看语法：

• T 是通常定义泛型的方法，但是你可以采用任意你喜欢的方式。

和使用 any一样， T 接收任意类型。所以我们可以修改传入的参数类型：

type Player = {
  name: string;
  hp: number;
};

type Enemy = {
  name: string;
  hp: number;
};

type Spell = {
  name: string;
  power: number;
};

const getPartyLeader = <T extends { hp: number }>(memberList: T[]) => {
  return memberList[0];
};

const playerPartyLeader = getPartyLeader(partyOfPlayers); // Ok
const enemyPartyLeader = getPartyLeader(partyOfEnemies); // Ok
const whatAreYouTrying = getPartyLeader(spellList); // Error

我们只能传入包含hp属性的对象。

TypeScript 中的元祖（Tuples）

正如我们之前看到的，数组可以包含不同的类型但不受位置限制。元组可以补充这一点。

type Weapon = {
  name: string;
  damage: number;
};

type Shield = {
  name: string;
  def: number;
};

const sword: Weapon = {
  name: 'Onion Sword',
  damage: 10
};

const shield: Shield = {
  name: 'Rusty Shield',
  def: 5
};

let equipment: [Weapon, Shield, boolean];

equipment = [sword, shield, true]; // OK
equipment[2] = false; // OK

equipment = [shield, sword, false]; // Error
equipment[1] = true; // Error

这样我们就拥有了类数组的类型，它关心类型的放置位置。

TypeScript 中的类

由于从 ES6 开始 JS 中添加了类，TS 和 JS 的类大同小异：

class Job {
  public name: string;
  private level: number;
  readonly isExpansion: boolean;

  constructor(name: string, level: number, isExpansion: boolean) {
    this.name = name;
    this.level = level;
    this.isExpansion = isExpansion;
  }
}

const whiteMage = new Job('White Mage', 75, false);

console.log(whiteMage.name); // "White Mage"
console.log(whiteMage.level); // Error
console.log(whiteMage.isExpansion); // false

whiteMage.name = 'Blue Mage'; // Ok
whiteMage.level = 50; // Error
whiteMage.isExpansion = true; // Error

在 TS 类中，你可以访问类属性的修饰符（modifiers）：

• public - 可以自由访问属性和方法，这时 TS 类的默认值
• private - 只能从声明它的类访问
• protected - 限制声明类和子类访问
• readonly - 标记属性为不可变

TypeScript 中的接口（interfaces）

和 类型别名（type aliases)相同，我们可以使用接口（interfaces）来定义类：

interface Enemy {
  name: string;
  hp: number;
}

let attack = (target: Enemy): void => {
  console.log(`Attacking to ${target.name}`);
};

是不是看上去和类型别名很像？那应该使用哪一个呢？两种方法都可以控制不同类型的 TS，并且区别非常小：

你可以遵循以下规则来做取舍：

• 如果你编写面向对象的代码，可以使用接口，如果你编写函数式代码，可以使用 aliases。
• 公共 API 库、组件类型、state、JSX 使用接口。

因此，我在样板中加入了 ESLint 自动将类型别名转换为接口。

如果想要深入了解两者的区别，可以阅读TS 手册中的这篇文章 ，但现在很多使用接口的功能都可以使用类型别名，反之亦然。

TypeScript 中的 DOM 操作

虽然在 React 中直接操作 DOM 的机会不多，但是我觉得还是有必要知道 DOM 的相关知识。

如何从 DOM 检索元素

// HTMLFormElement | null
const form = document.querySelector('form');

// HTMLElement | null
const otherForm = document.getElementById('myFancyForm');

// HTMLSelectElement
const select = document.createElement('select');

执行document.querySelector ("form")时， 常量form被类型推论为HTMLFormElement 或 null。 但在第二个例子中，我们通过 ID 来获取 dom，TS 并不知道是什么 HTML 元素，所以推论为泛型 HTMLElement。

const form = document.querySelector('form');

form.addEventListener('submit', (e: Event) => {
  e.preventDefault();
  console.log(e);
}); // Error

TS 不知道是否能够通过查询选择器在 HTML 找到元素，所以不能对一个可能为 null 的类型添加 addEventListener 函数，你可以这样修改：

我确认会找到元素：

// HTMLFormElement
const form = document.querySelector('form')!;

使用 ! 告诉 TS 放心，一定不会是null。

如果不为 null 运行：

const form = document.querySelector('form');

form?.addEventListener('submit', (e: Event) => {
  e.preventDefault();
  console.log(e);
});

你可能在 JS 可选链式运算符中见过 “?”。

是铸造类型的时候了：

const otherForm = document.getElementById('myFancyForm') as HTMLFormElement;

otherForm.addEventListener('submit', (e: Event) => {
  e.preventDefault();
  console.log(e);
});

通过 HTMLFormElement 告诉 TS 会找到什么类型的元素，而不是 null。

如何结合React + TypeScript

让我们进入文章的第二个部分，记住，在第一个部分我们探讨了为什么使用 TypeScript，如何使用，以及这个语言的概览。

在这个部分，我们将学习如何在 React 中使用 TypeScript，如何解决相应的难题，以及如何使用 React 和 TypeScript 共同创建一个应用。

设置

Create React App

对于 CRA 用户来说，你们只需要设定模板：

npx create-react-app my-awesome-project --template typescript

Vite

使用 Vite 创建 TypeScript 项目和使用 CLI 一样简单，只需要选择 TypeScript 模板：

npm create vite@latest my-awesome-project

添加到现有项目

如果你想要对已经存在的 JavaScript 项目添加 TypeScript，只需要添加对应开发依赖项：

npm install -D typescript

需要提醒你的事，如果是首次使用 TypeScript，不建议你从现有的项目着手。因为这样的话，你会不断地认为你已经有一个可以运行的项目了，而使用 TypeScript 不过是做些无所谓的工作。你没办法从中体会 TypeScript 的优势。

设置组件 Props 类型

在 React 项目中使用 TypeScript 最常用的场景是编写组件 props。

想要正确地编写组件 props，必须定义清楚组件接受什么样的 props、props 类型以及是否是必要的。

// src/components/AnimeDetail/Cover/index.tsx

type CoverProps = {
  url: string;
};

export default function Cover({ url }: CoverProps) {
  // ...
}

我们只使用 url prop ，类型为 string 并且是强制的。

另一个有多个 props 和可选项的例子：

// src/components/AnimeDetail/StreamingList/PlatformLink/index.tsx

type PlatformLinkProps = {
  name: string;
  url?: string;
};

export default function PlatformLink({ name, url }: PlatformLinkProps) {
  // ...
}

使用 ? 来定义可选参数， TypeScript 知道在这个例子中url 的类型是 string，默认值为undefined，即便未传入url ，消费组件也不会报错。

让我们看一个更复杂的例子：

// src/components/AnimeDetail/Detail/index.tsx

type AnimeType = 'TV' | 'Movie';

type DetailProps = {
  liked: boolean;
  toggleFav: () => void;
  title: string;
  type: AnimeType;
  episodeCount: number;
  score: number;
  status: string;
  year: number;
  votes: number;
};

export default function Detail({
  liked,
  toggleFav,
  title,
  type,
  episodeCount,
  score,
  status,
  year,
  votes
}: DetailProps) {
  // ...
}

这次包含众多类型，包括 function和一个自定义类型 AnimeType。

所以总结一下，使用 TS 来编写 props：

• 对于消费组件来说的 props 验证
  • 不需要猜测组件需要什么
  • 不需要打开组件源码来检查需要什么数据
• 自动填充和文档记录
  • 直接从消费组件端知道自动填充的 prop 和 value，不需要提前浏览

如果是使用复杂的组件，或是从第三方库使用组件的，这一定可以派上用场。

React 内置类型

在 React 和很多其他的库中，你会发现大量预置的类型，可以减轻开发者的编写负担。如以下示例：

// src/components/Layout/index.tsx

type LayoutProps = {
  children: React.ReactNode;
};

export default function Layout({ children }: LayoutProps) {
  // ...
}

一个自定义的 React 组件，接受其他元素作为子元素，在这种情况下 children被定义为ReactNode 类型。

一个关于 React.FC 和 React.FunctionComponent 的提醒

你可以能会遇到这样定义组件 props 的语法：

type PlatformLinkProps = {
  name: string;
  url?: string;
};

const PlatformLink: React.FC<PlatformLinkProps> = ({ name, url }) => {
  // ...
};

使用 React.FC或者使用 React.FunctionComponent时，上面的代码生效，但是你需要知道这样使用的弊端，也就是为什么在本文中我们不这样用：

• 必须使用函数表达式而不是函数声明，虽然这是一个很小的点，但是我的编码习惯是使用函数声明。
• 不可以使用泛型（之后会讨论）。
• 在过去，这样会导致 props 非直接地接受children属性，即便该组件并不使用这个属性。直到 React18 之后，这个问题才改善。

React 组件的返回类型

最后一块拼图，组件返回什么？可以使用内置的类型：React.ReactElement、 React.ReactNode和 JSX.Element：

export default function Favorites(): JSX.Element {
  // ...
}

总结一下：让 TypeScript 自行推论返回类型。如果你需要这一部分的详细介绍，我推荐阅读这个来自 stack overflow 的帖子。

集合模板字面量

在动漫预告片项目中，我引入的一个自定义 UI 就是很好的示例。你可以查看src/components/UI中的组件，其中大部分内容都会在本文讨论：

让我们看一下自定义组件Position：

// src/components/UI/Position/index.tsx

import React from 'react';

import { StyledPosition } from './StyledPosition';

type VPosition = 'top' | 'bottom';
type HPositon = 'left' | 'right';

export type PositionValues = `${VPosition}-${HPositon}`;

type PositionProps = {
  children: React.ReactNode;
  position?: PositionValues;
};

export default function Position({
  children,
  position = 'top-right'
}: PositionProps) {
  return <StyledPosition position={position}>{children}</StyledPosition>;
}

Position 是一个简单的组件，可以与任何其他具有绝对位置的组件一起使用，可以通过 top-left, top-right, bottom-left和 bottom-right将组件放置在四个边上。

使用字面量模板来创建新的类型并不新鲜，在这里有趣的地方是结合 ${VPosition}-${HPositon}和联合类型 top | bottom ，TypeScript 会自动生成所有组合，就可以创建我们需要的四种类型。

如何使用 `Exclude`

让我们给上面的例子添加更多值：

type VPosition = 'top' | 'middle' | 'bottom';
type HPositon = 'left' | 'center' | 'right';

export type PositionValues = `${VPosition}-${HPositon}`;

模板会创建所有可能的组合，所以我们将拥有 "top-left" | "top-center" | "top-right" | "top-left" | "center-left" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right"。

有一条比较奇怪： middle-center，我们只需要center，这时就可以使用 Exclude ：

type PositionValues =
  | Exclude<`${VPosition}-${HPositon}`, 'middle-center'>
  | 'center';

这时 PositionValues会生成"center" | "top-left" | "top-center" | "top-right" | "middle-left" | "middle-right" | "bottom-left" | "bottom-center" | "bottom-right"。

使用 exclude 删除middle-center之后再添加center。

自定义 HTML 组件

如果你想创建一个行为类似input的组件，但是你又不想编写 input HTML 的所有属性和方法，你可以这样：

// src/components/UI/Input/index.tsx

import React from 'react';

import styles from './StyledInput.module.css';

type InputProps = React.ComponentProps<'input'>;

const Input = React.forwardRef(
  (props: InputProps, ref: React.Ref<HTMLInputElement>) => {
    return <input {...props} className={styles.StyledInput} ref={ref} />;
  }
);

export default Input;

使用React.ComponentProps，你可以指定你需要基于什么类型创建一个组件，获取一个真正的 HTML input 的功能来自定义 UI 组件。但如果你想覆盖掉一些属性甚至禁用怎么办？

忽略（Omit）

让我们以 UI 组件中的 Tag为例：

// src/components/UI/Tag/index.tsx

import React from 'react';

import { StyledTag } from './StyledTag'; // aka a styled span

type TagProps = {
  variant?: 'solid' | 'outlined';
  text: string;
} & Omit<React.ComponentProps<'span'>, 'children'>;

export default function Tag({ text, variant = 'solid' }: TagProps) {
  return <StyledTag variant={variant}>{text}</StyledTag>;
}

在这个例子中，我们显式地传递了一个text展示组件的 children。你或许不希望消费组件使用原始的children，你可以忽略掉 React.ComponentProps中的这个属性。

定义 Hook 的类型

现在让我们看一下如何编写 React 中一些常用的 hook。

useState hook

大多数情况下，useState 不需要额外的操作，TypeScript 会自行推论。但是如果初始值和未来值不同则需要特别声明。

// src/pages/Search.tsx

export default function Search() {
  const [animeList, setAnimeList] = useState<Anime[] | null>(null);
  const [page, setPage] = useState(1);
  // const [page, setPage] = useState<number>(1)
  // ...
}

page的状态可以根据初始值推论为数字，它的行为和注解里的代码一模一样。state 的 setter 也会定义为 React.Dispatch<React.SetStateAction<number>>， number来替换推论的类型。

如果animeList 没有任何显式类型的话就为 null。在组件获取必要的数据之前这都是正确的，但是最终会是包含 Anime类型集合，所以必须将这个类型显式地设置为这两个可能类型的组合。

除了给 useState 的初始 state 设置为 null 以外，还可以：

export default function Search() {
  // const [animeList, setAnimeList] = useState<Anime[] | null>(null)
  const [animeList, setAnimeList] = useState<Anime[]>([]);
  const [anime, setAnime] = useState<Anime>({} as Anime);
  // ...
}

请仔细观察 anime, setAnime 代码行，它之所以生效是因为这不是一个集合，而是单个元素。
这里的区别在于你对编译器没有完全诚实，你预设会得到这个对象形状（shape）的值，有一定风险。

export default function Search() {
  const [anime, setAnime] = useState<Anime>({} as Anime);
  // ...

  return <div>{anime.coverURL}</div>;
}

如果没有在可选项中提供正确的值，会在运行时报错。

如何将 state 作为 props 传递

多数情况下，是由上至下传递 state，并且等 state 完成或者设置好了才能传递到子组件，所以需要在编写 props 的时候想好状态的类型。

type FancyComponentProps = {
  anime: Anime;
  setAnime: React.Dispatch<React.SetStateAction<Anime>>;
};

const FancyComponent = ({ anime, setAnime }: FancyComponentProps) => {
  // ...
};

最好清楚自己传递的是什么类型。如果你觉得困难的话，可以使用 IDE 的提示。

useReducer hook

你已经具备正确定义 useReducer所需的所有知识。

下面的例子中我简化了代码，正式代码会在泛型部分讲解：

// src/hooks/useFetch.ts

const enum ACTIONS {
  LOADING,
  FETCHED,
  ERROR
}

type State = {
  data?: Anime[];
  loading: boolean;
  error?: Error;
};

type Action =
  | { type: ACTIONS.LOADING }
  | { type: ACTIONS.FETCHED; payload: Anime }
  | { type: ACTIONS.ERROR; payload: Error };

const initialState: State = {
  loading: true,
  error: undefined,
  data: undefined
};

const fetchReducer = (state: State, action: Action): State => {
  switch (action.type) {
    case ACTIONS.LOADING:
      return { ...initialState };
    case ACTIONS.FETCHED:
      return { ...initialState, data: action.payload, loading: false };
    case ACTIONS.ERROR:
      return { ...initialState, error: action.payload, loading: false };
    default:
      return state;
  }
};

const [state, dispatch] = useReducer(fetchReducer, initialState);

和往常一样， status 和 dispatch 来自于使用 useReducer时的 reducer function 以及一个 initial state。你不需要额外编写其他内容，但是你必须编写state 和 actions，因为 state 和 dispatch 的行为是根据它们来的。

initialState

我们可以简化initial state 这个部分。 不是创建一个State类型，而是使用 typeof initialState 来定义。

const initialState: State = {
  loading: true,
  error: undefined,
  data: undefined
};

const fetchReducer = (state: typeof initialState, action: Action) => {
  // ...
};

这样写的弊端是无法控制未来的 data和error的值，如果 state 的类型始终保持一致的话，没有问题，除此之外可以使用自定义 State类型。

Actions

你可以使用组合（union）来处理 reducer 的 action 部分，你也可以选择使用枚举（Emun），这样写的话比在多个地方写字符串要更不容易出错。

reducer function

你只需要指定传入函数的参数的类型，这个已经在上一部分完成。

作为 props 传递

另外，如果你需要从 useReducer 传出 prop，你必须编写对应的消费组件 props。

• state 必须是你定义在 initialState 的类型，或者是例子中的自定义 State类型。
• dispatch 是 React.Dispatch<Action> 中自定义 Action类型。

useContext

示例项目中的上下文用于管理你喜欢动漫的列表，你可以在应用不同地方切换它们的 state。 useContext 并不是一个难点，使用它的方法就是上述内容的结合——让我们一起看代码：

// src/context/FavContext.tsx

type FavContextType = {
  favList: Favorite[];
  // setFavList: React.Dispatch<React.SetStateAction<Favorite[]>>
  toggleFav: (id: number, favorite: Favorite) => void;
};

export const FavContext = createContext({} as FavContextType);

export const FavContextProvider = ({ children }: FavContextProviderProps) => {
  const [favList, setFavList] = useState<Favorite[]>([]);

  const toggleFav = (id: number, favorite: Favorite) => {
    /* ... */
  };

  // ...

  return (
    <FavContext.Provider value={{ favList, toggleFav }}>
      {children}
    </FavContext.Provider>
  );
};

useContext和 useState定义类型的规则相同。在我们的示例中，初始值应该为 null，但是我们使用了一个小技巧，在createContext添加as，并且定义了一个对象，包含一个favourite animes数组，和负责切换的函数。

注解部分是你根据场景需要的特定 setter。

接下来的代码都是你在 useState 中学过的内容。在 Favorite 类型中，useState 会推断必要的类型，这些类型可以直接在消费组件中访问。

// src/components/AnimeDetail/index.tsx

const { favList, toggleFav } = useContext(FavContext);

useRef hook

可以通过两种方式来使用 useRef，我们将分别讲解。

DOM 引用

其中一个方式是使用useRef保持一个 DOM 元素的引用 。

在示例项目中，通过持有对动画列表中最后一项的可观察对象的引用，你会发现它可以无限滚动。这让你知道用户何时在视口中查看该项目并触发新的获取。

让我们查看使用 useRef 来引用 DOM 一个更简短的示例，你也可以查看 useRef + observer 的完整版本：

const myDomReference = useRef<HTMLInputElement>(null);

useEffect(() => {
  if (myDomReference.current) myDomReference.current.focus();
}, []);

一个典型的情况是当页面加载的时候，你希望自动聚焦在输入框，只需要指定好引用的 DOM 元素，在这个示例中就是HTMLInputElement。

使用上面代码需要注意的是：

• 钩子会返回一个只读的 current 属性。
• 你不需要手动编写current，React 会通过React.RefObject<HTMLInputElement>处理。
• 如果 DOM 元素永远指向现在，你可以将初始值设定为 null! 以避开 if 检查。

可变引用

useRef 的第二个使用场景是在渲染之间保持可变值。例如，在你需要为组件的每个实例提供一个唯一变量的情况下，该变量在渲染之间存在并且不会触发重新渲染。

const isFirstRun = useRef(true);

useEffect(() => {
  if (isFirstRun) {
    // ...
    isFirstRun.current = false;
  }
}, []);

使用上面代码，你需要注意的是：

• 现在你可以改变current的值。
• React 提供的 React.MutableRefObject<boolean>现在是RefObject内部的MutableRefObject（可变引用对象）。

传递 ref

如果在某些时候你需要像 useRef 部分那样传递对 HTML 元素的引用，那么为该组件编写 props 会略有不同：

// src/components/AnimeGrid/Card/index.tsx

const Card = React.forwardRef(
  (
    { id, coverURL, title, status, score, type, year }: CardProps,
    ref: React.Ref<HTMLImageElement>
  ) => {
    // ...
  }
);

要传递引用，需要用React.forwardRef打包组件，这将与组件的常规 props 一起注入 ref（是包装在 React.Ref 类型中的任何 HTML 元素）。

这样我们就知道我们传递的 HTML 元素的类型，如果你的使用场景不是这样，可以使用泛型。

如何在 React 中使用 TypeScript 范型

假设我们想通过包装现有的 HTML 元素来创建自定义 UI 组件，但像大多数组件库一样为它提供一组自定义属性。

这些组件库也提供一些灵活性，如哪一个 HTML 元素被渲染由 as属性控制 – Text UI 组件的示例就是这样。

Text UI 组件用来显示一组尺寸和颜色的任意文本，同时我们也希望使用者选择他们需要的 HTML 元素，而不是只限定于 p 或 span。

在这个示例中，你不能提前知道用户会选择什么元素传入组件，所以你需要使用泛型来推断它们使用了什么类型。

所以组件的 prop 如下：

// src/components/UI/Text/index.tsx

type TextOwnProps<T extends React.ElementType> = {
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
  variant?: 'base' | 'primary' | 'secondary';
  as?: T | 'div';
};

type TextProps<T extends React.ElementType> = TextOwnProps<T> &
  React.ComponentPropsWithoutRef<T>;

export default function Text<T extends React.ElementType = 'div'>({
  size = 'md',
  variant = 'base',
  children,
  as = 'div'
}: TextProps<T>) {
  // ...
}

让我们仔细查看上面代码：

• 我们使用T来命名泛型，你也可以使用任意字母。
• T 扩展自React.ElementType，即 HTML 元素的最通用的类型。所以我们知道传递给组件的任何东西都是基于 HTML 元素，而不是所有可能的 HTML 元素的手动类型的组合。
• TextProps 的第二个类型有两个用途：
• 根据 HTML 元素的类型，我们需要额外的属性。当消费组件使用 Text 组件作为label时，我们希望检查并建议与为span时不同的属性。为此，我们需要使用 React.ComponentProps。在这种情况下，我们不需要引用，因此我们显式使用ComponentPropsWithoutRef类型。
• React.ComponentProps同时也提供 children prop，所以不需要在 TextOwnProps引入。
• 你也不需要处理Omit 或者其他排除技术，因为 children 并没有被 TextOwnProps props 修改或者覆盖。

通过这个例子，我们有一个非常灵活的组件，它的类型正确并且提供了良好的开发者体验。

在示例项目中，你可以测试不同的自定义 UI 组件，来检查上述模式的实现。

定义自定义 useFetch Hook 类型

在示例项目中，我编写了一个简单的钩子来获取数据，并且利用localStorage来暂时缓存数据，这样就不会超出 API 的限制。这没什么大不了的，但我认为它是本文中解释的所有内容的完整示例。

让我们一起看看这个钩子——但是我更推荐你查看实际文件，以及理解这本文章不同部分的讲解。

// src/hooks/useFetch.ts

type State<T> = {
  data?: T;
  loading: boolean;
  error?: Error;
};

function useFetch<T = unknown>(
  url?: string,
  { initialFetch, delayFetch }: Options = { initialFetch: true, delayFetch: 0 }
): State<T> {
  // ...
}

• 钩子接受一个泛型，你并不能提前知道你将处理什么类型的数据。
• 钩子接受 url 来确定从哪里获取资源，以及一个选项来决定是否需要初始获取，以及两次获取之间有没有延迟。
• 如果不设置 options 拥有默认值。
• 钩子返回一个类的 State，由消费组件通过泛型指定。
• 状态类型定义由消费组件提供的可选数据类型：如加载标志变量，或者发生错误时返回的 error。

让我们看一下消费组件的使用情况：

// src/pages/AnimeDetail.tsx

const { data, loading, error } = useFetch<JikanAPIResponse<RawAnimeData>>(
  getAnimeFullById(Number(id))
);

• getAnimeFullById 返回终端的 URL。
• useFetch会返回 JikanAPIResponse类型的data，根据情况不同，返回的数据也不同。在我们的示例中为 RawAnimeData。

总结

本文探索了 TypeScript 能够解决的一些常见痛点。特别是当你和团队一起工作，并且完全理解每一个组件的输入和输出、钩子以及上下文，TypeScript 非常有用。

使用 TypeScript 意味着代码更加可靠、记录更完善以及可读性更强。同时也更不容易出错并且更好管理。

编写代码不仅仅是创建一个有效的算法。你也和别人一起工作（即便你是独立开发者，你也要发表你的作品，寻求他人的帮助和协作），在这些场景中，组员之间的沟通是关键。

我喜欢将 TypeScript 类比为人类的 Babel：我们通过 Babel 来优化 CPU 的使用，同时也需要一个类似的 Babel 来指导和扩展团队合作。

还剩下一个问题，什么时候需要使用 TypeScript?

• 如果你和别人协作，或者你计划发表代码，你可能希望代码可读性更好，更能够清晰表达你的想法。
• 如果你在编写一个大型项目。

所有大项目都是由小项目组成，所以注意这里“大型”的定义。

这篇文章相当长，如果你读到这里，我对你的付出和热情表示感谢。我的初衷并不是文章的曝光，而是解释清楚为什么。

希望你喜欢这篇文章，如果你已经从 JS 转换成 TS，或者两个都在使用，或者思考过是否使用但是暂时不考虑以及其他任何情况——我非常期待听到你的分享。