React Hook是React函数式组件，它不仅仅有函数组件的特性，还带有React框架的特性。所以，官网文档多次强调：
只在 React 函数中调用 Hook
不要在普通的 JavaScript 函数中调用 Hook。你可以：
- ✅ 在 React 的函数组件中调用 Hook
- ✅ 在自定义 Hook 中调用其他 Hook
1. 那么 React 中 Function Component 与 Class Component 有何不同？
Class Component:
class ProfilePage extends React.Component {
showMessage = () => {
alert("Followed " + this.props.user);
};
handleClick = () => {
setTimeout(this.showMessage, 3000);
};
render() {
return ;
}
}
Function Component:
function ProfilePage(props) {
const showMessage = () => {
alert("Followed " + props.user);
};
const handleClick = () => {
setTimeout(showMessage, 3000);
};
return ;
}
如下父级组件的调用方式：
场景：那么当点击按钮后的 3 秒内，父级修改了 this.state.user，弹出的用户名是修改前的还是修改后的呢？
答案：Class Component 展示的是修改后的值，Function Component 展示的是修改前的值
原因：this 在 Class Component 中是可变的，当组件入参发生变化时， this.props同步改变。而 Function Component 不存在this.props 的语法，因此 props 总是不可变的。
2. 用Hook 创建函数组件，会有什么变化呢？
import React, { useState, useCallback } from "react";
import ReactDOM from "react-dom";
function Example() {
const [count, setCount] = useState(0);
const handleAlertClick = useCallback(()=>{
setTimeout(() => {
alert('You clicked on: ' + count);
}, 3000)
}, [count]);
return (
You clicked {count} times
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(场景：点击 显示 按钮，在 3s 后（模拟耗时任务）会出现弹层。在这 3s 期间快速点击 增加 count 按钮
结果：3s 后看到的弹层计数仍旧为 0！
原因：在 handleAlertClick 函数执行的那个 Render 过程里，count 的值可以看作常量 。执行 setCount(count + 1) 时会交由一个全新的 Render 渲染，所以不会执行 handleAlertClick 函数。
那我们用useEffect 改造一下呢？
const [count, setCount] = useState(0);
useEffect(()=>{
setTimeout(() => {
alert('count: ' + count);
}, 3000)
}, [count]); // 监听count变化
return (
You clicked {count} times
);
}
...
行为：三秒钟内点击“增加 count”按钮三次。
结果：先显示0（初始化），然依次显示1，2，3，useEffect被触发4次。
原因：useEffect也是具有 Capture Value 的特性，每次render都是独立快照，拿到的 count 都是固化下来的常量。和上面例子不同之处在于，它监听了count变化，可以被触发多次Render。
什么是Capture Value?
每次 Render 的内容都会形成一个快照并保留下来，因此当状态变更而 Rerender 时，就形成了 N 个 Render 状态，而每个 Render 状态都拥有自己固定不变的 Props 与 State。
3. 如何绕过 Capture Value？
利用 useRef ！
useRef定义
useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。
ref 类型的变量通常是用来存储 DOM 元素引用。
但在 react hooks 中，它可以存放任何可变数据，并在所有 Render 过程中保持着唯一引用，因此所有对 ref 的赋值或取值，拿到的都只有一个最终状态，而不会在每个 Render 间存在隔离。
function Example() {
const [count, setCount] = useState(0);
const countRef = useRef(count);
const handleAlertClick = useCallback(
() => {
setTimeout(() => {
alert("You clicked on: " + countRef.current);
}, 3000);
},
[count]
);
return (
You clicked {count} times
);
行为：三秒钟内点击“增加 count”按钮三次。
结果: 先显示0（初始化），3s 后显示3次3。
4. useEffect搭配useReducer
利用 useEffect 的兄弟 useReducer 函数，可以将更新与动作解耦。
const [state, dispatch] = useReducer(reducer, initialState);
const { count, step } = state;
useEffect(() => {
const id = setInterval(() => {
dispatch({ type: "tick" }); // Instead of setCount(c => c + step);
}, 1000);
return () => clearInterval(id);
}, [dispatch]);
这就是一个局部 “Redux”，由于更新变成了dispatch({ type: "tick" }) 所以不管更新时需要依赖多少变量，在调用更新的动作里都不需要依赖任何变量。 具体更新操作在 reducer 函数里写就可以了
5. useMemo vs useCallback
按照官网说法，两个的相同点和不同点非常明确（React教程）
- 相同点：
- 都会在组件第一次渲染的时候执行
- 依赖的变量发生改变时再次执行
- 返回缓存的值
- 不同点：
-
useMemo返回缓存的变量 -
useCallback返回缓存的函数
-
useCallback(fn, deps)相当于useMemo(() => fn, deps)
5.1 useMemo实例
export function useDocumentMap() {
const { docState: { sideBarList = [] } = {} } = useStore()
return useMemo(() => getDocumentMap(sideBarList), [sideBarList])
}
getDocumentMap是一个复杂计算函数，sideBarList为store里存储的值。UI显示的时候，需要做一次model=>UI model的转换。因为这个转换需要复杂计算，所以用useMemo做缓存，在sideBarList不变的情况下，调用useDocumentMap获取UI model只会计算一次。
5.2 useCallback实例
import React, { useState, useCallback } from 'react';
import Button from './Button';
export default function App() {
const [count1, setCount1] = useState(0);
const [count2, setCount2] = useState(0);
const handleClickButton1 = () => {
setCount1(count1 + 1);
};
const handleClickButton2 = useCallback(() => {
setCount2(count2 + 1);
}, [count2]);
return (
);
}
// Button组件
import React from 'react';
const Button = ({ onClickButton, children }) => {
return (
<>
{Math.random()}
);
};
export default React.memo(Button);
可见Button组件只依赖onClickButton和children。
如果点击Button1，因为count1的值发生变化，导致容器App重新渲染，handleClickButton1变量重新被声明（又创建了一个新的函数对象），从而第一个Button被再次渲染。而handleClickButton2呢？因为被useCallback包了一层，且依赖count2，所以，此时handleClickButton2变量不会被重新声明，还是之前的函数引用地址，所以，第二个Button不会被重复渲染。
React.memo这个方法，会对 props 做一个浅层比较，如果 props 没有发生改变，则不会重新渲染此组件
5.3 总结
- 如果有函数传递给子组件，使用
useCallback - 如果有值传递给子组件，使用
useMemo -
useMemo、useCallback都自带闭包，类似useEffect的Capture Value能力
参考文章：
理解 React Hooks 的 Capture Value 特性
精读《useEffect 完全指南》