noNestedComponentDefinitions
¥Summary
-
规则生效日期：
v2.0.0¥Rule available since:
v2.0.0 -
诊断类别：
lint/correctness/noNestedComponentDefinitions¥Diagnostic Category:
lint/correctness/noNestedComponentDefinitions -
此规则没有修复方案。
¥This rule doesn’t have a fix.
-
此规则的默认严重级别为 error。
¥The default severity of this rule is error.
-
此规则属于以下域：
¥This rule belongs to the following domains:
-
来源：
¥Sources:
¥How to configure
{ "linter": { "rules": { "correctness": { "noNestedComponentDefinitions": "error" } } }}¥Description
禁止在其他组件内部定义 React 组件。
¥Disallows defining React components inside other components.
在其他组件内部定义的组件会在每次渲染时重新创建，这可能会导致性能问题和意外行为。
¥Component definitions inside other components cause them to be recreated on every render, which can lead to performance issues and unexpected behavior.
当一个组件定义在另一个组件内部时：
¥When a component is defined inside another component:
-
每次父组件渲染时都会重新创建它
¥It gets recreated on every render of the parent component
-
当父目录重新渲染时，它会丢失其内部状态。
¥It loses its internal state when the parent rerenders
-
会破坏属性记忆化和优化技术。
¥It defeats props memoization and optimization techniques
-
每次渲染都会创建新的函数引用。
¥It creates new function references on every render
¥Examples
¥Invalid
每次 ParentComponent 渲染时都会创建一个新组件：
¥A new component is created every time ParentComponent renders:
function ParentComponent() { function ChildComponent() { return <div>Hello</div>; }
return <ChildComponent />;}code-block.jsx:2:12 lint/correctness/noNestedComponentDefinitions ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Components should not be defined inside other components.
1 │ function ParentComponent() {
> 2 │ function ChildComponent() {
│ ^^^^^^^^^^^^^^
3 │ return <div>Hello</div>;
4 │ }
ℹ Move it outside of the parent component or pass it as a prop.
> 1 │ function ParentComponent() {
│ ^^^^^^^^^^^^^^^
2 │ function ChildComponent() {
3 │ return <div>Hello</div>;
ℹ Component definitions inside other components cause them to be recreated on every render, which can lead to performance issues and unexpected behavior.
即使使用了 memo，每次渲染仍然会创建一个新组件：
¥Even with memo, a new component is still created on each render:
function ParentComponent() { const MemoizedChild = memo(() => { return <div>Hello</div>; });
return <MemoizedChild />;}code-block.jsx:2:9 lint/correctness/noNestedComponentDefinitions ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Components should not be defined inside other components.
1 │ function ParentComponent() {
> 2 │ const MemoizedChild = memo(() => {
│ ^^^^^^^^^^^^^
3 │ return <div>Hello</div>;
4 │ });
ℹ Move it outside of the parent component or pass it as a prop.
> 1 │ function ParentComponent() {
│ ^^^^^^^^^^^^^^^
2 │ const MemoizedChild = memo(() => {
3 │ return <div>Hello</div>;
ℹ Component definitions inside other components cause them to be recreated on every render, which can lead to performance issues and unexpected behavior.
¥Valid
在其他组件外部定义的组件：
¥Component is defined outside other components:
function ChildComponent() { return <div>Hello</div>;}
function ParentComponent() { return <ChildComponent />;}¥Correct approaches
-
将组件定义移到外部：
¥Move the component definition outside:
function ChildComponent() { return <div>Hello</div>;}
function ParentComponent() { return <ChildComponent />;}-
将组件作为 props 传递：
¥Pass components as props:
function ParentComponent({ CustomComponent }) { return <CustomComponent />;}-
使用 React 的 Children API：
¥Use React’s Children API:
function ParentComponent({ children }) { return <div>{children}</div>;}¥Related links
Biome v2.1 中文网 - 粤ICP备13048890号