老师，为什么在代码里写了 jsx，就会调用 React.createElement这个方法？

Question

老师，为什么在代码里写了 jsx，就会调用 React.createElement这个方法？
是在编译后，babel 调用的吗？

Answer 1

杨艺韬 2023-07-14 09:37:19

因为jsx会被转译工具（一般是babel）转化为React.creatElement这样的函数调用，而我们实现了这个函数，打个比方，我们最初的目标是把一个普通人变成军人，这个过程可能需要两步，第一步，想办法让这个人有强烈意愿成为军人，第二步，把这个人交给军队训练。我们把jsx转化为虚拟dom对象也可以抽象为两步，第一步将jsx转化为函数调用，第二步，将相关参数传给这个函数并返回虚拟dom值。只不过第一步是babel完成的，第二步是react内部实现的。所以我们要在react源码中实现这个能返回虚拟dom的函数。

• 提问者 菲迪亚斯 #1

  就是我们实现了React.createElement这个方法后，在编译的时候 babel 会自动去调用这个方法吗？

• 杨艺韬 回复 提问者 菲迪亚斯 #2

  不是babel去调用这个函数，babel只负责将jsx转化成函数。我们的项目分为编译阶段和运行阶段，在编译阶段，babel会把jsx:<div>test</div> 转化为React.createElement("div", null, "test"); 在程序运行的时候，自然就会执行React.createElement("div", null, "test"); 因为这里createElement就是我们实现的react中的一个函数。如果这样还是不能理解，可以尝试观察一个react项目被打包后的结果文件，就能比较直观的感受到。

• 提问者 菲迪亚斯 回复 杨艺韬 #3

  好的，我看看去，谢谢老师