React组件命名规则：首字母大写的底层原理与最佳实践

一、React组件命名的基本规则

1.1 用户自定义组件必须以大写字母开头

在React开发中，当我们声明一个组件并在JSX中使用它时，组件名的第一个字母必须是大写字母。这是React官方文档中明确规定的约定。例如:

// 正确写法:首字母大写
function MyComponent() {
return <div>Hello World</div>;
}
// 错误写法:首字母小写
function myComponent() {
return <div>Hello World</div>;
}

如果组件名以小写字母开头，React会将其当作原生DOM标签处理，从而导致渲染异常或报错。

1.2 小写字母开头的标签会被视为DOM元素

当React在JSX中遇到一个以小写字母开头的标签时，它会将其视为原生的HTML DOM元素(如 <div>、<span>、<p> 等)，而不是React组件。这意味着:

// 这会被当作原生HTML元素处理
<myComponent />
// 这会被当作React组件处理
<MyComponent />

React之所以能做出这种区分，正是因为它利用了首字母大小写作为判断依据。小写首字母等于原生标签，大写首字母等于自定义组件。

1.3 命名规则的实际验证

我们可以通过一个简单的例子来验证这个规则:

function App() {
function button() {
return <button>Click me</button>;
}
return (
<div>
<button />
</div>
);
}

上述代码中，<button /> 会被渲染为原生的HTML <button> 元素，而不是我们自定义的 button 函数组件。即使我们在代码中定义了 button 函数，React也不会使用它，因为小写标签被直接映射到DOM元素。

二、为什么需要首字母大写:底层原理剖析

2.1 JSX的编译过程详解

JSX并不是浏览器能直接理解的语法，它需要通过Babel等编译工具转换为普通的JavaScript代码。理解这个编译过程，是理解组件命名规则的关键。

#publish-mermaid-1785810524362-0{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#publish-mermaid-1785810524362-0 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#publish-mermaid-1785810524362-0 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#publish-mermaid-1785810524362-0 .error-icon{fill:#552222;}#publish-mermaid-1785810524362-0 .error-text{fill:#552222;stroke:#552222;}#publish-mermaid-1785810524362-0 .edge-thickness-normal{stroke-width:1px;}#publish-mermaid-1785810524362-0 .edge-thickness-thick{stroke-width:3.5px;}#publish-mermaid-1785810524362-0 .edge-pattern-solid{stroke-dasharray:0;}#publish-mermaid-1785810524362-0 .edge-thickness-invisible{stroke-width:0;fill:none;}#publish-mermaid-1785810524362-0 .edge-pattern-dashed{stroke-dasharray:3;}#publish-mermaid-1785810524362-0 .edge-pattern-dotted{stroke-dasharray:2;}#publish-mermaid-1785810524362-0 .marker{fill:#333333;stroke:#333333;}#publish-mermaid-1785810524362-0 .marker.cross{stroke:#333333;}#publish-mermaid-1785810524362-0 svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#publish-mermaid-1785810524362-0 p{margin:0;}#publish-mermaid-1785810524362-0 .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#publish-mermaid-1785810524362-0 .cluster-label text{fill:#333;}#publish-mermaid-1785810524362-0 .cluster-label span{color:#333;}#publish-mermaid-1785810524362-0 .cluster-label span p{background-color:transparent;}#publish-mermaid-1785810524362-0 .label text,#publish-mermaid-1785810524362-0 span{fill:#333;color:#333;}#publish-mermaid-1785810524362-0 .node rect,#publish-mermaid-1785810524362-0 .node circle,#publish-mermaid-1785810524362-0 .node ellipse,#publish-mermaid-1785810524362-0 .node polygon,#publish-mermaid-1785810524362-0 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#publish-mermaid-1785810524362-0 .rough-node .label text,#publish-mermaid-1785810524362-0 .node .label text,#publish-mermaid-1785810524362-0 .image-shape .label,#publish-mermaid-1785810524362-0 .icon-shape .label{text-anchor:middle;}#publish-mermaid-1785810524362-0 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#publish-mermaid-1785810524362-0 .rough-node .label,#publish-mermaid-1785810524362-0 .node .label,#publish-mermaid-1785810524362-0 .image-shape .label,#publish-mermaid-1785810524362-0 .icon-shape .label{text-align:center;}#publish-mermaid-1785810524362-0 .node.clickable{cursor:pointer;}#publish-mermaid-1785810524362-0 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#publish-mermaid-1785810524362-0 .arrowheadPath{fill:#333333;}#publish-mermaid-1785810524362-0 .edgePath .path{stroke:#333333;stroke-width:1px;}#publish-mermaid-1785810524362-0 .flowchart-link{stroke:#333333;fill:none;}#publish-mermaid-1785810524362-0 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#publish-mermaid-1785810524362-0 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#publish-mermaid-1785810524362-0 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#publish-mermaid-1785810524362-0 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#publish-mermaid-1785810524362-0 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#publish-mermaid-1785810524362-0 .cluster text{fill:#333;}#publish-mermaid-1785810524362-0 .cluster span{color:#333;}#publish-mermaid-1785810524362-0 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#publish-mermaid-1785810524362-0 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#publish-mermaid-1785810524362-0 rect.text{fill:none;stroke-width:0;}#publish-mermaid-1785810524362-0 .icon-shape,#publish-mermaid-1785810524362-0 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#publish-mermaid-1785810524362-0 .icon-shape p,#publish-mermaid-1785810524362-0 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#publish-mermaid-1785810524362-0 .icon-shape .label rect,#publish-mermaid-1785810524362-0 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#publish-mermaid-1785810524362-0 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#publish-mermaid-1785810524362-0 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#publish-mermaid-1785810524362-0 .node .neo-node{stroke:#9370DB;}#publish-mermaid-1785810524362-0 [data-look=\”neo\”].node rect,#publish-mermaid-1785810524362-0 [data-look=\”neo\”].cluster rect,#publish-mermaid-1785810524362-0 [data-look=\”neo\”].node polygon{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785810524362-0 [data-look=\”neo\”].swimlane.cluster rect{filter:none;}#publish-mermaid-1785810524362-0 [data-look=\”neo\”].node path{stroke:#9370DB;stroke-width:1px;}#publish-mermaid-1785810524362-0 [data-look=\”neo\”].node .outer-path{filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785810524362-0 [data-look=\”neo\”].node .neo-line path{stroke:#9370DB;filter:none;}#publish-mermaid-1785810524362-0 [data-look=\”neo\”].node circle{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785810524362-0 [data-look=\”neo\”].node circle .state-start{fill:#000000;}#publish-mermaid-1785810524362-0 [data-look=\”neo\”].icon-shape .icon{fill:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785810524362-0 [data-look=\”neo\”].icon-shape .icon-neo path{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785810524362-0 :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}小写字母大写字母

JSX代码

Babel编译器

标签首字母

编译为字符串标签名

编译为变量引用

React.createElement 传入字符串

React.createElement 传入变量

渲染原生DOM元素

渲染React组件

从流程图可以看出，Babel在编译JSX时，会根据标签首字母的大小写来决定不同的编译策略:

• 小写字母开头: 编译为字符串形式的标签名，如 'div'、'span'
• 大写字母开头: 编译为变量引用，如 MyComponent、App

这种区分发生在编译阶段，而非运行时，因此不会带来额外的性能开销。

2.2 React.createElement的工作机制

JSX最终会被编译为 React.createElement 的调用。让我们看看具体的编译结果:

// JSX代码
<div className="container">
<MyComponent name="test" />
<div>content</div>
</div>

上述JSX会被Babel编译为如下JavaScript代码:

React.createElement(
'div',
{ className: 'container' },
React.createElement(MyComponent, { name: 'test' }),
React.createElement('div', null, 'content')
);

注意观察 React.createElement 的第一个参数:

• <MyComponent /> 编译后第一个参数是 MyComponent(变量引用)
• <div> 编译后第一个参数是 'div'(字符串)

这就是大小写区分的本质: Babel通过首字母大小写来决定第一个参数是传递字符串还是传递变量。如果首字母是小写，Babel就认为这是一个原生HTML标签，将标签名作为字符串传入; 如果首字母是大写，Babel就认为这是一个React组件，将组件名作为变量引用传入。

2.3 区分组件与HTML标签的设计哲学

这种设计选择并非偶然，而是React团队经过深思熟虑的结果:

#publish-mermaid-1785810524428-1{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#publish-mermaid-1785810524428-1 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#publish-mermaid-1785810524428-1 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#publish-mermaid-1785810524428-1 .error-icon{fill:#552222;}#publish-mermaid-1785810524428-1 .error-text{fill:#552222;stroke:#552222;}#publish-mermaid-1785810524428-1 .edge-thickness-normal{stroke-width:1px;}#publish-mermaid-1785810524428-1 .edge-thickness-thick{stroke-width:3.5px;}#publish-mermaid-1785810524428-1 .edge-pattern-solid{stroke-dasharray:0;}#publish-mermaid-1785810524428-1 .edge-thickness-invisible{stroke-width:0;fill:none;}#publish-mermaid-1785810524428-1 .edge-pattern-dashed{stroke-dasharray:3;}#publish-mermaid-1785810524428-1 .edge-pattern-dotted{stroke-dasharray:2;}#publish-mermaid-1785810524428-1 .marker{fill:#333333;stroke:#333333;}#publish-mermaid-1785810524428-1 .marker.cross{stroke:#333333;}#publish-mermaid-1785810524428-1 svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#publish-mermaid-1785810524428-1 p{margin:0;}#publish-mermaid-1785810524428-1 .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#publish-mermaid-1785810524428-1 .cluster-label text{fill:#333;}#publish-mermaid-1785810524428-1 .cluster-label span{color:#333;}#publish-mermaid-1785810524428-1 .cluster-label span p{background-color:transparent;}#publish-mermaid-1785810524428-1 .label text,#publish-mermaid-1785810524428-1 span{fill:#333;color:#333;}#publish-mermaid-1785810524428-1 .node rect,#publish-mermaid-1785810524428-1 .node circle,#publish-mermaid-1785810524428-1 .node ellipse,#publish-mermaid-1785810524428-1 .node polygon,#publish-mermaid-1785810524428-1 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#publish-mermaid-1785810524428-1 .rough-node .label text,#publish-mermaid-1785810524428-1 .node .label text,#publish-mermaid-1785810524428-1 .image-shape .label,#publish-mermaid-1785810524428-1 .icon-shape .label{text-anchor:middle;}#publish-mermaid-1785810524428-1 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#publish-mermaid-1785810524428-1 .rough-node .label,#publish-mermaid-1785810524428-1 .node .label,#publish-mermaid-1785810524428-1 .image-shape .label,#publish-mermaid-1785810524428-1 .icon-shape .label{text-align:center;}#publish-mermaid-1785810524428-1 .node.clickable{cursor:pointer;}#publish-mermaid-1785810524428-1 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#publish-mermaid-1785810524428-1 .arrowheadPath{fill:#333333;}#publish-mermaid-1785810524428-1 .edgePath .path{stroke:#333333;stroke-width:1px;}#publish-mermaid-1785810524428-1 .flowchart-link{stroke:#333333;fill:none;}#publish-mermaid-1785810524428-1 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#publish-mermaid-1785810524428-1 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#publish-mermaid-1785810524428-1 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#publish-mermaid-1785810524428-1 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#publish-mermaid-1785810524428-1 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#publish-mermaid-1785810524428-1 .cluster text{fill:#333;}#publish-mermaid-1785810524428-1 .cluster span{color:#333;}#publish-mermaid-1785810524428-1 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#publish-mermaid-1785810524428-1 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#publish-mermaid-1785810524428-1 rect.text{fill:none;stroke-width:0;}#publish-mermaid-1785810524428-1 .icon-shape,#publish-mermaid-1785810524428-1 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#publish-mermaid-1785810524428-1 .icon-shape p,#publish-mermaid-1785810524428-1 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#publish-mermaid-1785810524428-1 .icon-shape .label rect,#publish-mermaid-1785810524428-1 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#publish-mermaid-1785810524428-1 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#publish-mermaid-1785810524428-1 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#publish-mermaid-1785810524428-1 .node .neo-node{stroke:#9370DB;}#publish-mermaid-1785810524428-1 [data-look=\”neo\”].node rect,#publish-mermaid-1785810524428-1 [data-look=\”neo\”].cluster rect,#publish-mermaid-1785810524428-1 [data-look=\”neo\”].node polygon{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785810524428-1 [data-look=\”neo\”].swimlane.cluster rect{filter:none;}#publish-mermaid-1785810524428-1 [data-look=\”neo\”].node path{stroke:#9370DB;stroke-width:1px;}#publish-mermaid-1785810524428-1 [data-look=\”neo\”].node .outer-path{filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785810524428-1 [data-look=\”neo\”].node .neo-line path{stroke:#9370DB;filter:none;}#publish-mermaid-1785810524428-1 [data-look=\”neo\”].node circle{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785810524428-1 [data-look=\”neo\”].node circle .state-start{fill:#000000;}#publish-mermaid-1785810524428-1 [data-look=\”neo\”].icon-shape .icon{fill:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785810524428-1 [data-look=\”neo\”].icon-shape .icon-neo path{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785810524428-1 :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}设计考量

简洁性

可读性

性能优化

HTML兼容性

无需额外语法区分

大小写即可辨识组件类型

编译期确定类型减少开销

与HTML小写标签标准一致

这种设计让JSX既保持了HTML的熟悉感，又能优雅地扩展出组件系统，是React设计哲学中一个非常精妙的细节。

三、实际开发中的应用与注意事项

3.1 动态组件渲染的场景处理

在某些场景下，我们需要根据条件动态渲染不同的组件。这时组件名存储在变量中，需要特别注意命名规则:

// 正确: 将组件赋值给以大写字母开头的变量
const components = {
Button: ButtonComponent,
Input: InputComponent,
Select: SelectComponent
};
function DynamicRenderer({ componentName, …props }) {
const Component = components[componentName];
return <Component {…props} />;
}

上述代码中，我们将动态获取的组件赋值给以大写字母 C 开头的变量 Component，这样JSX就能正确识别它为React组件。如果变量名写成小写的 component，React会将其当作HTML标签处理，导致渲染失败。

3.2 组件赋值给变量的常见坑

当我们将组件赋值给变量时，变量名同样需要以大写字母开头。以下是几个常见场景:

// 场景1: 高阶组件
const EnhancedComponent = withEnhancement(MyComponent);
// 在JSX中使用
<EnhancedComponent />
// 场景2: 条件组件
const SpecificComponent = condition ? ComponentA : ComponentB;
// 在JSX中使用
<SpecificComponent />
// 场景3: 从对象中获取组件
const { MyComponent } = require('./components');
// 在JSX中使用
<MyComponent />

如果变量名以小写字母开头，React会尝试将其作为HTML标签渲染，导致错误。例如:

// 错误示例
const enhancedComponent = withEnhancement(MyComponent);
<enhancedComponent /> // React会尝试渲染名为 enhancedcomponent 的HTML标签

3.3 最佳实践总结

基于以上分析，总结React组件命名的最佳实践:

#publish-mermaid-1785810524679-2{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#publish-mermaid-1785810524679-2 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#publish-mermaid-1785810524679-2 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#publish-mermaid-1785810524679-2 .error-icon{fill:#552222;}#publish-mermaid-1785810524679-2 .error-text{fill:#552222;stroke:#552222;}#publish-mermaid-1785810524679-2 .edge-thickness-normal{stroke-width:1px;}#publish-mermaid-1785810524679-2 .edge-thickness-thick{stroke-width:3.5px;}#publish-mermaid-1785810524679-2 .edge-pattern-solid{stroke-dasharray:0;}#publish-mermaid-1785810524679-2 .edge-thickness-invisible{stroke-width:0;fill:none;}#publish-mermaid-1785810524679-2 .edge-pattern-dashed{stroke-dasharray:3;}#publish-mermaid-1785810524679-2 .edge-pattern-dotted{stroke-dasharray:2;}#publish-mermaid-1785810524679-2 .marker{fill:#333333;stroke:#333333;}#publish-mermaid-1785810524679-2 .marker.cross{stroke:#333333;}#publish-mermaid-1785810524679-2 svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#publish-mermaid-1785810524679-2 p{margin:0;}#publish-mermaid-1785810524679-2 .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#publish-mermaid-1785810524679-2 .cluster-label text{fill:#333;}#publish-mermaid-1785810524679-2 .cluster-label span{color:#333;}#publish-mermaid-1785810524679-2 .cluster-label span p{background-color:transparent;}#publish-mermaid-1785810524679-2 .label text,#publish-mermaid-1785810524679-2 span{fill:#333;color:#333;}#publish-mermaid-1785810524679-2 .node rect,#publish-mermaid-1785810524679-2 .node circle,#publish-mermaid-1785810524679-2 .node ellipse,#publish-mermaid-1785810524679-2 .node polygon,#publish-mermaid-1785810524679-2 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#publish-mermaid-1785810524679-2 .rough-node .label text,#publish-mermaid-1785810524679-2 .node .label text,#publish-mermaid-1785810524679-2 .image-shape .label,#publish-mermaid-1785810524679-2 .icon-shape .label{text-anchor:middle;}#publish-mermaid-1785810524679-2 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#publish-mermaid-1785810524679-2 .rough-node .label,#publish-mermaid-1785810524679-2 .node .label,#publish-mermaid-1785810524679-2 .image-shape .label,#publish-mermaid-1785810524679-2 .icon-shape .label{text-align:center;}#publish-mermaid-1785810524679-2 .node.clickable{cursor:pointer;}#publish-mermaid-1785810524679-2 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#publish-mermaid-1785810524679-2 .arrowheadPath{fill:#333333;}#publish-mermaid-1785810524679-2 .edgePath .path{stroke:#333333;stroke-width:1px;}#publish-mermaid-1785810524679-2 .flowchart-link{stroke:#333333;fill:none;}#publish-mermaid-1785810524679-2 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#publish-mermaid-1785810524679-2 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#publish-mermaid-1785810524679-2 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#publish-mermaid-1785810524679-2 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#publish-mermaid-1785810524679-2 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#publish-mermaid-1785810524679-2 .cluster text{fill:#333;}#publish-mermaid-1785810524679-2 .cluster span{color:#333;}#publish-mermaid-1785810524679-2 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#publish-mermaid-1785810524679-2 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#publish-mermaid-1785810524679-2 rect.text{fill:none;stroke-width:0;}#publish-mermaid-1785810524679-2 .icon-shape,#publish-mermaid-1785810524679-2 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#publish-mermaid-1785810524679-2 .icon-shape p,#publish-mermaid-1785810524679-2 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#publish-mermaid-1785810524679-2 .icon-shape .label rect,#publish-mermaid-1785810524679-2 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#publish-mermaid-1785810524679-2 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#publish-mermaid-1785810524679-2 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#publish-mermaid-1785810524679-2 .node .neo-node{stroke:#9370DB;}#publish-mermaid-1785810524679-2 [data-look=\”neo\”].node rect,#publish-mermaid-1785810524679-2 [data-look=\”neo\”].cluster rect,#publish-mermaid-1785810524679-2 [data-look=\”neo\”].node polygon{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785810524679-2 [data-look=\”neo\”].swimlane.cluster rect{filter:none;}#publish-mermaid-1785810524679-2 [data-look=\”neo\”].node path{stroke:#9370DB;stroke-width:1px;}#publish-mermaid-1785810524679-2 [data-look=\”neo\”].node .outer-path{filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785810524679-2 [data-look=\”neo\”].node .neo-line path{stroke:#9370DB;filter:none;}#publish-mermaid-1785810524679-2 [data-look=\”neo\”].node circle{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785810524679-2 [data-look=\”neo\”].node circle .state-start{fill:#000000;}#publish-mermaid-1785810524679-2 [data-look=\”neo\”].icon-shape .icon{fill:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785810524679-2 [data-look=\”neo\”].icon-shape .icon-neo path{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785810524679-2 :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

React组件命名最佳实践

组件名PascalCase

文件名与组件名一致

变量名首字母大写

动态渲染变量大写

类名或函数名大写

示例: MyComponent

示例: MyComponent.jsx

示例: const EnhancedComponent

示例: const Component

示例: class MyComponent

记住这条核心规则: 在React中，大写字母开头的是组件，小写字母开头的是HTML标签。这个简单的约定贯穿了React的整个设计体系，理解它背后的原理，能帮助我们在开发中避免许多常见的坑。无论是定义新组件、使用高阶组件，还是处理动态渲染场景，首字母大写都是不可忽视的基本规范。