React学习（一）

最新推荐文章于 2024-08-24 16:31:18 发布

qq_52551375

最新推荐文章于 2024-08-24 16:31:18 发布

阅读量387

点赞数 7

文章标签： react.js 学习 javascript

本文链接：https://blog.csdn.net/qq_52551375/article/details/135759651

版权

本文介绍了React的核心概念，包括其特点（组件化、声明式编码、用于移动端的ReactNative），以及虚拟DOM和Diffing算法如何提高性能。通过创建和渲染HelloReact案例，展示了纯JS和jsx创建虚拟DOM的方法，并比较了虚拟DOM与真实DOM的区别。

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

React学习（一）

一.react简介

react的特点
（1）采用组件化模式、声明式编码，提高开发效率及组件复用率。
（2）React Native中可以使用React进行移动端开发
（3）采用虚拟DOM+Diffing算法，减少与真实DOM的交互
react高效原因
（1）使用虚拟DOM
（2）DOM Diffing算法，最小化页面重绘
Hello React 案例
（1）react.development.js:react核心库
（2）babel.min.js：ES6到ES5的转换，jsx转换为js
（3）react-dom.development.js:扩展库

<!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>Document</title>
</head>
<body>
    <div id="test">

    </div>
    <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>
    <script type="text/babel">
        // 创建
        const VDOM = <h1>Hello world</h1>
        // 渲染
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</body>
</html>

4.创建虚拟DOM的两种方式
（1）纯js
（2）jsx方式 (是js的语法糖）

//纯js
<!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>使用JS创建虚拟DOM</title>
</head>
<body>
    <div id="test">

    </div>
    <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>
    <script type="text/javascript">
        // 创建
        const VDOM = React.createElement('h1',{id:'tittle'},React.createElement('span',{},'Hello, React'))//标签名，标签属性，标签内容
        // 渲染
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</body>
</html>

//jsx方式
<!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>Document</title>
</head>
<body>
    <div id="test">

    </div>
    <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>
    <script type="text/babel">
        // 创建
        const VDOM = (
            <h1>
                <span>Hello world</span>
            </h1>
        )
        // 渲染
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</body>
</html>

5.虚拟DOM和真实DOM

<!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>Document</title>
</head>
<body>
    <div id="test"></div>
    <div id = "demo"></div>
    <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>
    <script type="text/babel">
        // 创建
        const VDOM = (
            <h1>
                <span>Hello world</span>
            </h1>
        )
        // 渲染
        ReactDOM.render(VDOM,document.getElementById('test'))
        const TDOM = document.getElementById('demo')
        console.log('虚拟DOM',VDOM)
        console.log('真实DOM',TDOM)
        debugger;
        // console.log(typeof VDOM)
        // console.log(VDOM instanceof Object)
        // 1.虚拟DOM本质是Object类型的对象（一般对象）
        // 2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是react内部在用，无需真实DOM那么多属性
        // 3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上
    </script>
</body>
</html>

qq_52551375

关注

7
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
React学习（一）

（2）babel.min.js：ES6到ES5的转换，jsx转换为js。（2）React Native中可以使用React进行移动端开发。（3）采用虚拟DOM+Diffing算法，减少与真实DOM的交互。（1）react.development.js:react核心库。（3）react-dom.development.js:扩展库。（2）DOM Diffing算法，最小化页面重绘。（2）jsx方式 (是js的语法糖）4.创建虚拟DOM的两种方式。5.虚拟DOM和真实DOM。（1）使用虚拟DOM。
复制链接

扫一扫