React学习笔记—Day01

BlackStar-Coder

已于 2022-04-30 17:25:20 修改

阅读量1.2k

点赞数 1

文章标签： react.js javascript 前端

于 2022-04-30 17:24:48 首次发布

本文链接：https://blog.csdn.net/m0_51992766/article/details/124307718

版权

React简介

react是什么？

React是用于构建用户界面的JavaScript库，即可以理解为React是一个将数据渲染为HTML视图的开源JavaScript库。

tip：

1、发送请求获取数据

2、处理数据(过滤、整理格式等)

3、操作DOM呈现页面

React只操作DOM，前面两个不在React的操作范围，需要个人自己处理。

为什么要学React？

原生DOM操作的缺点：

1、原生JavaScript操作DOM繁琐、效率低

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

3、原生JavaScript没有组件化编码方案，代码复用率低

React的特点：

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

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

3、使用虚拟DOM + 优秀的Deffing算法，尽量减少与真实DOM的交互。

Hello React案例

js相关库

react.js：React核心库。
react-dom.js：提供操作DOM的react扩展库。
babel.min.js：解析JSX语法代码转为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>Hello React</title>
</head>
<body>
    <div id="test"></div>

    <!-- 1、引入react核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 2、引入react-dom库 -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 3、引入babel解析jsx -->
    <script src="../js/babel.min.js"></script>


    <script type="text/babel">  // 此处一定要写babel
        // 创建虚拟DOM
        var VDOM = <h1>Hello React !</h1>   // 不能写引号，这里是jsx
        // 渲染虚拟DOM到页面上
        ReactDOM.render(VDOM,document.querySelector('#test'));
    </script>
</body>
</html>

虚拟DOM

本质是Object类型的对象（一般对象）
虚拟DOM比较"轻"，真实DOM比较"重",因为虚拟DOM是React内部在用，无需真实DOM上面那么多的属性。
虚拟DOM最终会被React转化为真实DOM，呈现在页面上。

JSX

全称: JavaScript XML；react定义的一种类似于XML的JS扩展语法: JS + XML。本质是React.createElement(component, props, ...children)方法的语法糖

作用: 用来简化创建虚拟DOM

写法：var ele = <h1>Hello JSX!</h1>

注意1：它不是字符串, 也不是HTML/XML标签
注意2：它最终产生的就是一个JS对象

标签名任意: HTML标签或其它标签

标签属性任意: HTML标签属性或其它属性

基本语法规则

遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析；
遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含

JSX详细语法规则

1、定义虚拟DOM时，不要写引号。

2、标签中混入JS表达式时要用{}

3、样式的类名指定不要用class，要用className

4、内联样式，要用style={{key:value}}的形式去写

5、只有一个根标签，标签必须闭合

6、标签首字母规范

(1) 若小写字母开头，则将给标签转为html中同名元素，若html中无给定的标签对应的同名元素，则报错

(2) 如大写字母开头，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>jsx规则</title>
    <style>
        .title{
            width: 300px;
            height: 90px;
            background-color: aqua;
            font-size: 20px;
            font-family: 'Courier New', Courier, monospace;
            color: beige;
        }
    </style>
</head>
<body>
    <div id="test"></div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js//babel.min.js"></script>

    <script type="text/babel">
        const myId = '1908010423'
        const myData = 'Hello,react'
        /**
         * 1、定义虚拟DOM时，不要写引号。
            2、标签中混入JS表达式时要用{}
            3、样式的类名指定不要用class，要用className
            4、内联样式，要用style={{key:value}}的形式去写
            5、只有一个根标签，标签必须闭合
            6、标签首字母规范 
         * */
        // 创建虚拟DOM
        const VDOM = (
            <div>
                <h2 className='title' style={{color:'black'}}>
                    <span>{myId}</span>    
                </h2>
                <h2>
                    <span>{myData.toLowerCase()}</span>
                </h2>
                <input type="text" />
            </div>
        )
        // 渲染数据
        ReactDOM.render(VDOM,document.querySelector('#test'));
    </script>
</body>
</html>

babel.js的作用

浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行。只要用了JSX，在script标签上都要加上type="text/babel", 声明需要babel来处理

XML以前是用于存储和传输数据的

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>JSX 实战</title>
</head>
<body>
    <div id="test"></div>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js//babel.min.js"></script>

    <script type="text/babel">
        var data = ['Angular','React','Vue']
        // 创建虚拟DOM
        var VDOM = (
            <div>
                <h1>前端框架集合</h1>
                <ul>
                    {
                        data.map((item,index)=>{
                            return <li key={index}>{item}</li>
                        })
                    }
                </ul>
            </div>
        )
        // 将虚拟DOM渲染到页面上
        ReactDOM.render(VDOM,document.querySelector('#test'))
    </script>
</body>
</html>

Tip:

1、{}中只能写JS表达式(JS表达式可理解为“有值返回，可用变量接收”

模块与组件、模块化与组件化的理解

模块

理解：向外提供特定功能的js程序, 一般就是一个js文件

为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。

作用：复用js, 简化js的编写, 提高js运行效率

组件

理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)

为什么要用组件： 一个界面的功能更复杂

作用：复用编码, 简化项目编码, 提高运行效率

模块化

当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

组件化

当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

BlackStar-Coder

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
React学习笔记—Day01

React简介react是什么？ React是用于构建用户界面的JavaScript库，即可以理解为React是一个将数据渲染为HTML视图的开源JavaScript库。tip：1、发送请求获取数据2、处理数据(过滤、整理格式等) 3、操作DOM呈现页面React只操作DOM，前面两个不在React的操作范围，需要个人自己处理。为什么要学React？原生DOM操作的缺点：...
复制链接

扫一扫