重新认识jsx

一、我们先看几个实例

let code = <div>123</div>;

babel转换后

var code = React.createElement("div", null, "123");

let code = <div>123<p>456</p></div>;

babel转换后

var code = React.createElement("div", null, "123", React.createElement("p", null, "456"));

let code = <div>123<p>456</p>{8 > 9 && <p>789</p>}</div>;

babel转换后

var code = React.createElement("div", null, "123", React.createElement("p", null, "456"), 8 > 9 && React.createElement("p", null, "789"));

二、babel转换jsx代码的方式

对于每一个jsx标签，babel都会转换成React.createElement(tag, attrs, child1, child2, child3)。

子元素会依次作为参数跟在标签属性attrs后面。

对于标签中的表达式{}，也是作为子标签梳理。

纯文本则直接字符串作为子元素。

三、这也是为什么我们在组件中并没有直接使用React，仍然要import进来。

参考资料

https://facebook.github.io/jsx/
https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx
https://blog.waterstrong.me/jsx-syntax/
https://babeljs.io/repl

如果对你有帮助，可以请我喝杯咖啡