目的
旨在快速掌握React hooks并上手干需求，因此只讲用法及注意事项，原理部分略去。
适用于：
- 以前只写
class component的同学 - 主要写
Vue的同学
概念简要说明
概念1: 函数式组件
不是新概念，16.8以前就有了。但16.8以后的函数组件特指可以使用hook来定义状态、使用副作用的加强版函数式组件，即jsx、状态、副作用都定义在一个函数中的组件。
概念2: Hooks
即“钩子函数”，对于React来说主要是useXxx的一系列函数。
官方提供的如useState, useEffect, useContext, useRef等较为常用，也可以自定义实现，但必须以use开头。
概念3: 渲染与重新渲染
实质上是页面、组件函数的执行与再执行，后面会提到的重新渲染指的是组件、页面函数被重新执行了一遍。
概念4: 响应式
React所有数据都不是响应式的，更新视图靠重新渲染。所以不要把Vue的思想带到React中来。
因此，你可以认为React就没有引入响应式概念。
概念5: 浅比较
对于基本类型是值相等，对于复杂类型（Object）即为引用相等。另，对于React来说，有时候+0和-0并不是一回事。
对于下面的代码：
const dict1 = {};
const dict2 = {};
console.log(Object.is(dict1, dict2)); // false
React比较两个对象状态、props的时候就是采用上面代码中的方式，而不是Vue中的深比较（或者说值相等）。
思考题:
如何利用上面的特性实现强制更新视图的useForceUpdate?
如何创建一个函数组件
一般用React hooks都会搭配TypeScript使用，甚至可以说，不用TypeScript搭配就失去React hook的价值了。
比较通用的模板是：
无props:
import React from 'react';
// 定义组件
const Component: React.FC = () => {
// --- 组件逻辑 ---
};
export default Component;
含props:
import React from 'react';
// 定义属性
interface IProps {
// props类型表
}
// 定义组件
const Component: React.FC<IProps> = props => {
// --- 组件逻辑 ---
};
export default Component;
如果组件中有children，一般不要自己定义，而是用React提供的工具类型。
法一（React >= 18）：
React >= 18必须引入PropsWithChildren。
import React, { type FC, type PropsWithChildren } from 'react';
// 定义属性
interface IProps {
// props类型表
}
// 定义组件
const Component: FC<PropsWithChildren<IProps>> = props => {
const { children } = props;
// --- 组件逻辑 ---
};
export default Component;
法二（适用于 React 16.8+，但版本小于18）：
React < 18无必要刻意引入PropsWithChildren。
import React, { type FC } from 'react';
// 定义属性
interface IProps {
// props类型表
}
// 定义组件
const Component: FC<IProps> = props => {
const { children } = props;
// --- 组件逻辑 ---
};
export default Component;
使用useState创建状态
用法如下：
import React from 'react';
const { useState } = React;
// 定义组件
const Component: React.FC = () => {
// useState用法
const [num, setNum] = useState(0);
// 改变state状态
const addNum = () => {
setNum(oldValue => oldValue + 1);
};
// 省略jsx
};
export default Component;
注意：示例代码中是函数式更新, 一般推荐用函数式更新。当然，如果值比较简单，也可以用
setNum(2)这种形式。
对于对象形式来说，应该以如下形式更新：
const [dict, setDict] = useState({ value: 0 });
// 这样不可以, 因为dict是只读的。
// dict.value += 1;
// 这样才可以
setDict(oldDict => ({
// 必须先copy一份
...oldDict,
value: oldDict.value + 1
}));
对象形式的更新，建议直接使用
useImmer库。
注意：useState中的state变化，会导致一次重新渲染。
使用useEffect追踪state, props变更后产生的副作用
用法如下：
import React from 'react';
const { useState, useEffect } = React;
// 定义组件
const Component: React.FC = () => {
// useState用法
const [num, setNum] = useState(0);
// 改变state状态
const addNum = () => {
setNum(oldValue => oldValue + 1);
};
// Count变化时，执行副作用
useEffect(() => {
console.log(count);
}, [count]);
// 省略jsx
};
export default Component;
思考：以下代码中的useEffect函数是否会被执行
import React from 'react';
const { useState, useEffect } = React;
// 定义组件
const Component: React.FC = () => {
// useState用法
const [dict, setDict] = useState({});
// 改变state状态。
const changeDict = () => {
setDict({});
};
// 思考当执行完changeDict后，这里会不会执行？
useEffect(() => {
console.log('dict被改变了');
}, [dict]);
// 省略jsx
};
export default Component;
答案：会的
useRef的用法
缓存可变数据，但直接变更不会引起视图的重新渲染
理解这里的可变数据：即对于对象值，可以直接赋给其中某个属性，即如果需要改state中的对象必须先浅拷贝，但useRef后的.current可以直接修改属性值。
唯一要注意的是，useRef是缓存值，不引起重新渲染。试运行下列代码：
例：
import { type FC, useRef } from 'react';
const Component: FC = () => {
const numRef = useRef(0);
const dictRef = useRef({ num: 1 });
// 点我10次效果如何呢？
const addNum = () => {
numRef.current += 1;
};
const addNumInDict = () => {
dictRef.current.num += 1;
// 打开控制台看这里
console.log(dictRef.current);
};
return (
<div>
<p>{numRef.current}</p>
<button type="button" onClick={addNum}>点我10次，上面的数值是否更新?</button>
</div>
);
};
答案：useRef缓存下来的值，无论如何变更都不会主动引起视图更新。
useMemo可视为带返回值的useEffect
useMemo和useEffect接受的入参类型一模一样，只是唯一区别是useEffect首参中必须return一个用于清除副作用的函数或什么都不返回，而useMemo返回依赖变更后重新计算的值。
例:
import React from 'react';
const { useState, useEffect, useMemo } = React;
// 定义组件
const Component: React.FC = () => {
const [num, setNum] = useState(0);
const changeNum = () => {
setNum(oldValue => oldValue + 1);
};
// num2会随着num变化重新计算
const num2 = useMemo(() => {
return num * 2;
}, [num]);
// num2InFact: 计算成本低的其实根本用不着useMemo
const num2InFact = num * 2;
// 省略jsx
};
export default Component;
虽然useMemo可以视为手动指定依赖的计算属性，但是上面也提到，计算成本不高的不必使用useMemo。但实际情况下，大部分useMemo都是多余的，大量useMemo反而不仅不能优化性能，还容易造成反向优化。因为useMemo本质上是空间换时间，过多的useMemo反而容易占用太多内存，从而导致内存爆炸。
那什么时候用useMemo呢？一个常用场景是对于<Context.Provider> 组件来说，其value值非常有必要useMemo。另一个是需要复杂计算才能得出的值，或者复杂对象，这种情况下有可能有必要（但实际情况可能也没必要）。
借这一部分谈谈如何理解useCallback？只需要记住如下等价公式就可以：
useCallback<T extends Function>(fn) = useMemo<T extends Function>(() => fn)
网友评论