React简介

最新推荐文章于 2024-09-30 22:38:46 发布

萧篱衣

最新推荐文章于 2024-09-30 22:38:46 发布

阅读量1.5k

点赞数

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

本文链接：https://blog.csdn.net/weixin_47272508/article/details/126936919

版权

React 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、React是什么？

是一个将数据渲染为HTML视图的开源JavaScript库

二、React谁开发的？

由Facebook开发且开源，近十年“陈酿”，阿里等大厂开始使用

三、为什么要学？

（一）原生js痛点

1.原生JavaScript操作DOM繁琐、效率低（DOM-API操作UI）

document.getElementById('app')
document.querySelector('#app')
document.getElementsByTagName('span')

2.使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排

3.原生JavaScript没有组件化（模块化）编码方案，代码复用率低

（二）React特点

1.采用组件化模式，声明式编码，提高开发效率和组件复用率

2.在React Native中可以用React语法进行移动端开发

3.使用虚拟DOM和优秀的Diffing算法，尽量减少与真实DOM的交互，提高性能

四、React依赖介绍

1）react.js:React核心库。

2）react-dom.js:提供操作DOM的react扩展库。

3）babel.min.js:解析Jsx语法代码转为Js代码的库。

五、实例一初步认识React

1.桌面新建文件夹并用VS Code打开

2.建立js，01_hello_react两个文件夹，前者放react依赖，后者新建html文件

PS：可用过shift+！+回车快速生成模板

Ctrl+K+C ： // 注释

Ctrl+K+U ：取消//注释

Alt + Shift +A ：/* */ 多行注释

Alt + Shift +A ：取消多行注释

3.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello_react</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel"> /* 此处一定要写babel */
    //1.创建虚拟DOM
    const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 */
    //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</body>
</html>

4.页面效果

六、虚拟dom的两种创建方式

（一）使用jsx创建虚拟DOM

1.代码和上个案例基本一致，只在h1处添加了id

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jsx创建虚拟DOM</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel"> /* 此处一定要写babel */
    //1.创建虚拟DOM
    const VDOM = <h1 id="title">Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 */
    //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</body>
</html>

2.页面效果如下

（二）使用js创建虚拟DOM（一般不用这种写法）

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用js创建虚拟DOM</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>

    <script type="text/javascript">
    //1.创建虚拟DOM
    const VDOM = React.createElement('h1',{id:'title'},'Hello,React') /* 此处一定不要写引号，因为不是字符串 */
    //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</body>
</html>

2.页面效果

（三）虚拟DOM与真实DOM

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>虚拟DOM与真实DOM</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel"> /* 此处一定要写babel */
    //1.创建虚拟DOM
    const VDOM = ( /* 此处一定不要写引号，因为不是字符串 */
        <h1 id="title">
            <span>Hello,React</span>
        </h1>
    )

    //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM,document.getElementById('test'))

    console.log('虚拟DOM',VDOM);
    console.log(typeof VDOM);  /* 验证是哪种数据类型 */
    console.log(VDOM instanceof Object) /* 验证是不是object实例 */
    </script>
</body>
</html>

2.页面效果

3. 虚拟DOM对象最终都会被React转换为真实的DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>虚拟DOM与真实DOM</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <div id="demo"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel"> /* 此处一定要写babel */
    //1.创建虚拟DOM
    const VDOM = ( /* 此处一定不要写引号，因为不是字符串 */
        <h1 id="title">
            <span>Hello,React</span>
        </h1>
    )
    const TDOM = document.getElementById('demo')

    //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM,document.getElementById('test'))

    console.log('虚拟DOM',VDOM);
    console.dir('真实DOM',TDOM)
    //console.log(typeof VDOM);  /* 验证是哪种数据类型 */
    //console.log(VDOM instanceof Object) /* 验证是不是object实例 */

    /* 
    关于虚拟DOM：
    1.本质是object类型的对象（一般对象）
    2.虚拟dom上的属性比较少，真实dom属性多，因为虚拟dom只在recat内部使用，用不到那么多的属性
    3.虚拟dom最终会被react转换成真实dom，呈现再页面上
    */
    </script>
</body>
</html>

七、jsx语法规则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsx语法规则</title>
    <style>
        .tt{
            background-color: aquamarine;
            width: 200px;
        }
    </style>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel"> /* 此处一定要写babel */

    const myId = 'Title'
    const myData = 'Hello,react'

    //1.创建虚拟DOM
    const VDOM = ( /* 此处一定不要写引号，因为不是字符串 */
        <div>
            <h2 className="tt" id={myId.toLowerCase()}> 
                <span style={{color:'white',fontSize:'30px'}}>{myData.toLowerCase()}</span> 
            </h2>
            <h2 className="tt" id={myId.toUpperCase()}>
                <span style={{color:'white',fontSize:'30px'}}>{myData.toLowerCase()}</span>
            </h2>
            <input type="text"/> 
        </div>
    ) 
    //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM,document.getElementById('test'))

    /* 
        jsx语法规则：
            1.定义虚拟DOM时，不要写引号
            2.标签中引入js表达式要用{}
            3.样式的类名指定不能写class，要写className;
            4.如果在jsx要写行内样式需要使用style={{key：value}}形式
            5.只有一个根标签
            6.标签必须闭合
            7.标签首字母
                (1)若小写字母开头，则会将该标签转为html同名标签，如果没找到，则会报错；
                (2)若大写字母开头，react就去渲染对应的组件，如果没找到，就会报组件未定义的错误；
    */
    </script>
</body>
</html>