react-hooks之useImperativeHandle使用详解

useImperativeHandle可以通过使用ref时自定义暴露给父组件的实列值,并配合forwardRef一起使用
下面是一个简单的例子暴露给父组件一个属性值
react-hooks之useImperativeHandle使用详解_第1张图片

效果如下
react-hooks之useImperativeHandle使用详解_第2张图片
该钩子函数还有第三个参数,如果里面涉及到某个变化的值,只有当第三个参数发生改变时,父组件接收到的该值才会发生改变
代码如下所示:
react-hooks之useImperativeHandle使用详解_第3张图片
react-hooks之useImperativeHandle使用详解_第4张图片
先点击setCount按钮加到7,然后点击“获取子组件暴露给父组件的东西”按钮,此时打印出的count还是初使状态的0,只有点击了setNum按钮,(也就是说当num发生改变当时候),再次点击“获取子组件暴露给父组件的东西”按钮,此时打印出的count为改变后的7

你可能感兴趣的:(学习总结,react-hooks)