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] )方法调用。