Hooks 各个击破

大纲链接 §

[toc]

React 内置的 Hooks 主要有以下几个：

  • useState 组件状态
  • useEffect 副作用
    • useLayoutEffect
  • useContext 上下文
  • useMemo 缓存
    • useCallback 回调
  • useReducer 统一状态管理（替代Redux）
  • useRef 引用
    • useImperativeHandle
  • useDebugValue 自定义

1. useState ⇧

使用组件状态

  • const [n, setN] = React.useState(0) 原始类型
  • const [user, setUser] = React.useState({name: 'F'}) 复杂类型

注意事项1：不可局部更新属性，不自动合并 ⇧

  • 如果state是一个复杂类型（对象等），禁止部分setState，示例代码
    • 因为setState不会自动合并属性，缺失没有写入的属性
    • useReducer也不会自动合并

  • 解决方法：使用 ...，在对象中拷贝原状态的属性，再局部覆盖同名属性

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

    import React, {useState} from "react";
import ReactDOM from "react-dom";

function App() {
const [user,setUser] = useState({name:'Franche', age: 18})
const onClick = () => {
setUser({
...user,
  name: 'Jack' // 同名覆盖原先的name属性
})

/*
setUser({
  name: 'Jack' // 缺失 age 属性
})
*/
}
return (
<div className="App">
  <h1>{user.name}</h1>
  <h2>{user.age}</h2>
  <button onClick={onClick}>Click</button>
</div>
);
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

注意事项2：地址要变 ⇧

  • setState(obj) 如果obj不变，那么React中数据不变

  • React 只侦测对象地址变化，不侦测同对象的属性变化

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

    import React, {useState} from "react";
import ReactDOM from "react-dom";

function App() {
const [user,setUser] = useState({name:'Franche', age: 18})
const onClick = () => {
// 错误的演示：地址不变，React中数据不变
user.name = 'Mick'
setUser(user) // 不会更新UI
/*
setUser({
  ...user,
  name: 'Jack'
}) // 传入的是一个新对象

*/
}
return (
<div className="App">
  <h1>{user.name}</h1>
  <h2>{user.age}</h2>
  <button onClick={onClick}>Click</button>
</div>
);
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

注意事项3 接受函数 ⇧

useState接受函数：const [x, setX] = useState(()=>{})

  • const [state, setState] = useState( () => {return initialValue} )
  • const [state, setState] = useState( () => ({/*initialValue*/}) )
  • 该函数返回初始state，且只执行一次
    • 区别于useState传对象，JS每次会解析该对象
    • useState传工厂函数，减少内部多余的计算过程

setState接受函数：setState(()=>{})

  • setN(i => i + 1)

  • 代码示例

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

    import {useState} from 'react'
import ReacDOM from 'react-dom'

function App() {
const [n, setN] = useState(0)
const onClick = () => {
setN(n + 1) // n 不会变
setN(n + 2) // 只有最后一次有效
/* 发现 n 不能 +1 再 +2 */

// 改为传函数则符合预期
setN(i => i + 1)
setN(i => i + 1)
}
return (
<div className="app">
  <h1>n: {n}</h1>
  <button onClick={onClick}>+2</button>
</div>
)
}
const rootElement = document.getElementById('root')
reactDOM.render(<App />, rootElement)

  • setN(i => i + 1)并不直接传值，而是传一个函数来操作，形参占位符i命名随便

  • 如果需要对setN多次操作，更推荐使用函数

2. useReducer ⇧

用来践行 Flux/Redux 的思想

  • 代码示例，共分4步走
    • 1.创建初始值initialValue
    • 2.创建所有操作reducer(state, action)
    • 3.传给useReducer(所有操作, 初始数据)，获取 读 和 写 的 API
    • 4.调用 写dispatch({type: '操作类型'})，不是直接操作state，而是通过reducer来操作

  • 总的来说useReducer就是useState的复杂版

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

    import {useReducer} from 'react'
import ReactDOM from 'react-dom'

// 1. 创建初始值 initialValue
const initialValue = {n: 0, m: 0}

// 2. 创建所有操作 reducer(state旧的状态, action操作含有自定义的属性)
/*
* @params({}) state
* @params({type: string}) action
* @return newState
*/
const reducer = (state, action) => {
if(action.type === 'add') {
// 不可以直接操作属性 state.n += 1; return state 同useState的规则
// return {...state, n: state.n + 1}
return {...state, n: state.n + action.number} // 还可以传额外属性参数
} else if(action.type === 'multi2') {
return {...state, n: state.n * 2}
} else {
throw new Error('unknown type')
}
}

function App() {
// 3. 传给 useReducer，获取 读 和 写 的 API
const [state, dispatch] = useReducer(reducer, initialValue)
// 也可以直接解构出属性 const {n} = state

const onClick = () => {
// 4. 调用 写dispatch({type: '操作类型'})
// dispatch({type: 'add'}) // 调用`add`分支操作
dispatch({type: 'add', number: 1}) // 还可以传额外属性参数
}
const onClickAdd2 = () => {
dispatch({type: 'add', number: 2})
}
const onClickMulti2 = () => {
dispatch({type: 'multi2'})
}

return (
<div className="app">
  <h1>n: {state.n}</h1>
  <button onClick={onClick}>n + 1</button>
  <button onClick={onClickAdd2}>n + 2</button>
  <button onClick={onClickMulti2}>n * 2</button>
</div>
)
}
const rootElement = document.getElementById('root')
reactDOM.render(<App />, rootElement)

  • 不可以直接操作属性 state.n += 1; return state 同useState的规则

  • 对多个状态做整体操作

  • 将所有操作聚拢在函数const reducer = (state, action) => {}中

    • 通过action的不同属性，来调用对应不同的分支操作
    • 通过action还可以传额外属性

  • 每次用户操作更新数据，App就重新render一遍

如何判断使用useReducer还是useState

  • 事不过三原则：有多个数据可以在一起放入同一个对象里，就适用useReducer，对这个对象做整体操作

  • 例如表单中的数据，见 用useReducer表单代码示例：

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

    // import...

const initFormData = {
name: 'xxx',
age: 18,
nationality: '泰伦'
}

// 汇总操作
function reducer(state, action) {
switch (action.type) {
case "patch": // 更新 合并新旧属性
  return {...state, ...action.formData}
case "reset": // 重置
  return initFormData
default:
  throw new Error('type传错了')
}
}

// 生成表单数据
const formDataGenerator = (text, value, cb) => ({ text, value, cb })

function App() {
console.log('App执行了一遍')

// 获取读写接口
const [formData, dispatch] = useReducer(reducer, initFormData)

// 表单操作
const onReset = () => { dispatch({type: 'reset'}) }
const onSubmit = () => {alert('提交了'); onReset()}

// 提取patch公共方法
const patch = (key, value) => {
dispatch({type: 'patch', formData: {[key]: value} })
}

// 表单汇总数据
const formContentList = [
formDataGenerator( '姓名', formData.name, e => patch('name', e.target.value) ),
formDataGenerator( '年龄', formData.age, e => patch('age', e.target.value) ),
formDataGenerator( '名族', formData.nationality, e => patch('nationality', e.target.value) )
]

return (
<form onSubmit={onSubmit} onReset={onReset}>
  {
    formContentList.map(item => {
      return (
        <div key={item.text}>
          <label>
            {item.text}
            <input value={item.value} onChange={item.cb} />
          </label>
        </div>
      )
    })
  }
  <div>
    <button type="submit">提交</button>
    <button type="reset">重置</button>
  </div>
  <hr/>
  {JSON.stringify(formData)}
</form>
)
}

// render...

3. 用 useReducer 代替 redux ⇧

辅助函数和基本结构 ⇧

辅助函数，假的AJAX获取数据，调用时传入参数 url，返回对应数据

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

// 辅助函数
// 假 ajax
// 两秒钟后，根据 path 返回一个对象，必定成功不会失败
function ajax(path) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (path === "/user") {
        resolve({
          id: 1,
          name: "Frank"
        });
      } else if (path === "/books") {
        resolve([
          {
            id: 1,
            name: "JavaScript 高级程序设计"
          },
          {
            id: 2,
            name: "JavaScript 精粹"
          }
        ]);
      } else if (path === "/movies") {
        resolve([
          {
            id: 1,
            name: "爱在黎明破晓前"
          },
          {
            id: 2,
            name: "恋恋笔记本"
          }
        ]);
      }
    }, 2000);
  });
}

基本结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

import React, { useReducer, useContext, useEffect, createContext } from "react";
import ReactDOM from "react-dom";

// 统一的数据储存
const store = {
  user: null,
  books: null,
  movies: null
}

// 统一的操作
const reducer = (state, action) => {}

// 统一的上下文 数据提供 组件
const Context = createContext(null)

function User() {
  const {state, dispatch} = useContext(Context) // 注意是获取对象使用花括号
  return (
    <div>
      <h1>个人信息</h1>
    </div>
  )
}

function Books() {
  const {state, dispatch} = useContext(Context)
  return (
    <div>
      <h2>书籍信息</h2>
    </div>
  )
}

function Movies() {
  const {state, dispatch} = useContext(Context)
  return (
    <div>
      <h2>电影信息</h2>
    </div>
  )
}

function App() {
  // 创建对数据的读写API
  const [state, dispatch] = useReducer(reducer, store)
  return (
    {/* 统一的上下文 数据提供 */} {/* 提供数据对象 {state, dispatch} ES6对象语法缩写 */}
    <Context.Provider value={{state, dispatch}}>
      <User />
      <hr />
      <Books />
      <Movies />
    </Context.Provider>
  )
}

// render...

复杂useReducer使用步骤 ⇧

  1. 将数据几种在一个store对象中
  2. 将所有操作集中在reducer方法中
  3. 创建一个Context
  4. 创建对数据的读写API
  5. 将第四步的内容{state, dispatch}放到第三步的上下文数据提供组件中
  6. 用Context.Provider将Context提供给所有子组件
    • <Context.Provider value={{state, dispatch}}>{/* 里面是各个子组件 */}</Context.Provider>
  7. 各个组件用useContext获取读写API：const {state, dispatch} = useContext(Context)（注意是获取对象使用花括号）

当前示例代码

  • 请求获取mock数据，ajax('/user').then（user => {dispatch({type: 'setUser', user})}（ES6对象属性简写）

  • 每次刷新组件时，都会再去请求一次AJAX，为了防止每次渲染就请求一次，可以使用useEffect只在进入页面时请求一次

    • useEffect(() => {}, [])，第二个参数传一个空数组，那么只会在第一次进入页面时运行，之后永远不会再执行（之后有更好的方式）

       1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

      // import...

// 统一的数据储存
const store = {
user: null,
books: null,
movies: null
}

// 统一的操作
const reducer = (state, action) => {
switch (action.type) {
case "setUser":
return { ...state, user: action.user };
case "setBooks":
return { ...state, books: action.books };
case "setMovies":
return { ...state, movies: action.movies };
default:
throw new Error();
}
}

// 统一的上下文 数据提供 组件
const Context = createContext(null)

function User() {
const {state, dispatch} = useContext(Context)
// 模拟请求用户数据
useEffect(() => {
ajax('/user').then(user => {dispatch({type: 'setUser', user})})
}, []) // 模拟 componentDidMount
return (
<div>
<h1>个人信息</h1>
<div>name: {state.user ? state.user.name : "加载中"}</div>
</div>
)
}

function Books() {
const {state, dispatch} = useContext(Context)
// 模拟请求书籍数据
useEffect(() => {
ajax('/books').then(books => {dispatch({type: 'setBooks', books})})
}, [])
return (
<div>
<h2>书籍信息</h2>
<ol>
{state.books
  ? state.books.map(book => <li key={book.id}>{book.name}</li>)
  : '加载中'
}
</ol>
</div>
)
}

function Movies() {
const {state, dispatch} = useContext(Context)
// 模拟请求电影数据
useEffect(() => {
ajax('/movies').then(movies => {dispatch({type: 'setMovies', movies})})
}, [])
return (
<div>
<h2>电影信息</h2>
<ol>
{state.movies
  ? state.movies.map(movie => <li key={movie.id}>{movie.name}</li>)
  : '加载中'
}
</ol>
</div>
)
}

function App() {
// 创建对数据的读写API
const [state, dispatch] = useReducer(reducer, store)
return (
<Context.Provider value={{state, dispatch}}>
{/* 统一的上下文 数据提供 */} {/* 提供数据对象 {state, dispatch} ES6对象语法缩写 */}
<User />
<hr />
<Books />
<Movies />
</Context.Provider>
)
}

// render...

模块化处理 ⇧

目录

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

src
┣ component
   ┣ User.jsx
   ┣ Books.jsx
   ┗ Movies.jsx
┣ reducers
   ┣ use_reducer.js
   ┣ books_reducer.jsx
   ┗ movies_reducer.jsx
┣ context.js
┣ ajax.js
┣ main.jsx
┗ ...

main.jsx

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

import React, { useReducer, useContext, useEffect, createContext } from "react";
import ReactDOM from "react-dom";
import User from './component/User'
import Books from './component/Books'
import Movies from './component/Movies'
import Context from './Context'
import ajax from './ajax'
import userReducer from './reducers/use_reducer'
import booksReducer from './reducers/books_reducer'
import moviesReducer from './reducers/movies_reducer'

// 统一的数据储存
const store = {
  user: null,
  books: null,
  movies: null
}

// 引入reducer操作表
const reducerHash = {
  ...userReducer,
  ...booksReducer,
  ...moviesReducer,
}

// 统一的reducer操作 查找reducer操作表
const reducer = (state, action) => {
  if(reducerHash[action.type]) {
    return reducerHash[action.type](state, action)
  } else {
    throw new Error('type错误')
  }
}

function App() {
  // 创建对数据的读写API
  const [state, dispatch] = useReducer(reducer, store)
  return (
    <Context.Provider value={{state, dispatch}}>
    {/* 统一的上下文 数据提供 */} {/* 提供数据对象 {state, dispatch} ES6对象语法缩写 */}
      <User />
      <hr />
      <Books />
      <Movies />
    </Context.Provider>
  )
}

  • 注意使用策略模式（表驱动）重构reducer代码。如下，之后可拆分为模块文件，分别导入，方便增加其他接口

    1
2
3
4
5

    const reducerHash = {
'setUser': (state, action) => ({...state, user: action.user}),
'setBooks': (state, action) => ({...state, books: action.books}),
'setMovies': (state, action) => ({...state, movies: action.movies}),
}

     1
 2
 3
 4
 5
 6
 7
 8
 9
10

    // 改为引入模块
import userReducer from './reducers/use_reducer'
import booksReducer from './reducers/books_reducer'
import moviesReducer from './reducers/movies_reducer'
// 引入reducer操作表
const reducerHash = {
...userReducer,
...booksReducer,
...moviesReducer,
}

use_reducer

1
2
3

export default {
  'setUser': (state, action) => ({...state, user: action.user})
}

books_reducer

1
2
3

export default {
  'setBooks': (state, action) => ({...state, books: action.books})
}

movies_reducer

1
2
3

export default {
  'setMovies': (state, action) => ({...state, movies: action.movies})
}

User.jsx

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

import React, {useContext, useEffect} from "react";
import Context from './Context'
import ajax from './ajax'

function User() {
  const {state, dispatch} = useContext(Context)
  // 模拟请求用户数据
  useEffect(() => {
    ajax('/user').then(user => {dispatch({type: 'setUser', user})})
  }, []) // 模拟 componentDidMount
  return (
    <div>
      <h1>个人信息</h1>
      <div>name: {state.user ? state.user.name : "加载中..."}</div>
    </div>
  )
}
export default User

Books.jsx

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import React, {useContext, useEffect} from "react";
import Context from './Context'
import ajax from './ajax'

function Books() {
  const {state, dispatch} = useContext(Context)
  // 模拟请求书籍数据
  useEffect(() => {
    ajax('/books').then(books => {dispatch({type: 'setBooks', books})})
  }, [])
  return (
    <div>
      <h2>书籍信息</h2>
      <ol>
        {state.books
          ? state.books.map(book => <li key={book.id}>{book.name}</li>)
          : '加载中...'
        }
      </ol>
    </div>
  )
}
export default Books

Movies.jsx

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import React, {useContext, useEffect} from "react";
import Context from './Context'
import ajax from './ajax'

function Movies() {
  const {state, dispatch} = useContext(Context)
  // 模拟请求电影数据
  useEffect(() => {
    ajax('/movies').then(movies => {dispatch({type: 'setMovies', movies})})
  }, [])
  return (
    <div>
      <h2>电影信息</h2>
      <ol>
        {state.movies
          ? state.movies.map(movie => <li key={movie.id}>{movie.name}</li>)
          : '加载中...'
        }
      </ol>
    </div>
  )
}
export default Movies

Context.js

1
2
3

// 统一的上下文 数据提供 组件
const Context = createContext(null)
export default Context

ajax.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

// 假 ajax
// 两秒钟后，根据 path 返回一个对象，必定成功不会失败
function ajax(path) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (path === "/user") {
        resolve({
          id: 1,
          name: "Frank"
        });
      } else if (path === "/books") {
        resolve([
          {
            id: 1,
            name: "JavaScript 高级程序设计"
          },
          {
            id: 2,
            name: "JavaScript 精粹"
          }
        ]);
      } else if (path === "/movies") {
        resolve([
          {
            id: 1,
            name: "爱在黎明破晓前"
          },
          {
            id: 2,
            name: "恋恋笔记本"
          }
        ]);
      }
    }, 2000);
  });
}
export default ajax
  • 小结：使用useReduce和useContext/createContext就可以代替Redux
  • 但更复杂的场景，可使用Redux-Saga等
  • 在自定义hooks中可实现完全代替

4. useContext ⇧

上下文

  • 全局变量 是 全局的 上下文
  • 上下文 是 局部的 全局变量

使用方法，可分为三步

  • 使用const Ctx = createContext(initialValue) 创建上下文
    • 初始值initialValue可以为null
  • 使用<Context.Provider></Context.Provider>圈定作用域范围，在标签内部写子组件
    • 在此标签上添加需要传入的初始属性value，一般是一个包含读和写接口的对象
    • <Context.Provider value={{state, dispatch}}></Context.Provider>
    • 也可声明中间变量 const contextValue = { state, dispatch } 直接传这个对象
    • <Context.Provider value={contextValue}></Context.Provider>

  • 在作用域内，使用useContext(Ctx)，来使用上下文

    • 获取读和写的接口const {state, dispatch} = useContext(Ctx)

       1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

      const Ctx = createContext(null)

function App() {
const [n, setN] = useState(0)
return (
<Ctx.Provider value={{n, setN}}>
<div className="app">
<Baba />
</div>
</Ctx.Provider>
)
}

function Baba() {
const {n, setN} = useContext(Ctx)
return (
<div>
爸爸 得到的n: {n}
<Child />
</div>
)
}
function Child() {
const {n, setN} = useContext(Ctx)
const onClick = () => {setN(i => i + 1)}
return (
<div>
儿子 得到的n: {n}
<button onClick={onClick}>+1</button>
</div>
)
}

  • useContext将数据传递给圈定的作用域内所有子孙代组件

  • 可以配合useState或者useReducer来获取读写接口

使用useContext注意事项 ⇧

区别于Vue，数据更新不是响应式的，而只是一个重新渲染的过程（从上而下逐级通知setN重新渲染）

  • 在一个模块中，将Ctx里的值改变（动态Context）
  • 在另一个模块不会感知到这个变化
  • 在某个子组件中触发setN变更数据，通知根组件<App />变更，然后 自顶向下，逐级 通知使用到数据的组件去更新数据
  • 数据流向始终是单向的

5. useEffect & useLayoutEffect ⇧

useEffect ⇧

副作用（函数式概念）

  • 对环境的改变即为 副作用，例如修改 document.title
  • 但不一定非要把副作用放在useEffect里
  • 实际上，称为 useAfterRender 更好，即每次render后运行

用途

  • 模拟组件生命周期的三个钩子函数
    • 作为componentDidMount使用，将空数组[]作为第二个参数
    • 作为componentDidUpdate使用，第二个参数指定依赖 [n] 放在数组中
    • 作为componentWillUnmount使用，通过return () => {}
    • 路由中常用，在此钩子中做清理工作，防止内存泄漏
    • 对回京做的任何变动，组件卸载时都需要清理
  • 第二个参数 和 返回的回调 决定了回调函数什么时候再次执行
  • 以上三种用途可同时存在

特点

  • 如果同时存在多个useEffect，会按照 出现次序 执行

代码示例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

function App() {
  const [n, setN] = useState(0)
  const onClick = () => {
    setN(i => i + 1)
  }

  // App第一次渲染 mount
  useEffect(() => {
    console.log('第一次渲染之后执行')
  }, []) // 表示 [] 里的状态变化后再次执行，没有变量就不会再次执行

  // App 任何数据更新后渲染 update
  useEffect(() => {
    console.log('任何一个state状态变化时，即每次渲染之后都执行')
  }) // 不写第二个参数表示 任何依赖变化时都执行

  // 具体到某个数据更新后渲染 update
  useEffect(() => {
    console.log(`当依赖n变化，渲染后执行，第${n}次也变化了`)
  }, [n]) // 依赖n变化时执行

  // 排除第一次初始化数据的更新 具体到某个数据更新后渲染 update
  useEffect(() => {
    if(n !== 0) {
      console.log(`当依赖n变化，渲染后执行，不算初始化的那次`)
    }
  }, [n])

  // App第一次渲染 实现 setInterval
  useEffect(() => {
    const id = setInterval(() => {
      console.log('hi')
    }, 1000)
    return () => {
      window.clearInterval(id) // 防止内存泄漏
    }
  }, [])

  return (
    <div>
      n: {n}
      <button onClick={onClick}>+1</button>
    </div>
  )
}

useLayoutEffect ⇧

useEffect在浏览器渲染完成后执行，代码示例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

const BlinkyRender = () => {
  const [v, setV] = useState(0)
  useEffect(() => {
    document.querySelector('#x').innerText = 'value: 1000'
  }, [v])
  return (
    <div id="x" onClick={() => {
      setValue(0)
    }}>
      value: {v}
    </div>
  )
}
  • 页面渲染时有一个闪烁，value从0迅速变为1000

useLayoutEffect称为 “布局副作用”， 在浏览器渲染前执行

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

const BlinkyRender = () => {
  const [v, setV] = useState(0)
  useLayoutEffect(() => {
    document.querySelector('#x').innerText = 'value: 1000'
  }, [v])
  return (
    <div id="x" onClick={() => {
      setValue(0)
    }}>
      value: {v}
    </div>
  )
}
  • 页面没有出现闪烁问题
  • 有很多DOM操作，浏览器会等DOM操作完了再渲染
    • useEffect在浏览器渲染改变屏幕像素之后
    • useLayoutEffect在DOM操作完了，紧接着执行回调（对 Layout有影响的操作），然后再去渲染（改变屏幕像素之前）

useLayoutEffect

useEffect V.S. useLayoutEffect ⇧

  • 通过时间点来侧面证明，代码示例

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

    const App = () => {
const [n, setN] = useState(0)
const time = useRef(null)
const onClick = () => {
setN(i => i + 1)
time.current = performance.now() // beforeRender
}

useLayoutEffect(() => {
// afterRender
if(time.current) {
  console.log(performance.now() - time.current)
}
})

useEffect(() => {
// afterRender
if(time.current) {
  console.log(performance.now() - time.current)
}
})

return (
<div className="app">
  <h1>n: {n}</h1>
  <button onClick={onClick}>Click</button>
</div>
)
}

  • 全局API performance.now()可以记录当前时间

  • 从第二次点击开始计算

  • useEffect总是比useLayoutEffect慢，是因为useEffect在改变外观之后执行，而useLayoutEffect在改变外观之前执行

特点

  • useLayoutEffect总是比useEffect先执行，代码示例
  • useLayoutEffect里的回调最好时改变 Layout，否则没有意义

经验

  • 虽然可以避免屏幕闪烁，但大部分时候不会去改变DOM，所以并不是总是使用useLayoutEffect更好
  • 为了用户体验，优先使用 useEffect （优先渲染）
    • useLayoutEffect操作的优先级，但会影响（延长）用户看到画面变化的时间

6. useMemo ⇧

使用useMemo前，先需要理解 React.memo ⇧

  • React默认总是有多余的render，即使渲染的数据没有发生改变，代码示例

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

    function App() {
const [n, setN] = React.useState(0);
const [m, setM] = React.useState(0);
const onClick = () => {
setN(n + 1);
};

return (
<div className="App">
  <div>
    <button onClick={onClick}>update n {n}</button>
  </div>
  <Child data={m}/>
</div>
);
}

function Child(props) {
console.log("child 执行了");
console.log('假设这里有大量代码')
return <div>child: {props.data}</div>;
}

  • Child只依赖了{m}，而当数据{n}改变了，重新渲染App，连带着也会重新渲染Child，即使{m}未发生改变

  • 如果props不变，就没有必要再次执行一个函数组件

  • 代码中的Child用React.memo(Child)代替，封装一层

变更后的效果，见示例代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

function App() {
  const [n, setN] = React.useState(0);
  const [m, setM] = React.useState(0);
  const onClick = () => {
    setN(i => i + 1);
  };
  const onClick2 = () => {
    setM(i => i + 1);
  };

  return (
    <div className="App">
      <div>
        <button onClick={onClick}>update n {n}</button>
        <button onClick={onClick2}>update m {m}</button>
      </div>
      <Child2 data={m} />
    </div>
  );
}

function Child(props) {
  console.log("child 执行了");
  console.log("假设这里有大量代码");
  return <div>child: {props.data}</div>;
}

const Child2 = React.memo(Child);
  • React.memo(Child)使得一个组件只有在依赖（例如props）变化时，才会再次执行渲染

简化代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

function App() {
  const [n, setN] = React.useState(0);
  const [m, setM] = React.useState(0);
  const onClick = () => {
    setN(i => i + 1);
  };
  const onClick2 = () => {
    setM(i => i + 1);
  };

  return (
    <div className="App">
      <div>
        <button onClick={onClick}>update n {n}</button>
        <button onClick={onClick2}>update m {m}</button>
      </div>
      <Child1 data={m} />
    </div>
  );
}

const Child = React.memo( (props) => { // 封装一层 React.memo
  console.log("child 执行了");
  console.log("假设这里有大量代码");
  return <div>child: {props.data}</div>;
  }
);

React.memo的bug ⇧

示例代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

function App() {
  console.log('App执行了')
  const [n, setN] = React.useState(0);
  const [m] = React.useState(0);
  const onClick = () => {
    setN(n + 1);
  };
  const onClickChild = () => { // 每次App运行，生成新的函数
    console.log(m);
  };

  return (
    <div className="App">
      <div>
        <button onClick={onClick}>update n {n}</button>
      </div>
      <Child2 data={m} onClick={onClickChild} />
      {/* Child2 居然又执行了 */}
    </div>
  );
}

function Child(props) {
  console.log("child 执行了");
  console.log("假设这里有大量代码");
  return (
    <div onClick={props.onClick}>child: {props.data}</div>
  );
}

const Child2 = React.memo(Child);
  • 在监听了函数之后，一秒破功，Child2 居然又执行了
  • 因为App每次重新运行时，都会在执行const onClickChild = () => {}处，生成新的函数
  • 新旧函数虽然功能一样，但是内存地址不一样

配合使用useMemo解决React.memo的问题

  • useMemo可以实现函数的缓存，比对函数内容，相同的话使用之前的缓存的函数
  • useMemo的返回值就是需要缓存的函数
  • 使用useMemo来返回出需要传入子组件的函数，并给定依赖作为第二个参数

示例代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

function App() {
  const [n, setN] = useState(0);
  const [m, setM] = useState(0);
  const onClick = () => {
    setN(i => i + 1);
  };
  const onClick2 = () => {
    setM(i => i + 1);
  };
  const onClickChild = useMemo(() => {
    const fn = div => {
      console.log("on click child, m: " + m);
      console.log(div);
    };
    return fn;
  }, [m]); // 这里把 [m] 改成 [n] 就会打印出旧的 m
  return (
    <div className="App">
      <div>
        <button onClick={onClick}>update n {n}</button>
        <button onClick={onClick2}>update m {m}</button>
      </div>
      <Child2 data={m} onClick={onClickChild} />
    </div>
  );
}

function Child(props) {
  console.log("child 执行了");
  console.log("假设这里有大量代码");
  return (
    <div onClick={e => props.onClick(e.target)}>
      child: {props.data}
    </div>
  );
}

const Child2 = React.memo(Child);

useMemo特点

  • 第一个参数是() => value，见源码useMemo 的TS类型声明
  • 第二个参数是依赖 [m, n]
  • 只有当依赖变化时，才会计算出新的value
  • 如果依赖不变，那么就重用之前的value
  • 这与Vue的computed相类似，用来缓存依赖一些不变化的数据

useMemo注意事项

  • 如果value传的是函数，那么就要写成 useMemo(() => (x) => {})，这是一个返回函数的函数（高阶函数/组件）

形式上复杂难用，于是就有了useCallback

useCallback是useMemo的语法糖

用法

  • 使用 useCallback(x => consolog(x), [m])
  • 等价于 useMemo(() => x => console.log(x), [m])

7. useRef ⇧

useRef用途： ⇧

  • 如果需要一个值，在组件不断render时保持不变，可以使用useRef
    • 初始化：const count = useRef(0)
    • 读取值：count.current
  • 区别于setN，n 每次渲染都会变更

需求：要知道组件渲染了几次，使用一个变量记录（全局变量会污染命名环境）

  • 使用useRef，每次渲染时更新useEffect(() => {count.current += 1})，得到一个新的count，而count.value在内存中的引用不变

  • 渲染 count对象地址不变，其中的current值被记录在useRef对应的一个fiberNode上，示例代码

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

    function App() {
console.log('App 执行')
const count = useRef(0)
const [n, setN] = useState(0)
const onClick = () => {
setN(i => i + 9)
}
// DidUpdate
useEffect(() => {
count.current += 1
console.log('count.current', count.current)
})
return (
<div className="app">
  <div>
    <button onClick={onClick}>update n {n}</button>
  </div>
</div>
)
}

useRef

useRef读取值为什么需要.current？ ⇧

  • 为了保持新旧组件更新前后两次useRef是同一个引用对象（只有引用能做到，保持引用地址不变）

对比三个数据变化的钩子函数

  • useState/useReducer：n每次都变
  • useMemo/useCallback：在依赖[n]变更时，对应的函数fn改变，有条件地变
  • useRef：n永远不变

useHooks_state

延伸

  • Vue3的 ref()
    • 初始化：const count = ref(0)
    • 读取值：count.value

  • 不同点：

    • 当count.value变化时，Vue3会自动render，帮你实现了UI更新

    • 而React中使用useRef不会自动更新UI，代码示例

       1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

      function App() {
console.log("App 执行");
const count = useRef(0);
const [n, setN] = useState(0);
const onClick = () => {
setN((i) => i + 9);
};
const onClick2 = () => { // 并不会触发UI更新
count.current += 1;
console.log("count.current onClick", count.current);
};
useEffect(() => {
console.log("count.current update", count.current);
});
return (
<div className="app">
<div>
<button onClick={onClick}>update n {n}</button>
<br />
<button onClick={onClick2}>update count.current {count.current}</button>
</div>
</div>
);
}

useRef不能做到变化时自动render刷新UI，需要额外步骤 ⇧

  • 因为不符合React的函数式理念：UI = render(data)
    • 每次data变化时，使用函数（例如setState）去渲染成新的虚拟DOM
    • 将新的虚拟DOM与页面上旧的虚拟DOM做DOM Diff，得到一个patch补丁
    • 根据这个patch补丁去重渲染DOM
  • 如果想要变化时自动render，可以自定义去实现（使用setN），React不管

  • 监听ref，当ref.current变化时，再加一个依赖，调用setX即可，示例代码

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

    function App() {
console.log("App 执行");
const count = useRef(0);
const [n, setN] = useState(0);
const [_, set_] = useState(null);
const onClick = () => {
setN((i) => i + 9);
};
const onClick2 = () => {
count.current += 1;
set_(Math.random());
console.log("count.current onClick", count.current);
};
useEffect(() => {
console.log("count.current update", count.current);
console.log("--------------------");
});
return (
<div className="app">
  <div>
    <button onClick={onClick}>update n {n}</button>
    <br />
    <button onClick={onClick2}>update count.current {count.current}</button>
  </div>
</div>
);
}

8. useRef配合forwardRef用在函数组件中 ⇧

基本用法：让函数组件 <Button2 /> 支持 ref，获取其虚拟DOM的引用

  • 代替原生使用id，和document.getElementById来获取元素

函数组件中会警告无法直接使用useRef 代码示例1：props无法传递ref属性

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

function App() {
  const buttonRef = useRef(null);
  return (
    <div className="app">
      <div>
        <Button2 ref={buttonRef}>按钮</Button2>
      </div>
    </div>
  );
}

const Button2 = (props) => {
  console.log("props", props);
  return <button className="red" {...props}></button>;
};
  • 报警告Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
  • useRef作为元素的引用是在类组件中使用的，即只有类组件可以直接接受ref元素引用
  • 提示函数组件去使用forwardRef
  • 组件内打印console.log("props", props);得到object {children: "按钮"}，只把按钮传过去了，其他属性都忽略了

代码示例2：函数组件中使用React.forwardRef包裹一层组件，可声明第二个形参ref，实现函数组件ref的组件间传递

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

function App() {
  const buttonRef = useRef(null);
  return (
    <div className="App">
      <Button3 ref={buttonRef}>按钮</Button3>
    </div>
  );
}

/*
const Button2 = (props, ref) => {
  console.log("props: ", props);
  console.log("ref:", ref);
  return <button className="red" ref={ref} {...props} />;
};
const Button3 = forwardRef(Button2);
*/

const Button3 = React.forwardRef((props, ref) => {
  return <button className="red" ref={ref} {...props} />;
});
  • 函数组件需要接受外部传来的ref参数，必须用React.forwardRef包起来
    • <Button ref={buttonRef}>...</Button>
    • const Button = React.forwardRef((props, ref) => (<button ref={ref} {...props} />))

代码示例3：两次ref传递得到button的引用，实现可移动的按钮（高阶组件封装）（仍有bug，待修复）

  • 功能包装：const MovableButton = movable(Button2)

  • 通过ref引用到Button2里面的按钮：const buttonRef = useRef(null)，需要做两次传递

    • 第一次 将 <MovableButton name="email" ref={buttonRef}> 传给 movable(Component) 中返回的 <Component ref={ref} {...props} />
    • 即movable(Button2) 中返回的 <Button2 ref={ref} {...props} />

    • 第二次 Button2 组件声明时传递 React.forwardRef((props, ref) => { return <button ref={ref} {...props} />; });

       1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

      function App() {
// 赋上 可拖拽的 功能
const MovableButton = movable(Button2);
// 获取引用
const buttonRef = useRef(null);
// update
useEffect(() => {
console.log(buttonRef.current);
});
return (
<div className="App">
<MovableButton name="email" ref={buttonRef}>
按钮
</MovableButton>
</div>
);
}

// 函数组件 forwardRef 引用包装
const Button2 = React.forwardRef((props, ref) => {
return <button ref={ref} {...props} />;
});

// 仅用于实验目的，不要在公司代码中使用
function movable(Component) {
function Component2(props, ref) {
console.log(props, ref);

// 初始化
const [position, setPosition] = useState([0, 0]);
const lastPosition = useRef(null);

// 方法
const onMouseDown = (e) => {
lastPosition.current = [e.clientX, e.clientY];
};
const onMouseMove = (e) => {
// e.nativeEvent.stopImmediatePropagation(); //阻止冒泡
if (lastPosition.current) {
const x = e.clientX - lastPosition.current[0];
const y = e.clientY - lastPosition.current[1];
setPosition([position[0] + x, position[1] + y]);
lastPosition.current = [e.clientX, e.clientY];
}
};
const onMouseUp = () => {
lastPosition.current = null;
};

return (
<>
{/*套一层 div */}
<div
  className="movable"
  onMouseDown={onMouseDown}
  onMouseMove={onMouseMove}
  onMouseUp={onMouseUp}
  style={{
    left: position && position[0],
    top: position && position[1]
  }}
>
  <Component {...props} ref={ref} />
</div>
</>
);
}
return React.forwardRef(Component2);
}

useRef V.S. forwardRef

  • 由于大部分时候不需要，所以props不包含ref
  • 由于函数组件的参数 props不包含ref，所以需要React.forwardRef包裹一层，才可以传递 ref
  • React.forwardRef就是在函数组件中用来转发ref的

9. useImperativeHandle ⇧

  • Imperative 重要的
  • 命名太长：其实意思就是setRef：用来变更ref
  • 作用是自定义ref的属性

不用useImperativeHandle的 代码示例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

function App() {
  const buttonRef = useRef(null);
  useEffect(() => {
    console.log(buttonRef.current); // 打印出 <button>按钮</button>
  });
  return (
    <div className="App">
      <Button2 ref={buttonRef}>按钮</Button2>
      <button
        className="close"
        onClick={() => {
          console.log(buttonRef);
          buttonRef.current.remove();
        }}
      >
        x
      </button>
    </div>
  );
}
  • 如果希望得到的ref是一个对button的自定义封装对象，则需要使用useImperativeHandle

使用useImperativeHandle的 代码示例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

function App() {
  const buttonRef = useRef(null);
  useEffect(() => {
    console.log(buttonRef.current); // 打印出 {x: ƒ x(), realButton: Object}
  });
  return (
    <div className="App">
      <Button2 ref={buttonRef}>按钮</Button2>
      <button
        className="close"
        onClick={() => {
          console.log(buttonRef);
          buttonRef.current.x();
        }}
      >
        x
      </button>
    </div>
  );
}

const Button2 = React.forwardRef((props, ref) => {
  const realButton = createRef(null);
  const setRef = useImperativeHandle;
  setRef(ref, () => {
    return {
      x: () => {
        realButton.current.remove();
      },
      realButton: realButton
    };
  });
  return <button ref={realButton} {...props} />;
});

10. 自定义 Hook ⇧

  • 使用自定义 Hook 来封装数据操作

简单代码示例

  • 直接获取处理过的数据 const { list /*, setList */ } = useList();
  • 处理数据的逻辑封装在自定义Hook中，只暴露读和写的接口
  • 初始化状态 const [list, setList] = useState(null)
  • DidMount时 请求数据
  • 返回出读和写的接口

  • 处理相关的逻辑都写在一个钩子函数中，运行时暴露出读和写的接口

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

    // import...
import useList from "./hooks/useList";
function App() {
const { list /*, setList */ } = useList();
return (
<div className="App">
  <h1>List</h1>
  {list ? (
    <ol>
      {list.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ol>
  ) : (
    "加载中..."
  )}
</div>
);
}

  • useList.js

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

    import { useState, useEffect } from "react";

const useList = () => {
// 初始化 state
const [list, setList] = useState(null);
// mounted时 请求数据
useEffect(() => {
ajax("/list").then(list => {
  setList(list);
});
}, []); // [] 确保只在第一次运行

// 暴露读和写的接口
return {
list: list,
setList: setList
};
};
export default useList;

function ajax() {
return new Promise((resolve, reject) => {
setTimeout(() => {
  resolve([
    { id: 1, name: "Frank" },
    { id: 2, name: "Jack" },
    { id: 3, name: "Alice" },
    { id: 4, name: "Bob" }
  ]);
}, 2000);
});
}

功能更全的代码示例

  • 不仅提供了读和写的借口，增删改查等其他功能

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

    // import...
import useList from "./hooks/useList";
function App() {
const { list, deleteIndex } = useList();
return (
<div className="App">
  <h1>List</h1>
  {list ? (
    <ol>
      {list.map((item, index) => (
        <li key={item.id}>
          {item.name}
          <button onClick={() => {deleteIndex(index);}}>
            x
          </button>
        </li>
      ))}
    </ol>
  ) : (
    "加载中..."
  )}
</div>
);
}

  • useList.js

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

    import { useState, useEffect } from "react";

const useList = () => {
const [list, setList] = useState(null);
useEffect(() => {
ajax("/list").then(list => {
  setList(list);
});
}, []); // [] 确保只在第一次运行
return {
list: list, // 查
addItem: name => { // 增
  setList([...list, { id: Math.random(), name: name }]);
},
deleteIndex: index => { // 删
  setList(list.slice(0, index).concat(list.slice(index + 1)));
}
};
};
export default useList;

function ajax() {
return new Promise((resolve, reject) => {
setTimeout(() => {
  resolve([
    { id: "1", name: "Frank" },
    { id: "2", name: "Jack" },
    { id: "3", name: "Alice" },
    { id: "4", name: "Bob" }
  ]);
}, 2000);
});
}

分析

  • 还可以在自定义Hook里使用Context
  • useState只说了不能在if里，没说不能在函数里运行
    • 只要这个函数在函数组件里运行即可
  • 实际业务中，使用良好的组件封装，更抽象的自定义Hook封装，来代替页面组件中直接使用useState、uesEffect等钩子
  • 使用函数组件，就没有必要使用Redux了

11. Stale Closure过时的闭包 ⇧

代码示例

  • 期待打印自增的count
  • 结果每次打印都是相同的count

  • 打印的count是过时的闭包，而不是后续操作产生的新的count

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

    function WatchCount() {
const [count, setCount] = useState(0);
useEffect(function() {
setInterval(function log() {
  console.log(`Count is: ${count}`);
}, 2000);
}, []);
return (
<div>
  {count}
  <button onClick={() => setCount(count + 1) }>
    Increase
  </button>
</div>
);
}

  • 把依赖[count]放入useEffect，更新DidUpdate时同时更新闭包

  • 同时卸载WillUnmount时（return () => {}） 清除上一次组件卸载时的 id，来干掉旧的闭包

  • 代码中的两处id调用时机不同

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

    function WatchCount() {
const [count, setCount] = useState(0);
useEffect(function() {
const id = setInterval(function log() { // 每次更新时创建新的id
  console.log(`Count is: ${count}`);
}, 2000);
return function() {
  clearInterval(id); // 清除上一次组件卸载时的id，调用时机不同
}
}, [count]);
return (
<div>
  {count}
  <button onClick={() => setCount(count + 1) }>
    Increase
  </button>
</div>
);
}

  • 避免保留下过时的闭包，每次更新前需要重新获取新的闭包

  • 或者在返回的函数中 读取最新的闭包，而不是在返回的函数外

题外话

  • JS中有许多需要避免的bug或者反模式
    • 隐式类型转换，用===
    • 过时的闭包
    • 空值判断，用??
    • 异步
    • 过长的条件分支，用策略模式（表驱动）

12. 总结 ⇧ 

1
2
3
4
5
6
7
8
9

flowchart LR
    React_Builtin_Hooks --> 状态...useState
    React_Builtin_Hooks --> 副作用...useEffect --> useLayoutEffect
    React_Builtin_Hooks --> 上下文...useContext
    React_Builtin_Hooks --> Redux...useReducer
    React_Builtin_Hooks --> 记忆...useMemo...配合React.memo --> 回调...useCallback
    React_Builtin_Hooks --> 引用...useRef --> forwardRef
    引用...useRef --> useImperativeHandle
    React_Builtin_Hooks --> 自定义...Hook --> useDebugValue
·未完待续·

参考文章 ⇧

相关文章 ⇧

  • 作者： Joel
  • 文章链接：
  • 版权声明
  • 非自由转载-非商用-非衍生-保持署名