为什么React中App函数组件可渲染，小写开头的test组件无法渲染？

请问在React中，为什么写一个名为App的函数时，render方法可以正常渲染其返回的HTML内容，但如果换成其它小写开头的函数名比如test就无法渲染？

这是JSX的固有语法约定，React在编译JSX时会严格遵循以下规则判断标签类型：

• 首字母大写的标签：会被识别为用户自定义的React组件，React会到当前作用域查找对应的函数/类执行，渲染其返回的内容
• 首字母小写的标签：会被默认识别为浏览器原生DOM元素（如<div>、<span>），React不会到自定义函数作用域查找对应实现

你给出的两个示例的差异也源于此：

• 写<App />时，React识别到首字母大写，找到你定义的App函数执行，正常渲染返回的内容
• 写<test />时，React会当作原生HTML的<test>标签处理，但HTML规范中不存在这个原生标签，所以无法渲染出你预期的内容，一般浏览器控制台还会抛出对应的警告提示。

如果需要让小写开头的函数作为组件正常渲染，可以将其赋值给一个首字母大写的变量后再使用，示例如下：

function test() {
    return (
        <div>
            <h1>hello test</h1>
        </div>
    );
}
// 赋值给首字母大写的变量
const Test = test;
ReactDOM.render(<Test />, document.getElementById("root")); // 此时可正常渲染

内容的提问来源于stack exchange，提问作者jon boe