高阶组件
参考文档:高阶组件 – React (reactjs.org)
高阶组件(Higher-Order Components,简称 HOC)是React中用于复用组件逻辑的一种高级技巧。具体而言:高阶组件是参数为组件,返回值为新组件的函数。
组件是将 props 转换为 UI,而高阶组件是将组件转换为另一个组件。
HOC 在 React 的第三方库中很常见,例如 Redux 的 connect 和 Relay 的 createFragmentContainer。
此处不再搬运高阶组件具体如何使用的部分,详情参考React官网文档即可。
ref转发:forwardRef
forwardRef函数的作用,
forwardRef
允许组件使用 ref 将 DOM 节点暴露给父组件。
简单讲:就是让子级函数式组件除了props参数之外,额外拥有第二个参数ref;之后就可以在父组件中拿到这个ref,从而去调用子组件中暴露出来的方法。
import { forwardRef } from 'react';const MyInput = forwardRef(function MyInput(props, ref) {// ...
});
然后在父组件中,可以定义ref属性,来拿到子组件的引用,伪代码示例如下,
//这里是父组件
export default ()=>{const myInputRef = useRef();//调用方式://myInputRef.current.doXXX();return (<MyInput ref={myInputRef}/>);
}
暴露句柄:useImperativeHandle
那么,通过forwardRef转发给子组件的ref所调用的具体方法/句柄如何定义呢?
useImperativeHandle
是 React 中的一个 Hook,它能让你自定义由 ref 暴露出来的句柄。useImperativeHandle(ref, createHandle, dependencies?)
例如:以下代码就为MyInput组件提供了doSomething句柄,供父组件通过ref来调用,
import { forwardRef, useImperativeHandle } from 'react';const MyInput = forwardRef(function MyInput(props, ref) {useImperativeHandle(ref, () => {return {//向外暴露的句柄doSomething:() =>{console.log('here is children method!');return 'do-something'},};}, []);return <input {...props} />;
});
完整示例代码
子组件:MyInput
import { forwardRef, useImperativeHandle } from 'react';const MyInput = forwardRef(function MyInput(props, ref) {useImperativeHandle(ref, () => {return {//向外暴露的句柄doSomething:() =>{console.log('here is children method!');return 'do-something'},};}, []);return <input {...props} />;
});
父组件
//这里是父组件
export default ()=>{const myInputRef = useRef();//调用方式://myInputRef.current.doXXX();const clickHandler = ()=>{myInputRef.current.doSomething(/*params*/); }return (<><MyInput ref={myInputRef}/><button onClick={clickHandler}>click here</button></>);
}