规则：component-hook-factories

ReactAPI 参考：ESLint 插件

component-hook-factories

验证高阶函数定义嵌套组件或 hooks 的行为。组件和 hooks 应在模块级别定义。

规则详情 {/rule-details/}

在其他函数内部定义组件或 hooks 会在每次调用时创建新实例。React 将每个实例都视为完全不同的组件，从而销毁并重新创建整个组件树、丢失所有状态，并导致性能问题。

无效用法 {/invalid/}

以下是本规则的错误代码示例：

js 复制代码

// ❌ Factory function creating components
function createComponent(defaultValue) {
  return function Component() {
    // ...
  };
}

// ❌ Component defined inside component
function Parent() {
  function Child() {
    // ...
  }

  return <Child />;
}

// ❌ Hook factory function
function createCustomHook(endpoint) {
  return function useData() {
    // ...
  };
}

有效用法 {/valid/}

以下是本规则的正确代码示例：

js 复制代码

// ✅ Component defined at module level
function Component({ defaultValue }) {
  // ...
}

// ✅ Custom hook at module level
function useData(endpoint) {
  // ...
}

故障排除 {/troubleshooting/}

我需要动态组件行为 {/dynamic-behavior/}

你可能认为需要工厂函数来创建定制化组件：

js 复制代码

// ❌ Wrong: Factory pattern
function makeButton(color) {
  return function Button({children}) {
    return (
      <button style={{backgroundColor: color}}>
        {children}
      </button>
    );
  };
}

const RedButton = makeButton('red');
const BlueButton = makeButton('blue');

改为将 JSX 作为 children 传递：

js 复制代码

// ✅ Better: Pass JSX as children
function Button({color, children}) {
  return (
    <button style={{backgroundColor: color}}>
      {children}
    </button>
  );
}

function App() {
  return (
    <>
      <Button color="red">Red</Button>
      <Button color="blue">Blue</Button>
    </>
  );
}

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。