老师您好,关于几个hooks方法
来源:3-16 hook 规则和其他 hook

袁门弟子
2020-06-20
老师您好,我是react初学者,hooks也是刚刚接触,理解并不是很深,以下是我对几个hooks的理解,您看下是否正确:(字数很多请谅解)
1: useState,对标class中的this.state。异步操作,和class中的state一样,为了性能问题将频发的set行为合并为一个操作。在每次render中都是一个独立的状态。在数据发生变化时候会触发组件重渲染。
2: useEffect,对标class中的挂载,更新和卸载生命周期,第一个入参是一个callback,内部是执行逻辑。第二个参数是一个数组,数组的每项被视作在render中是否重新执行入参一的参考值,如果数组数据变化,就render时候就会重新执行。如果不传递,表示每次render都被重新执行。所以我们需要将所有依赖数据放入数组,以保证useEffect正常的updata。
参数一还可以有一个返回值,是一个函数,他一般用来处理卸载监听行为,在每下一次执行之前先被执行一次。
3: useRef,他的current可以指向dom,也可以存储一个数据。会保持最新render状态,在所有render过程中共享一个数据状态。current的修改不会出发组件重渲染。
4: useMemo:参数一是一个回调函数,可以用来返回一个数据,可以保证数据在每次组件重渲染时候不被重置,参数二结构和用法和useEffect完全一致。
与useEffect不同的是,useMemo更像是一个计算属性,他的计算在挂载之前,我们的首次渲染可以依赖它的返回值,而useEffect则是在挂载之后才被执行。
5: useCallback,可以理解成useMemo的函数版本,他返回的是一个函数。
和useMemo一样,他可以避免某个被重置成新的方法(因为render时候函数会整体重新执行),所以在给子组件传递参数和方法时候,useMemo和useCallback会比较有用,避免子组件因为props无意义更新而被重渲染。
6:useContext:对标context和contextType,为了解决多层组件嵌套时,数据传递麻烦的问题。
首先这三种context操作,都需要使用createContext。
而context的劣势在于使用方的多层嵌套过于繁琐。
contextType的劣势在于,虽然使用比较方便但是由于静态属性名的限制,只能传递一个参数。
最后,hooks提供的useContext的使用方法简单,而且可以传递多个参数。
7: useReducer:用法类似于redux的reducer,像是一个组件化的reducer操作。
最后一个关于渲染的问题:
组件渲染只取决于useState和props(class中是this.state和props),其他行为不会导致重新渲染,比如effect和useMemo/useCallback这三个的第二个入参的值。它们的值的更新,只是在下次组件渲染时候是否重新执行参数一的开关。而不是组件渲染的触发点,只有state和props才能出发渲染。
老师请问我以上的理解是否比较正确,哪里不对希望您可以稍稍指正。谢谢您。
3回答
-
同学你好 你学习的非常认真 总结的很好! 赞你的学习态度! 不可多得的好同学。
就想补充一点点,学习 useEffect 没必要和 class 时期的 生命周期钩子做类比,可以抛开那些概念,单独理解即可,因为它们其实代表的是完全不同的哲学思想。
10 -
慕仙3349336
2022-10-05
👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻
00 -
guwu
2021-10-19
‘useCallback,可以理解成useMemo的函数版本,他返回的是一个函数’,useCallback不返回函数,它的参数是个函数,不期望有返回值。是useMemo的一个变体,
useMemo(() => fn) --> useCallback(fn)
00
相似问题