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

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

如果你曾经使用过React，你可能会注意到component names总是以 开头capital letters。但你知道为什么吗？🤔

//This is wrong and will not work ❌
export function myComponent() {
  return (
        <h1>Hello, World!</h1>
    );
}

//Right way to write a React component ✅
export function MyComponent() {
  return (
        <h1>Hello, World!</h1>
    );
}

在 中JSX，React 组件的语法可以通过 转换为纯 JavaScript，这React.createElement API要归功于Babel。这就是大写字母的由来：

当Babel遇到以 a 开头的名称时capital letter，它知道正在处理 aReact component并将其转换为 a React Fiber object（React 渲染系统的关键部分）。

另一方面，如果名称以 开头lowercase letter，Babel 会将其视为string rather than a component。这有助于 React 区分native HTML elements和custom components!

因此，请务必记住将组件名称大写，以便 React 能够正确解释它们。💡

谢谢阅读！🚀