React组件复用通用逻辑：不使用继承的替代方案咨询

你的场景里，React官方确实不推荐用类继承来复用组件逻辑，下面给你几个更符合React函数组件最佳实践的方案：

方案1：提取独立工具函数（最简洁） #

既然mouseDown只是纯逻辑，不需要依赖组件内部的状态或上下文，直接把它抽成单独的工具函数就行，比你说的静态类更轻量：

// 可放在单独的utils文件，或组件文件顶部
const handleMouseDown = (e) => {
  console.log("mouseclick");
  // 后续需要扩展逻辑直接在此添加
};

// 组件内直接调用
const Shelf1 = () => {
  return <div onMouseDown={handleMouseDown}>Shelf 1</div>;
};

const Shelf2 = () => {
  return <div onMouseDown={handleMouseDown}>Shelf 2</div>;
};

const Shelf3 = () => {
  return <div onMouseDown={handleMouseDown}>Shelf 3</div>;
};

这种方式没有额外封装成本，适合纯无状态的逻辑复用，代码简洁直观。

方案2：自定义Hook（推荐，扩展性强） #

如果以后你的mouseDown逻辑需要用到React状态（比如记录点击次数）、副作用（比如监听全局事件）或组件上下文，自定义Hook是React官方推荐的复用逻辑方式，现在使用也能为未来扩展留足空间：

// 单独的Hook文件，比如hooks/useMouseDown.js
const useMouseDown = () => {
  const handleMouseDown = (e) => {
    console.log("mouseclick");
    // 示例：后续可添加状态逻辑
    // const [clickCount, setClickCount] = useState(0);
    // setClickCount(prev => prev + 1);
  };

  return handleMouseDown;
};

// 组件内使用Hook
const Shelf1 = () => {
  const handleMouseDown = useMouseDown();
  return <div onMouseDown={handleMouseDown}>Shelf 1</div>;
};

const Shelf2 = () => {
  const handleMouseDown = useMouseDown();
  return <div onMouseDown={handleMouseDown}>Shelf 2</div>;
};

自定义Hook能把组件相关逻辑封装起来，保持组件代码干净，完全贴合React函数组件的编程范式。

关于你提到的静态类方案 #

这种方案确实能运行，但在React函数组件场景里略显冗余——你只是需要一个独立函数，没必要用类来包裹。类的静态方法更适合组织多个相关工具函数的场景，单个函数直接提取会更简洁。

另外，React不推荐类继承的核心原因是：组件组合（如Hook、高阶组件）比继承更灵活，能避免继承带来的层级复杂、耦合度高的问题。你的场景用上面两种方案完全能满足需求，比继承更合适。

内容的提问来源于stack exchange，提问作者whitebear