JSX与组件类实例化

Question

有人可以向我解释以下两个陈述之间的区别吗？

let test1 = new CustomComponent();

和

let test2 = <CustomComponent />

调试器是Chrome给我的:

for test1
CustomComponent {props: undefined, context: undefined, refs: Object, updater: Object, state: Object…}

for test2
Object {$$typeof: Symbol(react.element), key: null, ref: null, props: Object, type: function…}

如何从test1类型的变量中获取test2类型的变量？

Answer 1

所以.

let test1 = new CustomComponent();只是一个常规的javascript事情,同样的事情发生在调用new thing()任何其他时间.没什么特别的.

let test2 = <CustomComponent />这是一个JSX声明,而babel做了一些魔术.它汇编<CustomComponent />成React.createElement(CustomComponent , null).所以,你可以看到它与调用完全不同new,它调用一个React函数来创建一个元素,反应知道如何处理.

Babel有一个REPL工具,如果你想快速了解一下发生了什么,你可以用来查看它对你的源代码做了什么.