• 【React】第一部分 React 基本使用

    【React】第一部分 React 基本使用

    文章目录

    1. React 基本使用

    1.1 官方文档

    中文文档

    英文文档


    1.2 JSX

    1.2.1 先说一下什么是虚拟DOM?

    1. 它本质上是一个Object类型的对象
    2. 虚拟DOM较比真实DOM相比更轻,因为虚拟DOM是React内部在用,不需要真实DOM上那么多的属性
    3. 虚拟DOM最终最后都会被转化为真实DOM,呈现在页面上

    1.2.2 什么是JSX?

    react定义的一种类似于XML的JS扩展语法: JS + XML本质是

    React.createElement(component,props,...children)方法的语法糖

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

    // 创建一个新的虚拟DOM
const element = <h1>大家好!我是React!</h1>
// 渲染虚拟DOM到页面上
ReactDOM.render(element,document.getElementById('root'))

    • 1
    • 2
    • 3
    • 4

    ​ 需要注意:
    ​ 1. 在定义虚拟DOM,书写的时候不要加''
    ​ 2. 它不是字符串也不是HTML/XML标签
    ​ 3. 它最终生成的就是一个js对象


    1.2.3 jsx语法规则

    1. 在定义虚拟DOM时,不要写引号

    2. 标签中混入JS表达式的时候要用{}

    3. 样式的类名指定的时候不要使用class,要用className

    4. 内联样式,要用style={{key:value}}的形式去写,第一个{}表示里面内容为js表达式,第二个{}表示的是对象

    5. 只能有一个根标签

    6. 标签必须要闭合

    7. 标签首字母

      (1) 如果以小写字母开头,则会将标签转化为html同名元素,如果没有找到那么就报错

      (2) 如果以大写字母开头,react就会去渲染对应的组件,如果没有定义组件,那么也会报错(后面会说怎么定义组件)

    1.2.4 jsx小练习

    通过练习来熟悉jsx语法规则

    babel.min.js

    prop-types.js

    react.development.js

    react-dom.development.js
    在这里插入图片描述

    <!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <!-- 准备好一个容器 -->
        <div id="box"></div>

        <!-- 下面需要按顺序进行引入 -->
        <!-- 引入React核心库 -->
        <script src="./react.development.js" type="text/javascript"></script>
        <!-- 引入react-dom, 用来支持react去操作dom -->
        <script src="./react-dom.development.js" type="text/javascript"></script>
        <!-- 引入babel, 用来将jsx转化为js -->
        <script src="./babel.min.js" type="text/javascript"></script>
        <!-- 这里需要注意将type写成 text/babel-->
        <script type="text/babel" >
            // 创建一个数据，用来模拟后端传入的数据
            let data = ['html','css','js','promise','axios','webpack','等等']

            // 创建虚拟dom
            const element = (
                // 只能有一个根节点
               <div>
                    <h1 className="title">前端需要学什么?</h1>
                    <ul>
                        {
                            /*
                                在这里我们需要去遍历data中的数据，并且给li
                                根据jsx的语法规则，{}里只能写js表达式
                            */
                            data.map((item,index)=>{
                                // 这里要记得写{},否则返回的都是item,而不是里面所对应的值
                                // 需要写key,key必须是唯一的值
                                return <li key={index}>{item}</li>
                            })
                        }
                    </ul>
               </div>
            )

            // 将虚拟DOM渲染到页面上
            ReactDOM.render(element,document.getElementById('box'))
            
        </script>
    </body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50

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

    1.3.1 模块

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

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

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

    1.3.2 组件

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

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

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

    1.3.3 模块化和组件化

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

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

    总结

    以上就是今天要讲的内容，希望对大家有所帮助！！！

  • 相关阅读:
    JS逆向爬虫案例分享（RSA非对称加密）
    灰度负载均衡和普通负载均衡有什么区别
    二十三种设计模式
    Docker运行docker中指定一个jar
    linux查看服务器开放的端口和启用的端口五种方式
    简化的 Java 六边形架构
    微信小程序云开发如何实现微信支付，业务逻辑又怎样才算可靠
    Flask基础学习3
    【Mysql】表的约束
    unity 渲染性能分析工具
  • 原文地址：https://blog.csdn.net/Trees__/article/details/126157259