useCallBack,useMemo,forwardRef,useImperativeHandle用法总结

Posted 2023-03-28

参考技术A

2021.6.19更:
useImperativeHandle的第一个参数为ref句柄，即父组件传递到子组件的ref属性，

useImperativeHandle和子组件第二位预留参数ref的使用需要forwardRef高阶组件的配合：

但有时候我们不想使用forwardRef高阶组件，即子组件预留的第二位参数ref失效
这时候需要手动往子组件props参数中传递xxxref，通过xxxref和useImperativeHandle一样能达到获取子组件属性和api的作用，且不需要使用forwardRef高阶组价了

用法:

useMemo 和 useCallback 接收的参数都是一样,第一个参数为回调 第二个参数为要依赖的数据

共同点

1.仅仅 依赖数据 发生变化, 才会重新计算结果，也就是起到缓存的作用。

区别点

1.useMemo 计算结果是 return 回来的值, 主要用于 缓存计算结果的值 ，应用场景如： 需要 计算的状态

2.useCallback 计算结果是 函数, 主要用于 缓存函数，应用场景如: 需要缓存的函数，因为函数式组件每次任何一个 state 的变化 整个组件 都会被重新刷新，一些函数是没有必要被重新刷新的，此时就应该缓存起来，提高性能，和减少资源浪费。

用法:

1.父组件传递子组件ref，子组件拿到ref并放到对应的dom上，例如Input,父组件就能调用子组件input的相关api（涉及dom）

用法:

父组件传递给子组件的ref，通过useImperativeHandle可以拿到子组件所有的变量和api

虽然forwardRef和useImperativeHandle配合使用完全能达到想要的父调子所有api和dom的效果，但是使用forwardRef需要把函数组件当参数才能起到转发父组件props和ref的作用，但是往往一个组件需多个高阶组件嵌套，例如observer()，connect()等混合使用时, 它们如何一起使用呢？

lodash 提供了 \'compose\' api供合并执行函数：

observer, connect等是高阶组件，高阶组件通过 1. 属性继承 2. 反向代理 3. 渲染劫持 ...从而达到api实现的效果，例如：

最后我们再export default NewCom

合并在一起就是