后端程序员React初接触1

2023-12-30 12:50:32

后端程序员React初接触

学习react基础与相关库的使用学习 包括react基础 路由 组件库等等

react是用于构建用户界面的JavaScript库

  • 发送请求获取数据
  • 处理数据
  • 操作dom呈现页面（react帮忙操作dom）

数据渲染为视图 有facebook打造并开源

解决的问题

  • dom操作繁琐
  • 使用js直接操作dom浏览器会大量操作dom进行重排
  • 没有组件化编码方案代码复用率低
  • 可以进行移动端的开发

特点：使用虚拟dom+优秀的diffing算法

使用非脚手架的形式

  • babel.js作用js转jsx
  • react.development.js 核心库
  • 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="app">
        
    </div>
    <!-- 引入核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 映入拓展库 -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 映入babel用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>


    <!-- 表示写的是jsx此处写的是babel -->
    <script type="text/babel">
        
    </script>
</body>
</html>

案例实现

<!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="app">
        
    </div>
    <!-- 引入核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 映入拓展库 -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 映入babel用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>


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

在这里插入图片描述

使用js创建虚拟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>使用js方式创建虚拟dom</title>
</head>
<body>
    <!--准备好一个容器-->
    <div id="app">
        
    </div>
    <!-- 引入核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 映入拓展库 -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>

    <!-- 表示写的是jsx此处写的是babel -->
    <script type="text/javascript">
        //创建虚拟dom
        const VDOM =React.createElement('h1',{id:'title'},'Hello,React1')
        // 渲染dom到页面
        ReactDOM.render(VDOM,document.getElementById('app'))
    </script>
</body>
</html>

产生的问题是：原始的js方式创建有嵌套形式的虚拟dom繁琐因此需要使用jsx 使用jsx的方式更接近与之前的方式const VDOM =React.createElement(‘h1’,{id:‘title’},‘Hello,React1’).React.createElement()方式的语法糖

虚拟DOM与真实DOM

本质是object类型对象
虚拟dom比较轻与打断点后的真实dom比有更少的属性
在这里插入图片描述
在这里插入图片描述

虚拟dom是react内部在用，无需dom上那么多的元素

jsx简介

全称：JavaScript XML

存储数据由xml转变为json进行存储

语法规则
  • 定义虚拟dom时不要写引号
  • 标签里面写js表达式时要用{}的形式
  • 样式类名的指定不要用class要用className
  • 内联样式的定义使用{{color:‘red’，fontsize:‘29px’}}
  • jsx的要求不能有多个根标签
  • 标签必须闭合
  • 小写字母开头转为html中的同名元素，若无对应的同名元素则报错
  • 若大写字母开头会找对应的组件，若没有则报错

文章来源:https://blog.csdn.net/weixin_46167190/article/details/135302539
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。