Hook
- React 16.8.0 是第一个支持 Hook 的版本;
使用原因
- 使用组件之间复用逻辑更容易（对比高阶组件， props render，providers，consumers）；
- Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据）;
特性
- 通过在函数组件里调用它来给组件添加一些内部 state。React 会在重复渲染时保留这个 state；
import React, { useState, useEffect } from 'react';
function Example() {
// 声明一个叫 “count” 的 state 变量。
const [count, setCount] = useState(0);
// 相当于 componentDidMount 和 componentDidUpdate
useEffect(() => {
document.title =You clicked ${count} times;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
} - Hook 在 class 内部是不起作用的。但你可以使用它们来取代 class；
- Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数；
- 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
- 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。（还有一个地方可以调用 Hook —— 就是自定义的 Hook 中）
- 如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其转化为 class。现在你可以在现有的函数组件中使用 Hook。
State Hook
定义
- 调用useState方法定义一个 'state' 变量;
- useState唯一参数就是变量初始值;
- useState返回 state 以及更新 state 的函数;
读取
直接使用useState返回的变量名，如定义const [count, setCount] = useState(0)，读取时直接读取count
更新
直接通过setCount更新，如onClick={() => setCount(count+1)}
Effect Hook
定义：
useEffect(() => {
// Update the document title using the browser API
document.title =You clicked ${count} times;
});作用和componentDidMount and componentDidUpdate类似;
如果你的 effect 返回一个函数，React 将会在执行清除操作时调用它;
如果声明了多个effect，将按照 effect 声明的顺序依次调用组件中的每一个 effect;
-
可以实现在特定时机更新：
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
}, [props.friend.id]); // 仅在 props.friend.id 发生变化时，重新订阅
Hook规则
- 只在最顶层使用 Hook
- 只在 React 函数或自定义 Hook 中调用 Hook
自定义Hook
- 自定义 Hook 必须以 “use” 开头;
- 自定义 Hook 定义在最顶部;
- 一般自定义Hook可以作为React自带Hook的封装，返回一个内部state值;
Hook概览
基础 Hook
- useState
- useEffect
- useContext
额外的 Hook
- useReducer
- useCallback
- useMemo
- useRef
- useImperativeHandle
- useLayoutEffect
- useDebugValue
