为何AppRegistry.registerComponent传入()=>App可行，直接传App报错？

咱们先把AppRegistry.registerComponent的核心要求掰明白：它的第二个参数必须是一个工厂函数——说白了就是，调用这个函数之后，得返回一个React组件（不管是类组件还是函数组件），而不是直接传组件本身，更不能传那种直接返回React元素的函数。

现在结合你的代码来看：
你的App是这么定义的：

export const App= () =>(
 <Test/>
 );

这确实是个函数组件，但它的作用是返回一个React元素（<Test/>其实是React.createElement(Test)的语法糖，最终得到的是一个对象）。

现在拆解三个选项的本质：

• 选项1：() => Test
  当AppRegistry调用这个函数时，返回的是Test这个类组件本身（一个类，完全符合“返回组件”的要求），所以运行正常。

• 选项2：直接传App
  这里的问题就出在：AppRegistry会把你传入的第二个参数当成工厂函数去执行。它执行App()之后，得到的是<Test/>对应的React元素对象，而不是一个组件（类或者函数）。这就正好踩中了错误提示里的坑：它期望拿到组件（字符串/类/函数），结果拿到了一个对象，自然就报错了。

• 选项3：() => App
  这个工厂函数被调用时，返回的是App这个函数组件本身（一个函数，符合要求）。之后AppRegistry就可以用这个组件来创建元素、完成渲染，所以完全没问题。

一句话总结：
AppRegistry.registerComponent要的是“能造出组件的函数”，不是“组件”，也不是“能造出元素的函数”。直接传App相当于给了它一个“造元素的函数”，执行后得到的是元素对象，不符合要求；而() => App是“造组件的函数”，执行后得到的是组件本身，才是它要的东西。

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