React基础入门

最新推荐文章于 2024-09-24 22:48:58 发布

蛞蝓不孤寡

最新推荐文章于 2024-09-24 22:48:58 发布

阅读量250

点赞数 2

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/fish_skyyyy/article/details/115068152

版权

React 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

React基础入门

React概述

React是一个JavaScript库，基于JSX的语法，JSX是React的核心组成部分。React核心是组件，组件的设计提高了代码的复用率，降低了测试的难度和代码复杂度，组件将数据和逻辑进行封装。

那么JSX又是什么呢？ 首先我们来看看代码：

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

这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML，它被称为 JSX，一种 JavaScript 的语法扩展。

JSX其实就是JavaScript XML的缩写，直译过来就是基于JavaScript的XML。JSX 看起来似乎是一种XML格式，其本质仍旧是一种JavaScript语言，只不过是将JavaScript脚本代码写成XML样式。

我们推荐在 React 中使用 JSX 来描述用户界面。

JSX有什么优点？我们为什么要使用它？

（1）JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
（2）它是类型安全的，在编译过程中就能发现错误。
（3）使用 JSX 编写模板更加简单快速。

ReactDOM.render()方法的语法格式

要将 React 元素渲染到根 DOM 节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上。
语法：
ReactDOM.render(element,container[,callback])
element参数：必须，表示渲染的源对象(元素或组件)
container参数：必须，表示渲染的目标对象(元素或组件)
callback参数：可选，用于定义回调函数

在写应用实例前，我们需要将react的一些文件引入：

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

<body>
    <div id="example"></div>
    <script type="text/babel">
        //定位到div
        var reactdiv=document.getElementById('example');
        //创建虚拟DOM
        const reacth=<h3>Hello</h3>
        //将虚拟的DOM添加到div中
        ReactDOM.render(reacth,reactdiv);
    </script>
</body>

React中的DOM

React框架支持创建虚拟DOM来提高页面性能。那这样我们就要说一说，什么是虚拟DOM。

背景
在进行传统HTML网页设计时，往往会定义大量的DOM元素，这就是所谓的实际DOM。通常实际DOM负责承载着外观表面和数据变化，任何外观形式的改变或数据信息的更新都要反馈到UI上，这些都需要通过操作实际DOM来实现。
但是对于复杂的页面UI而言，一般都会定义大量的实际DOM，频繁操作实际DOM会导致访问性能的下降，用户体验也会随之变差。因此React框架专门针对这个现象引入了虚拟DOM，以避免频繁操作实际DOM而带来的性能下降的问题。
ReactDOM类似于一种将相关的实际DOM组合在一起的集合，因此React框架将ReactDOM称为虚拟DOM。

实际DOM

<body>
    <div id="example"></div>
    <script>
        var mydiv=document.getElementById('example')
        const jsspan=document.createElement('span')
        const jsh=document.createElement('h3')
        const jsp=document.createElement('p')
        jsh.innerHTML='Hello';
        jsp.innerHTML="React"
        mydiv.appendChild(jsspan);
        jsspan.appendChild(jsh);
        jsspan.appendChild(jsp);
    </script> 
</body>

虚拟DOM

<body>
    <div id="example"></div>
    <script type="text/babel">
        //定位到div
        var reactdiv=document.getElementById('example');
        //创建虚拟DOM
        const reacth=React.createElement('h3',{},'Hello');
        const reactp=React.createElement('p',{},'React');
        const reactspan=React.createElement('span',{},reacth,reactp);
        //将虚拟的DOM添加到div中
        ReactDOM.render(reactspan,reactdiv);
    </script>
</body>

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

React的渲染机制

Diff算法是支撑React渲染机制的核心技术之一

Diff算法的核心就是通过比较找到DOM Tree前后的差异。

React渲染机制的基本原理：在DOM Tree的状态和属性发生改变后，构造出新的虚拟DOM Tree。然后通过Diff算法与原始的虚拟DOM Tree进行比较，计算出变化的节点并进行更新操作。

优点：减少了对DOM的频繁重复操作，从而提升页面的访问性能。

React优势

（1）声明式设计：React 采用声明范式，可以轻松描述应用。
（2）高效：React通过对DOM的模拟,最大限度地减少与DOM的交互。
（3）灵活：React可以与已知的库或框架很好地配合。
（4）使用JSX语法：JSX是JavaScript语法的扩展，可以极大地提高JS运行效率。
（5）组件复用：通过React构建组件使得代码易于复用，可在大型项目应用开发中发挥优势。
（6）单向响应的数据流：React实现了单向响应的数据流，减少了重复代码，比传统数据绑定方式更简单。