useRef

useRef返回一个ref对象，返回的ref对象再组件的整个生命周期保持不变。

最常用的ref是两种用法：

用法一：引入DOM（或者组件，但是需要是class组件）元素；

用法二：保存一个数据，这个对象在整个生命周期中可以保存不变；

案例：

案例一：引用DOM

案例二：使用ref保存上一次的某一个值

useImperativeHandle

useImperativeHandle并不是特别好理解，我们一点点来学习。

我们先来回顾一下ref和forwardRef结合使用：

通过forwardRef可以将ref转发到子组件；

子组件拿到父组件中创建的ref，绑定到自己的某一个元素中；

forwardRef的做法本身没有什么问题，但是我们是将子组件的DOM直接暴露给了父组件：

直接暴露给父组件带来的问题是某些情况的不可控；

父组件可以拿到DOM后进行任意的操作；

但是，事实上在上面的案例中，我们只是希望父组件可以操作的focus，其他并不希望它随意操作；

通过useImperativeHandle可以值暴露固定的操作：

通过useImperativeHandle的Hook，将传入的ref和useImperativeHandle第二个参数返回的对象绑定到了一起；

所以在父组件中，使用 inputRef.current时，实际上使用的是返回的对象；

比如我调用了 focus函数，甚至可以调用 printHello函数；

useLayoutEffect

seLayoutEffect看起来和useEffect非常的相似，事实上他们也只有一点区别而已：

useEffect会在渲染的内容更新到DOM上后执行，不会阻塞DOM的更新；

useLayoutEffect会在渲染的内容更新到DOM上之前执行，会阻塞DOM的更新；

如果我们希望在某些操作发生之后再更新DOM，那么应该将这个操作放到useLayoutEffect。

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 21 天，点击查看活动详情