javascript - 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 函数，该 React 知道如何处理。

Babel 有一个 REPL如果您想快速了解幕后发生的事情，可以使用该工具查看它对您的源代码做了什么。