react如何复用

React 组件复用方法

高阶组件（HOC）
通过函数包裹组件，注入额外属性或逻辑。例如实现鉴权复用：

function withAuth(WrappedComponent) {
  return function(props) {
    const isAuthenticated = checkAuth();
    return isAuthenticated 
      ? <WrappedComponent {...props} />
      : <Redirect to="/login" />;
  };
}

自定义 Hook
提取通用逻辑到 Hook 中，如数据获取或事件监听：

function useFetch(url) {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch(url).then(res => setData(res.json()));
  }, [url]);
  return data;
}
// 使用时：const data = useFetch('/api/data');

Render Props
通过组件属性传递渲染函数，共享组件状态：

<MouseTracker>
  {({ x, y }) => <div>当前位置：{x}, {y}</div>}
</MouseTracker>

复合组件模式
通过 React.Children 和 Context 组合关联组件，如表单与输入项：

<Form>
  <Form.Input name="email" />
  <Form.Submit>提交</Form.Submit>
</Form>

UI 组件库
将通用组件（按钮、弹窗等）抽离为独立模块，通过 props 控制变体：

<Button variant="primary" size="large">确认</Button>

代码复用优化建议

• 使用 TypeScript 或 PropTypes 规范组件接口
• 为高阶组件添加 displayName 便于调试
• 通过 useMemo/useCallback 避免不必要的重渲染
• 提取工具函数处理日期格式化等纯逻辑