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 <button onClick={this.handleClick}>Follow</button>;
}
}
Function Component:
function ProfilePage(props) {
const showMessage = () => {
alert("Followed " + props.user);
};
const handleClick = () => {
setTimeout(showMessage, 3000);
};
return <button onClick={handleClick}>Follow</button>;
}
如下父级组件的调用方式：
<ProfilePageFunction user={this.state.user} />
<ProfilePageClass user={this.state.user} />
场景：那么当点击按钮后的 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 (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
增加 count
</button>
<button onClick={handleAlertClick}>
显示 count
</button>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<Example />, rootElement);
场景：点击 显示 按钮，在 3s 后（模拟耗时任务）会出现弹层。在这 3s 期间快速点击 增加 count 按钮
结果：3s 后看到的弹层计数仍旧为 0！
原因：在 handleAlertClick 函数执行的那个 Render 过程里，count 的值可以看作常量 。执行 setCount(count + 1) 时会交由一个全新的 Render 渲染，所以不会执行 handleAlertClick 函数。
那我们用useEffect 改造一下呢？
...
useEffect(()=>{
setTimeout(() => {
alert('count: ' + count);
}, 3000)
}, [count]); // 监听count变化
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
增加 count
</button>
<button onClick={() => setCount(count - 1)}>
减少 count
</button>
</div>
);
}
...
结果：会先显示 1，然后显示 0。useEffect被触发两次。
原因：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 (
<div>
<p>You clicked {count} times</p>
<button
onClick={() => {
countRef.current = count + 1;
setCount(count + 1);
}}
>
增加 count
</button>
<button onClick={handleAlertClick}>显示 count</button>
</div>
);
结果: 3s 后 alert 显示的 count的值就是最后设置的结果！
4. useEffect搭配useCallback
useCallback可以将 Function 写在 Effect 外面，并提供memoized能力。
const [query, setQuery] = useState("react");
const fetchData = useCallback(() => {
const url = "https://hn.algolia.com/api/v1/search?query=" + query;
// ... 获取数据
}, [query]); // ✅ 监听query变化
return <Child fetchData={fetchData} />;
}
function Child({ fetchData }) {
let [data, setData] = useState(null);
useEffect(() => {
fetchData().then(setData);
}, [fetchData]); // ✅ Effect 监听fetchData
// ...
}
useCallback 做的事情，就是在其依赖变化时，返回一个新的函数引用，触发 useEffect 的依赖变化，并激活其重新执行
5. 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 函数里写就可以了
参考文章：
理解 React Hooks 的 Capture Value 特性
精读《useEffect 完全指南》
微信公众号：
网友评论