hook组件-useEffect、useRef

hook组件-useEffect、useRef

useEffect

用法及执行机制

WillMount -> render -> DidMount

ShouldUpdate -> WillUpdate -> render -> DidUpdate

WillUnmount(只有这个安全) WillReceiveProps

• useEffect(callback) 默认所有依赖都更新
• useEffect(callback, [])，空依赖所以无依赖
• useEffect(callback, [xxx])，指定依赖

• 返回一个小函数，会在组件释放的时候执行。

*effect链表

会把callback或者返回的小函数加入effect链表中，然后按照规则执行。

执行自己的链表之前，把上次链表中需要执行的执行。

不能被嵌入条件和循环中

callback的返回值只能是一个函数。被async修饰了，返回的是一个promise所以不行。

与useLayoutEffect的区别

layoutEffect的执行时机，virtual dom生成的时候。

更准确地说，是在浏览器绘制渲染之前。

视图更新四步走：

useRef

状态 生命周期，ref。

3种情况：

1. 标签。dom元素。
2. 类组件。该类组件实例。
3. 函数组件。配合React.forwardRef，拿到的是函数组件中的某个dom元素。

类组件中ref的使用方法

ref是一个函数，最推荐的方法。

函数组件中的ref用法。但这种不推荐。

创建一个ref对象。useRef创建一个ref对象。

特点：

useRef重新执行不会再生成新的。react类组件重新更新只是重新执行render，不会重新创建实例，对ref对象没有影响。

使用ref的作用：

本组件dom元素。

类组件实例。

配合forwardRef获得函数组件中的某个元素。

useImpretiveHandle

通过return暴露需要返回父组件的内容