React的jsx到底是个啥(涉及虚拟DOM、React.createElement方法、ReactElement对象、ReactDOM.render)

关于jsx

(1)JS的语法扩展,所以不是天生就被浏览器支持;

(2)会被Babel编译为React.createElement(),其将返回一个称为“React Element”的js对象;

(3)Babel是一个工具链,主要将es6及以上版本的js转换为向后兼容的js,以便能够运行在当前和旧版本的浏览器或其他环境中;

(4)jsx等价于一次React.createElement调用,本质是个包装了React.createElement的语法糖;

(5)React.createElement(type, config, children)三个参数,调用后会return ReactElement对象;

(6)ReactElement按一定的规范组装参数,本质是个js对象(源码是个element),or 虚拟DOM;

(7)虚拟DOM被ReactDOM.render( element, container, [callback] )方法调用。
React的jsx到底是个啥(涉及虚拟DOM、React.createElement方法、ReactElement对象、ReactDOM.render)