React：核心库引入与JSX语法

是席木木啊

已于 2022-10-04 02:58:01 修改

阅读量1k

点赞数 1

分类专栏： React 文章标签： react.js jsx 前端

于 2022-10-04 02:56:26 首次发布

本文链接：https://blog.csdn.net/weixin_43524214/article/details/127158207

版权

React 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

React简介

借用React官网的一句话：React是用于构建用户界面的JavaScript库。翻译过来含义就是：React框架关注点在于前端用户界面。相比原生JavaScript开发网页页面，频繁操作原生DOM元素的方式（像：查找、获取、增加、删除、更新等），React框架具有好的性能优势。

React的性能优势依靠其底层的Diffing 算法实现，如上从官网的截图所示，主要表现在：由React开发库构建的web页面，在数据源更新之后，会调用函数 render（）构建一个新的（虚拟）DOM树，并基于Diffing算法，将新的虚拟DOM树，与旧有的虚拟DOM树进行比对，然后只去更新存在差异的那些个虚拟DOM结点，最终渲染到真实的DOM树上。这样就减少了对DOM树的频繁操作，从而提升性能。

React：Hello,World！

如下代码，基于React框架实现了“Hello，World！”的打印操作。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>方式1-使用JSX语法创建VDOM</title>

</head>

<body>
    <!-- DOM容器 -->
    <div id="app"></div>
</body>
<!-- 引入React开发库 -->
<script src="./js/libs/react.development.js"></script>
<script src="./js/libs/react-dom.development.js"></script>
<!-- 引入浏览器适用的babel,作用:将jsx语法代码转换为js代码 -->
<script src="./js/libs/babel.min.js"></script>
<!-- type='text/babel'-表示script标签中的代码将要通过babel进行语法转换 -->
<script type="text/babel">
    const container = document.getElementById("app");
    //1-create-虚拟DOM-{使用JSX创建} 
    const virtual_dom = (
        <h1>
            <span>Hello，World！</span>
        </h1>
    ); /*此处不能写引号,因为不是字符串,而是虚拟DOM*/
    //2-render-虚拟DOM-${参数1:将要被添加的虚拟DOM;2-应用容器}
    ReactDOM.render(virtual_dom,container);
    
</script>
</html>

注意到，在这个HTML页面中，引入了如下3个JavaScript脚本库，其作用如下，

【1】react.development.js：React的核心库[开发版本]；

【2】react-dom.development.js：提供操作DOM的react扩展库 [开发版本]；

【3】babel.min.js：解析JSX语法代码，将其转换为JS代码的库。

React：虚拟DOM与JSX语法

React框架中，虚拟DOM结点的创建主要有两种方式，

方式1：基于JS语法创建。调用React的核心开发库react.js中提供的React.createElement()函数创建；

方式2：基于JSX语法创建。

基于JS语法创建虚拟DOM结点

基于JavaScript语法创建虚拟DOM结点，需要预先引入react.js核心库，然后调用其`React.createElement()`方法实现。

如下是示例代码实现，

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>方式2-使用JS创建VDOM</title>

</head>

<body>
    <!-- DOM容器 -->
    <div id="app"></div>
</body>
<!-- 引入React开发库 -->
<script src="./js/libs/react.development.js"></script>
<script src="./js/libs/react-dom.development.js"></script>
<script type="text/javascript">
    const container = document.getElementById("app");
    //1-create-虚拟DOM-{使用JS创建} 
    const virtual_dom = React.createElement("h1", { id: "title" }, 
                                React.createElement("span",{},'Hello,React!'));
    //2-render-虚拟DOM-${参数1:将要被添加的虚拟DOM;2-应用容器}
    ReactDOM.render(virtual_dom, container);

</script>

</html>

基于JSX语法创建虚拟DOM结点

JSX（JavaScript XML），是一种JavaScript的语法扩展，首先在React前端开发框架中被引入，但是其底层还是完全依靠JavaScript语法实现的。

React框架中，JSX语法的存在目的是：方便开发者创建虚拟DOM元素，如下所示，一行简单的代码就可以替换掉上面“基于JS语法创建虚拟DOM结点”中调用的`React.createElement()`方法，实现虚拟DOM元素的创建。

const element = <h1>Hello, world!</h1>;

如下为基于JSX语法实现“Hello,React！”打印的案例。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>方式1-使用JSX语法创建VDOM</title>

</head>

<body>
    <!-- DOM容器 -->
    <div id="app"></div>
</body>
<!-- 引入React开发库 -->
<script src="./js/libs/react.development.js"></script>
<script src="./js/libs/react-dom.development.js"></script>
<!-- 引入浏览器适用的babel,作用:将jsx语法代码转换为js代码 -->
<script src="./js/libs/babel.min.js"></script>
<!-- type='text/babel'-表示script标签中的代码将要通过babel进行语法转换 -->
<script type="text/babel">
    const container = document.getElementById("app");
    //1-create-虚拟DOM-{使用JSX创建} 
    const virtual_dom = (
        <h1>
            <span>Hello,React!</span>
        </h1>
    ); /*此处不能写引号,因为不是字符串,而是虚拟DOM*/
    //2-render-虚拟DOM-${参数1:将要被添加的虚拟DOM;2-应用容器}
    ReactDOM.render(virtual_dom,container);
    
</script>
</html>

ReactDOM：render方法

ReactDOM.render()方法的官网介绍点击此处可查看，该方法会在提供的 container容器里渲染一个 React 元素，并返回对该组件的引用（或者针对无状态组件返回 null）。

ReactDOM.render(element, container, [callback])

其中：①element：表示要被渲染的Virtual DOM-虚拟DOM结点；

②container：表示React应用的DOM容器元素；

③callback：是可选项，表示一个回调函数，将在组件被渲染或更新之后被执行。

简单来说，ReactDOM.render()方法可以用来控制传递到container容器（本质上为DOM元素）中的内容element。当首次调用时，container容器结点中的所有DOM元素都会被替换掉；之后第2~n次调用，则会基于React底层的DOM查分算法（DOM Diffing Algorithm）进行高效的更新。

ReactDOM.render()方法可以用于更新container容器中的子节点，可以在不覆盖现有子节点的情况下，将组件插入已有的DOM节点中。如下为官网的详细介绍。

是席木木啊

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
React：核心库引入与JSX语法

React官网：React是用于构建用户界面的JavaScript库，其含义就是：React框架关注点在于前端用户界面。相比原生JavaScript开发网页页面，频繁操作原生DOM元素的方式（像：查找、获取、增加、删除、更新等），React框架依靠其底层的Diffing 算法，具有更好的性能优势。
复制链接

扫一扫