深入理解React – 1

JSX

提到JSX大家都不陌生，在很多人的印象中可能无非就是在组件中写HTML模版，而JSX到底是什么呢，我们又为什么要使用JSX呢，今天我们一起来深入了解一下。

通过阅读源码，我们了解到JSX实际上是会被babel编译为React.createElement()的方法， 而React.createElement会返回一个叫做“React Element”的对象。 有不了解babel的小伙伴，babel其实是一个工具链，他的主要作用就是将js代码转换为向后兼容的js语法，使其能够运行在当前和旧版本的浏览器和其他环境中。 所以JSX实际上只是一种语法糖，作用也仅仅是让开发人员能够在组件中更加容易的编写html模版而已，这样能够提升开发效率和开发体验

createElement

那么随之而来的问题是createElement有什么作用呢？

function createElement(type, config, children) {
    ...
}

可以看到createElement实际上接收三个参数，

• type： HTML中的标签，如h1, div, p等等，也可以是react组件或者react fragment.
• config：以对象的形式传入，组件的属性会以键值对的形式记录在config对象里
• children：同样以对象的形式传入，记录组件标签之间嵌套的内容以及子节点

根据createElement工作流可见，createElement的实际作用就是格式化数据，他是充当开发者和ReactElement的转换器，最终返回了对ReactElement的调用

那么问题又来了，ReactElement又是什么呢？我们打印一下试试

这个就是我们熟悉的虚拟DOM啦！！React拿到虚拟DOM会用ReactDom.render方法将虚拟DOM转化为实际的DOM