javascript - JSX vs组件类实例化

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

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 类型的变量？

最佳答案

所以。
let test1 = new CustomComponent();只是普通的javascript事物，与其他任何时候调用new thing()相同的事情发生。没什么特别的。
let test2 = <CustomComponent />这是一个JSX语句，而babel做一些魔术。它将<CustomComponent />编译为React.createElement(CustomComponent , null)。因此，正如您所看到的，这与调用new完全不同，它调用的是一个React函数，该函数创建一个元素，react知道如何处理。

Babel有一个REPL工具，如果您想快速了解幕后情况，可以使用它来查看其对源代码的作用。