React函数式组件值之useRef()和useImperativeHandle()
最新回答
吧唧你一口
2023-01-13 11:36:42
React函数式组件中的useRef()和useImperativeHandle()
useRef()
useRef是React提供的一个Hook，它返回一个可变的ref对象，其.current属性被初始化为传入的参数（initialValue）。这个对象在组件的整个生命周期内保持不变。useRef主要有两种用法：
获取DOM节点或类组件实例
在函数组件中，没有this来引用组件实例或DOM节点。useRef可以创建一个ref，并将其附加到React元链誉素上，通过樱困ref.current访问对应的DOM节点或类组件实例。
获取DOM节点：当ref属性用于HTML元素时，React会将ref对象的.current属性设置为对应的DOM元素。
获取类组件实例：注意，useRef获取类组件实例的功能仅在类组件上有效。对于函数组件，useRef不会返回组件实例，而是返回一个始终为null的对象（因为函数组件没有实例）。
在函数组件中存储可变数据
useRef返回的ref对象在组件的整个生命周期内保持不变，这意味着你可以使用它来存储任何可变值，而不会触发组件的重新渲染。这对于存储不需要触发组件更新的数据（如定时器ID、DOM节点的上一次滚动位置等）非常有用。
useImperativeHandle()
useImperativeHandle是一个自定义Hook，它允许你在使用ref时自定义暴露给父组件的实例值。这在你想要从子组件中暴露特定的方法或属性给父组件时非常有用，同时隐藏其他内部实现细节。
- 使用场景：当你需要将函数式组件的某些方法或属性暴露给父组件时，可以使用useImperativeHandle。这通常用于封装复杂的组件逻辑，同时提供一个简洁的接口给父组件使用。
- 与forwardRef一起使用：useImperativeHandle通常与React.forwardRef一起使用。forwardRef是一个高阶组件（HOC），它接收一个组件并返回一个新的组件。这个新组件可以接收一个ref属性棚颂段，并将其转发到子组件中的某个元素或函数上。
- 自定义暴露的实例值：useImperativeHandle接收三个参数：ref、一个函数（该函数返回一个对象，该对象包含要暴露给父组件的方法和属性），以及一个可选的依赖项数组（用于确定何时重新计算暴露的值）。
总结
- useRef：用于在函数组件中获取DOM节点、类组件实例（仅限类组件）或存储可变数据而不触发组件重新渲染。
- useImperativeHandle：与forwardRef一起使用，允许自定义暴露给父组件的实例值，从而隐藏内部实现细节并提供一个简洁的接口。
热门标签
