目的

旨在快速掌握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)