为什么React组件需要以大写字母开头？

为什么React组件需要以大写字母开头？

如果你曾经使用过 React，你可能会注意到组件名称总是以大写字母开头。但你知道为什么吗？🤔

    //这是错误的，不会起作用 ❌
    export function myComponent() {
      return (
            <h1>Hello, World!</h1>
        );
    }

进入全屏模式 退出全屏模式

    // 正确编写React组件的方式 ✅
    export function MyComponent() {
      return (
            <h1>你好，世界!</h1>
        );
    }

进入全屏模式 退出全屏模式

在 JSX 中，React 组件是以一种语法书写的，这种语法会通过 Babel 转换为使用 React.createElement API 的纯 JavaScript 代码。这里就是大写字母登场的地方：

当 Babel 遇到一个以 大写字母 开头的名字时，它就知道这是在处理一个 React 组件，并将其转换为 React Fiber 对象（React 渲染系统的关键部分）。

另一方面，如果名称以 小写字母 开头，Babel 会将其视为 字符串而不是组件。这有助于 React 区分 原生 HTML 元素 和 自定义组件！

所以，请记得始终将组件名称首字母大写，以便React正确解析它们。💡

感谢阅读！🚀