React useImperativeHandle

使用函数时组件的时候，ref转发是必须要了解的概念

// 实现 ref 的转发
const FancyInput = React.forwardRef((props, ref) => (<div><input ref={ref} type="text" /><div>我是自定义的函数式组件</div></div>
));

const App = () => {const ref = useRef();return (<div><FancyInput ref={ref} /><button onClick={() => {ref.current.focus()}}>调用input的focus方法</button></div>)
}ReactDOM.render(<App />, root);

如上，简介明了的解释了ref转发的概念。
但是，上面的 ref 透传的方式有什么问题呢

站在 FancyInput 组件的角度，FancyInput组件在中间层，父组件App 越过了自己，直接获取了自己的子组件 input 的 ref，子组件的DOM直接暴露给了父组件
input 组件的所有方法都直接暴露给App，App组件可以进行任意的操作，某些情况的不可控
我们只是希望App可以操作的input的 focus方法，并不希望它随意操作其他方法

useImperativeHandle 就是来解决这个问题的：

const FancyInput = React.forwardRef((props, ref) => {const inputRef = useRef();useImperativeHandle(ref, () => ({focus: () => {// 这里可以加自己的逻辑哦inputRef.current.focus();}}));return (<div><input ref={inputRef} type="text" /><div>我是自定义的函数式组件</div></div>)
});

const App = props => {const fancyInputRef = useRef();return (<div><FancyInput ref={fancyInputRef} /><button onClick={() => {fancyInputRef.current.focus()}}>调用FancyInput组件的 focus方法</button></div>)
}ReactDOM.render(<App />, root);

使用 useImperativeHandle 后，FancyInput有自己的 ref，通过 React.forwardRef 将父组件的 ref 透传过来，通过 useImperativeHandle 方法来暴露指定的方法给父组件调用，完美的解决了上面的问题。你还可以自己在 input 的 focus 方法上加一些自己的逻辑或者副作用，是不是有点钩子的意味了。

注意： useImperativeHandle 和 React.forwardRef 必须是配合使用的。

React useImperativeHandle相关推荐

[react] 请说说什么是useImperativeHandle？
[react] 请说说什么是useImperativeHandle? // useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值. // useImperati ...
fs react 使用保存文件_入门TypeScript编写React
使用 create-react-app 开启 TypeScript Create React App 是一个官方支持的创建 React 单页应用程序的CLI,它提供了一个零配置的现代构建设置.当你使用 ...
React tsx 生成随机验证码
React tsx 生成随机验证码最近开发React 使用tsx编写,没有找到什么好的随机生成验证码的插件,自己就手撸了一个,废话不多话,直接上代码. tsx文件如下: React代码片. impo ...
react通过hook实现父组件调用孙子组件方法（非redux）
项目中遇到一个父组件需要触发孙子组件方法的需求.项目又没有安装redux,经查阅, useImperativeHandlehttps://react.docschina.org/docs/hooks- ...
React 函数组件导出自定义方法的办法说明
在进行React开发时,函数组件是比较方便的,由于函数组件没有this指针,因此如果想在父组件里调用函数型子组件的方法,就需要用到React.useImperativeHandle 这个帮助函数. 办 ...
react学习笔记（完整版 7万字超详细）
1. React基础 1-1. react-调试插件安装浏览器右上角 - ===> 更多工具 ===> 扩展程序 ==> 开启开发者模式 ==> 将调试插件包拖拽进来即可 1 ...
ANTD react 手机号(验证码)登陆 + 账号登陆(图形验证码)
这种页面可能是大家常用的,但重写比较费时间,之前没有搜到完整的,在这里自己总结一下,方面复用代码: <LoginFormformRef={formRef} ...
React-Hooks之useImperativeHandle使用，让父组件操纵子组件的状态和方法
您好,如果喜欢我的文章,可以关注我的公众号「量子前端」,将不定期关注推送前端好文~ useImperativeHandle是react官方为了简便我们的ref操作,同时还可以让子组件返回给父组件自身的 ...
React-Hooks
什么是Hooks? Hooks是一类特殊的函数,适用于React的函数组件,可以让我们在不编写class的情况下使用state及其他的React特性,比如副作用处理及生命周期等. 为什么要Hooks? ...

React useImperativeHandle

React useImperativeHandle相关推荐

最新文章

热门文章