React(一)JSX是如何变成DOM的
2020-11-04 本文已影响0人
夕阳不西下_
1.jsx本质,和js的关系?
js的语法扩展,和模板语言很接近,充分具备js的能力。是React.createElement这个js调用的语法糖
2.如何在js中生效?
通过babel(JSX —(被编译)React.createElememt() —(返回)'React Element'的js对象)
3.什么是babel?
一个工具链,将es5+的版本代码转为向后兼容的js语法,使其能运行在旧版本的浏览器或其他环境中
4.为什么要用jsx,不用会怎样?
JSX代码层次分明,嵌套关系清晰,提高效率,反之
5.JSX是如何映射为DOM的
开发者---createElement(数据处理层,阅读源码可知:每个步骤都在格式化数据)--- ReactElement(组装进element对象)--- (返回给)createElement--- (返回)开发者
ReactElement的对象实例就是虚拟DOM中的一个节点,到真实DOM需要ReactDOM.render填补
ReactDOM.render(
// 需要渲染的元素(ReactElement)
element,
// 元素挂载的目标容器(一个真实DOM)
container,
// 回调函数,可选参数,可以用来处理渲染结束后的逻辑
[callback]
)