React Hooks 入门

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

Api

• 基础 Hook
  • useState
  • useEffect
  • useContext
• 额外的 Hook
  • useReducer
  • useCallback
  • useMemo
  • useRef
  • useImperativeHandle
  • useLayoutEffect
  • useDebugValue

useState

1import React, { useState } from 'react'
2
3function Example() {
4    // 声明一个叫 “count” 的 state 变量。
5    const [count, setCount] = useState(0)
6
7    return (
8        <div>
9            <p>You clicked {count} times</p>
10            <button onClick={() => setCount(count + 1)}>Click me</button>
11        </div>
12    )
13}
14

useEffect

1import React, { useState, useEffect } from 'react'
2
3function Example() {
4    const [count, setCount] = useState(0)
5
6    // 相当于 componentDidMount 和 componentDidUpdate:
7    useEffect(() => {
8        // 使用浏览器的 API 更新页面标题
9        document.title = `You clicked ${count} times`
10    })
11
12    return (
13        <div>
14            <p>You clicked {count} times</p>
15            <button onClick={() => setCount(count + 1)}>Click me</button>
16        </div>
17    )
18}
19

useReducer (useState 的替代方案)

1const initialState = { count: 0 }
2
3function reducer(state, action) {
4    switch (action.type) {
5        case 'increment':
6            return { count: state.count + 1 }
7        case 'decrement':
8            return { count: state.count - 1 }
9        default:
10            throw new Error()
11    }
12}
13
14function Counter() {
15    const [state, dispatch] = useReducer(reducer, initialState)
16    return (
17        <>
18            Count: {state.count}
19            <button onClick={() => dispatch({ type: 'increment' })}>+</button>
20            <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
21        </>
22    )
23}
24

useCallback

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

返回一个 memoized 回调函数。

useMemo

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

返回一个 memoized 值。

useRef

1const refContainer = useRef(initialValue)
2

useRef 返回一个可变的 ref 对象

useImperativeHandle

1useImperativeHandle(ref, createHandle, [deps])
2

useLayoutEffect

其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。

useDebugValue

1useDebugValue(value)
2

useDebugValue 可用于在 React 开发者工具中显示自定义 hook 的标签。