项目设计与ReactHooks

作者： 作者的头像   bubboo123 ,  2023-04-11 11:23:42 ,  所有人可见 ,  阅读 173

0


第11章 项目设计

19.png

1.png
2.png
3.png
4.png
5.png

6.png
7.png

8.png

9.png

10.png
11.png
12.png
13.png

14.png

第12章 项目流程

15.png
1.png

2.png

3.png

4.png
5.png
6.png

7.png
8.png

9.png

10.png

第14章 react hooks

11.png
12.png

13.png

114.png

14-2 class组件存在哪些问题

1.png

2.png

3.png

4.png

5.png

6.png

useEffect

7.png
8.png

第二个参数不能是引用对象，会引起死循环

9.png

10.png
11.png

12.png
13.png

14.png

其他Hooks

15.png

useRef

Snipaste_2023-03-31_16-02-51.png

useContext

Snipaste_2023-03-31_16-06-55.png

Snipaste_2023-03-31_16-06-29.png

useReducer

16.png

相当于一个更加复杂的useState

Snipaste_2023-03-31_16-09-22.png

Snipaste_2023-03-31_16-09-57.png

useMemo

1. 用memo把子组件包裹起来

Snipaste_2023-03-31_16-20-56.png

2. 用useMemo缓存数据，并设置一下依赖。

Snipaste_2023-03-31_16-20-43.png

原理同：都是浅层优化

17.png

useCallback

Snipaste_2023-03-31_16-30-05.png
18.png

自定义Hook

19.png

20.png
21.png

22.png

23.png
24.png

Hooks调用顺序

和Class组件很不一样，只要Class组件不销毁，更新后实例都还在

Snipaste_2023-03-31_16-47-05.png
Snipaste_2023-03-31_16-52-23.png
25.png

逻辑复用

26.png

27.png

28.png
29.png
30.png

注意事项

31.png

1 re-render后并不能通过useState重新设置值了

Snipaste_2023-03-31_17-11-45.png

Snipaste_2023-03-31_17-16-29.png

点击父组件按钮后

Snipaste_2023-03-31_17-13-49.png

2 仅限于useEffect的第二个参数是[]时，执行setCount可以让外面的count+1，但是不影响useEffect里面的count一直是0

原因：[]的话，re-render不会重新执行useEffect，count一直都是0

Snipaste_2023-03-31_17-24-20.png
Snipaste_2023-03-31_17-23-00.png
Snipaste_2023-03-31_17-30-28.png

3 第二个参数是引用对象的话，会死循环

Object.is判断，{}与{}也是变了

32.png

33.png
34.png

35.png

36.png
37.png

38.png
39.png
40.png

41.png

333.png

0 评论