简单直观的 React Hooks 速查手册

useState

使函数组件可以拥有内部的状态。

1
2
3
const [state, setState] = useState(initialState)

setState(newState)

useEffect

使函数组件可以在 render 时可以进行一些副作用操作。

1
2
3
4
5
6
7
8
9
useEffect(() => {
// 操作
...

// 清理操作
return () => {
...
}
}, dependencyList) // dependencyList 为 [] 时,仅在组件挂载和卸载时执行

useContext

使函数组件可以使用 context。

1
const myContext = useContext(MyContext)

useReducer

useState 的替代方案,易于处理逻辑较复杂且包含多个子值的 state。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function reducer(state, action) {
switch (action.type) {
case 'TYPE_1':
...
break
case 'TYPE_2':
...
break
case 'TYPE_3':
...
break
default:
...
}
}

const [state, dispatch] = useReducer(reducer, initialState)

useCallback

1
2
3
const memoizedCallback = useCallback(() => {
doSomething(a, b)
}, [a, b])

useMemo

用于创建一个 memoized 值,它仅会在某个依赖项改变时才重新计算 memoized 值,有助于避免在每次渲染时都进行高开销的计算。

1
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])

useRef

返回 ref 对象。

1
2
3
4
5
6
7
8
9
const ref = useRef(initialValue)

...

return (
<div ref={ref}>
...
</div>
)

useImperativeHandle

1
useImperativeHandle(ref, createHandle, [deps])

useLayoutEffect

使函数组件可以在所有的 DOM 变化后可以进行一些副作用操作。可以使用它来读取 DOM 并触发重渲染。

1
2
3
4
5
6
7
8
9
useLayoutEffect(() => {
// 操作
...

// 清理操作
return () => {
...
}
}, dependencyList) // dependencyList 为 [] 时,仅在组件挂载和卸载时执行

useDebugValue

用于在 React 开发者工具中显示 hook 的调试信息。

1
2
3
4
5
6
7
8
9
10
11
function useFriendStatus(friendID) {
const [isOnline, setIsOnline] = useState(null)

// ...

// 在开发者工具中的这个 Hook 旁边显示标签
// e.g. "FriendStatus: Online"
useDebugValue(isOnline ? 'Online' : 'Offline')

return isOnline
}

参考资料

延伸阅读