React 组件命名规范：为什么必须大写首字母

在 React 中，组件命名必须以大写字母开头是一个重要的规范，这一要求与 React 的 JSX 语法解析机制密切相关。

原因主要有以下两点：

1. 区分 React 组件与普通 HTML 元素
   JSX 语法规定：小写字母开头的标签会被解析为 HTML 内置元素（如 <div>、<span>），而大写字母开头的标签则会被识别为 React 组件。

   例如：

   jsx

   // 正确：被识别为 React 组件
   <MyComponent />
   
   // 错误：会被误认为是 HTML 元素而报错
   <myComponent />
   

2. 确保 JSX 解析器正确工作
   React 的 JSX 转换器在编译时会根据首字母大小写来决定如何处理标签。大写开头的标识符会被视为变量引用，指向你定义的 React 组件，而小写开头的则会被编译为字符串形式的 HTML 标签名。

   当你定义组件时，如果使用小写开头，即使它是一个合法的组件函数，JSX 也会尝试将其解析为 HTML 元素，从而导致错误：

   jsx

   // 错误的组件定义
   function myComponent() {
     return <div>Hello</div>;
   }
   
   // 使用时会报错，因为 React 会寻找 <myComponent> 这样的 HTML 元素
   function App() {
     return <myComponent />;
   }
   

这一规范适用于所有组件类型，包括函数组件、类组件以及通过 React.memo 等方法包装的组件。遵循这一规范可以避免很多难以排查的解析错误，是 React 开发中的基础最佳实践。