React简介、JSX语法详解

Darlingmi

已于 2022-07-31 10:18:22 修改

阅读量423

点赞数 1

分类专栏： React 文章标签： react.js javascript html5

于 2021-09-25 22:15:21 首次发布

本文链接：https://blog.csdn.net/darlingmi/article/details/120478426

版权

本文介绍了React的基本概念，包括它是一个JavaScript库，强调组件化开发，并由Facebook于2013年发布。文章详细阐述了React的开发过程，如导入JS文件和DOM渲染。重点讲解了虚拟DOM的概念及其优势，以及如何通过Diff算法优化性能。此外，还深入探讨了JSX语法，解释了其允许JS与HTML混合书写，提高了开发效率。最后，讨论了JSX如何通过Babel转化为JavaScript代码，形成虚拟DOM，并最终渲染为真实DOM。

摘要由CSDN通过智能技术生成

一、React简介

是一个JavaScript的库,目的是简化用户界面的开发。
是基于JSX(JavaScript Xml)语法,可以和html、js混合书写。
核心是组件,可以实现用户界面的模块化开发,代码的复用率高、可维护性好。
是Facebook公司开发,2013年发布。

二、React的开发过程

1、导入js文件

<script src="../js/react.development.js"></script> <!-- React的核心库 -->
<script src="../js/react-dom.development.js"></script><!-- React与DOM有关的库 -->
<script src="../js/babel.min.js"></script><!-- 用于将ES6转换成ES5 -->

2、创建并进行DOM的渲染

ReactDOM.render(虚拟的DOM,实际的DOM)

三、React的虚拟DOM

1、实际的DOM

传统的HTML的UI设计,承载了数据的呈现和更新,浏览器在呈现DOM之前,要构建一棵DOM树,若该DOM树中的某一点发生了变化,就必须重新构建;对于复杂的DOM,若频繁的重建就会导致页面的性能下降。

2、虚拟的DOM

通过Diff算法与原始的虚拟DOM Tree进行比较，计算出变化的节点并进行更新操作。该算法的优势就是减少了对DOM的频繁重复操作，从而提升页面的访问性能。

四、JSX语法

React 认为组件才是王道，而组件是和模板紧密关联的，组件模板和组件逻辑分离让问题复杂化了。所以就有了 JSX 这种语法，就是为了把 HTML 模板直接嵌入到 JS 代码里面，这样就做到了模板和组件关联。

1、JSX其实就是JavaScript XML的缩写，直译过来就是基于JavaScript的XML。

2、通过React JSX方式定义的虚拟DOM，最终也会转换为通过createElement()方法实现虚拟DOM。

JSX 的本质就是一个React.createElement函数，他接收多个参数来返回 Vnode

五、JSX语法详解

JSX的一般语法形式是

const element=(
		<tag-level-1></

最低0.47元/天解锁文章