react如何封装公有方法
封装公有方法的步骤
在React中封装公有方法通常用于组件间共享逻辑或暴露特定功能给父组件。以下是几种常见实现方式：
使用自定义Hook
自定义Hook是React 16.8+推荐的方式，适合封装可复用的逻辑：
function usePublicMethod() {
const publicMethod = () => {
console.log('This is a public method');
};
return { publicMethod };
}
// 使用示例
function MyComponent() {
const { publicMethod } = usePublicMethod();
return <button onClick={publicMethod}>Click</button>;
}通过ref暴露方法
类组件中可通过ref直接暴露方法给父组件：
class ChildComponent extends React.Component {
publicMethod = () => {
alert('Method called from parent');
};
render() {
return <div>Child Component</div>;
}
}
// 父组件调用
function ParentComponent() {
const childRef = useRef();
const handleClick = () => {
childRef.current?.publicMethod();
};
return (
<>
<ChildComponent ref={childRef} />
<button onClick={handleClick}>Call Child Method</button>
</>
);
}使用forwardRef + useImperativeHandle
函数组件中推荐使用forwardRef和useImperativeHandle组合：
const ChildComponent = forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({
publicMethod: () => {
console.log('Exposed method called');
}
}));
return <div>Child Content</div>;
});
// 父组件调用方式与类组件示例相同通过props传递方法
简单场景下可直接通过props传递方法：
function ChildComponent({ onPublicMethod }) {
useEffect(() => {
onPublicMethod?.();
}, []);
return <div>Child</div>;
}
function ParentComponent() {
const handleMethod = () => {
console.log('Method triggered via props');
};
return <ChildComponent onPublicMethod={handleMethod} />;
}方法选择建议
- 纯逻辑复用优先使用自定义Hook
- 父子组件通信推荐
forwardRef方案 - 类组件场景可直接通过ref访问
- 简单回调场景适合props传递
每种方式都有其适用场景，应根据具体需求选择最合适的实现方案。
