邂逅React及React初体验

news2024/10/6 0:28:07

文章目录

    • 一、React是什么
    • 二、React数据对比
    • 三、React特点
      • 3.1 技术特点
      • 3.2 声明式编程
      • 3.3 组件化开发
      • 3.4 多平台适配
    • 四、React开发依赖
      • 4.1 React的开发依赖
      • 4.2 Babel和React的关系
      • 4.3 React的依赖引入
    • 五、React初体验
      • 5.1 Hello World
      • 5.2 增加按钮，点击修改文本
      • 5.3 组件化开发
      • 5.5 组件化开发之数据依赖
      • 5.5 组件化开发之事件绑定
      • 5.6 版本16与18的小区别
      • 5.7 案例：电影列表
      • 5.8 案例：计数器

一、React是什么

  • 相信每个做开发的人对它都或多或少有一些印象
  • 我们来看一下官方对它的解释用于构建用户界面的 JavaScript 库
  • 中文官网文档
    在这里插入图片描述
    在这里插入图片描述

目前对于前端开发来说，几乎很少直接使用原生的JavaScript来开发应用程序，而是选择一个JavaScript库(框架)。

  • 在过去的很长时间内，jQuery是被使用最多的JavaScript库
  • 在过去的一份调查中显示，全球前10,000个访问最高的网站中，有65%使用了jQuery，是当时最受欢迎的JavaScript库，但是，目前甚至已经处于淘汰的边缘了

二、React数据对比

而无论是国内外，最流行的其实是三大框架:Vue、React、Angular，如下：
在这里插入图片描述
框架Google指数对比：
在这里插入图片描述
NPM下载量对比：
在这里插入图片描述
Github数据对比：
在这里插入图片描述

三、React特点

3.1 技术特点

React由Facebook来更新和维护，它是大量优秀程序员的思想结晶:

  • React的流行不仅仅局限于普通开发工程师对它的认可;
  • 大量流行的其他框架借鉴React的思想;

Vue.js框架设计之初，有很多的灵感来自Angular和React。

  • 包括Vue3很多新的特性，也是借鉴和学习了React
  • 比如React Hooks是开创性的新功能
  • Vue Composition API学习了React Hooks的思想

Flutter的很多灵感都来自React:

  • 事实上Flutter中的Widget – Element – RenderObject
  • 对应React的就是JSX – 虚拟DOM – 真实DOM

所以React可以说是前端的先驱者，它总是会引领整个前端的潮流。

3.2 声明式编程

  • 声明式编程是目前整个大前端开发的模式:Vue、React、Flutter
  • 允许我们只需要维护自己的状态，当状态改变时，React可以根据最新的状态去渲染我们的UI界面;
    在这里插入图片描述

3.3 组件化开发

  • 组件化开发页面目前前端的流行趋势，我们会将复杂的界面拆分成一个个小的组件;
  • 如何合理的进行组件的划分和设计也是一个重点;
    在这里插入图片描述

3.4 多平台适配

  • 2013年，React发布之初主要是开发Web页面;
  • 2015年，Facebook推出了ReactNative，用于开发移动端跨平台
  • 2017年，Facebook推出ReactVR，用于开发虚拟现实Web应用程序

在这里插入图片描述

四、React开发依赖

4.1 React的开发依赖

开发React必须依赖三个库:

  • react:包含react所必须的核心代码
    - react-dom:react渲染在不同平台所需要的核心代码
  • babel:将jsx转换成React代码的工具

第一次接触React会被它繁琐的依赖搞蒙，居然依赖这么多东西:

  • 对于Vue来说，我们只是依赖一个vue.js文件即可，但是react居然要依赖三个包
  • 其实呢，这三个库是各司其职的，目的就是让每一个库只单纯做自己的事情;
  • 在React的0.14版本之前是没有react-dom这个概念的，所有功能都包含在react里;

为什么要进行拆分呢?原因就是react-native。

  • react包中包含了react web和react-native所共同拥有的核心代码。
  • react-dom针对web和native所完成的事情不同:
    ✓ web端:react-dom会将jsx最终渲染成真实的DOM，显示在浏览器中
    ✓ native端:react-dom会将jsx最终渲染成原生的控件(比如Android中的Button，iOS中的UIButton)

4.2 Babel和React的关系

Babel是什么呢?

  • Babel又名 Babel.js
  • 是目前前端使用非常广泛的编译器、转移器
  • 比如当下很多浏览器并不支持ES6的语法，但是确实ES6的语法非常的简洁和方便，我们开发时希望使用它
  • 那么编写源码时我们就可以使用ES6来编写，之后通过Babel工具，将ES6转成大多数浏览器都支持的ES5的语法

React和Babel的关系:

  • 默认情况下开发React其实可以不使用babel
  • 但是前提是我们自己使用 React.createElement 来编写源代码，它编写的代码非常的繁琐和可读性差
  • 那么我们就可以直接编写jsx(JavaScript XML)的语法，并且让babel帮助我们转换成React.createElement

4.3 React的依赖引入

所以，我们在编写React代码时，这三个依赖都是必不可少的。

那么，如何添加这三个依赖:

  • 方式一:直接CDN引入
  • 方式二:下载后，添加本地依赖
  • 方式三:通过npm管理(后续脚手架再使用)

◼ 暂时我们直接通过CDN引入，来完成示例程序
ps: 这里有一个crossorigin的属性，这个属性的目的是为了拿到跨域脚本的错误信息

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

五、React初体验

5.1 Hello World

在界面上通过React显示一个Hello World，代码如下：

<body>
  <div id="root"></div>
  <!-- 加载 React。-->
  <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script type="text/babel">
    // ReactDOM.render(<h2>Hello World</h2>, document.querySelector('.root'))
    const root = ReactDOM.createRoot(document.querySelector('#root'))
    root.render(<h2>Hello React18</h2>)
  </script>
</body>
  • ReactDOM.createRoot函数:用于创建一个React根，之后渲染的内容会包含在这个根中
    • 参数:将渲染的内容，挂载到哪一个HTML元素上，这里我们已经提定义一个id为app的div
  • root.render函数:
    • 参数:要渲染的根组件
  • 可以通过{}语法来引入外部的变量或者表达式
  • 这里我们编写React的script代码中，必须添加 type="text/babel"，作用是可以让babel解析jsx的语法。

5.2 增加按钮，点击修改文本

新增按钮，点击后修改message的值，代码如下：

<div id="root"></div>
<script type="text/babel">
  let message = 'hello world'
  const root = ReactDOM.createRoot(document.querySelector("#root"))
  function changeMessage(){
    message = 'hello react'
    root.render(
      <div>
        <h2>{message}</h2>
        <button onClick={changeMessage}>点我</button>
      </div>
    )
  }
  root.render(
    <div>
      <h2>{message}</h2>
      <button onClick={changeMessage}>点我</button>
    </div>
    )
</script>

5.3 组件化开发

整个逻辑其实可以看做一个整体，那么我们就可以将其封装成一个组件:

  • 我们说过root.render参数是一个HTML元素或者一个组件
  • 所以我们可以先将之前的业务逻辑封装到一个组件中，然后传入到 ReactDOM.render 函数中的第一个参数

在React中，如何封装一个组件呢?这里我们暂时使用类的方式封装组件:

  • 定义一个类(类名大写，组件的名称是必须大写的，小写会被认为是HTML元素)，继承自React.Component
  • 实现当前组件的render函数，render当中返回的jsx内容，就是之后React会帮助我们渲染的内容
    在这里插入图片描述

5.5 组件化开发之数据依赖

在组件中的数据，我们可以分成两类:

  • 参与界面更新的数据:当数据变量时，需要更新组件渲染的内容
  • 不参与界面更新的数据:当数据变量时，不需要更新将组建渲染的内容;

参与界面更新的数据我们也可以称之为是参与数据流，这个数据是定义在当前对象的state中

  • 我们可以通过在构造函数中 this.state = {定义的数据}
  • 当我们的数据发生变化时，我们可以调用this.setState来更新数据，并且通知Reac进行update操作
  • 在进行update操作时，就会重新调用render函数，并且使用最新的数据，来渲染界面
    在这里插入图片描述

5.5 组件化开发之事件绑定

事件绑定中的this===>在类中直接定义一个函数，并且将这个函数绑定到元素的onClick事件上，当前这个函数的this指向的是谁呢?

默认情况下是undefined

  • 很奇怪，居然是undefined
  • 因为在正常的DOM操作中，监听点击，监听函数中的this其实是节点对象(比如说是button对象)
  • 这次因为React并不是直接渲染成真实的DOM，我们所编写的button只是一个语法糖，它的本质React的Element对象;
  • 那么在这里发生监听的时候，react在执行函数时并没有绑定this，默认情况下就是一个undefined
  • 我们在绑定的函数中，可能想要使用当前对象，比如执行 this.setState函数，就必须拿到当前对象的this
  • 我们就需要在传入函数时，给这个函数直接绑定this

类似于下面的写法:
在这里插入图片描述
当然也可以在组件的构造函数中对方法进行绑定，如下：
在这里插入图片描述

5.6 版本16与18的小区别

<script type="text/babel">
  // 编写React代码(jsx语法)
  // jsx语法 -> 普通的JavaScript代码 -> babel

  // 渲染Hello World
  // React18之前: ReactDOM.render
  ReactDOM.render(<h2>Hello World</h2>, document.querySelector("#root"))

  // React18之后:
  const root = ReactDOM.createRoot(document.querySelector("#root"))
  root.render(<h2>Hello World</h2>)

</script>

5.7 案例：电影列表

<body>
  <!-- 加载 React。-->
  <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <div id="root"></div>

  <script type="text/babel">

    class AppMain extends React.Component {
      constructor() {
        super()
        this.state = {
          movies: ['大话西游', '功夫', '西游降魔', '赌圣']
        }
      }

      render() {
        return (
          <div>
            <h2>电影列表</h2>
            <ul>
              {this.state.movies.map(item => {
                return <li>{item}</li>
              })}
            </ul>
          </div>
        )
      }
    }

    const root = ReactDOM.createRoot(document.querySelector("#root"))

    root.render(
      <AppMain />
    )

  </script>
</body>

5.8 案例：计数器

<body>
  <!-- 加载 React。-->
  <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <div id="root"></div>

  <script type="text/babel">

    class AppMain extends React.Component {
      constructor() {
        super()
        this.state = {
          count: 100
        }
        this.add = this.add.bind(this)
        this.sub = this.sub.bind(this)
      }

      add() {
        this.setState({
          count: this.state.count + 1
        })
      }

      sub() {
        this.setState({
          count: this.state.count - 1
        })
      }

      render() {
        let { count } = this.state
        return (
          <div>
            <h2>当前数值：{count}</h2>
            <button onClick={this.add}>点我+1</button>
            <button onClick={this.sub}>点我-1</button>
          </div>
        )
      }
    }

    const root = ReactDOM.createRoot(document.querySelector("#root"))

    root.render(
      <AppMain />
    )

  </script>
</body>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1139311.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

多元数据库时代，如何选择数据库基础设施？

多元数据库时代，如何选择数据库基础设施？

一 多元数据库时代趋势特点 在数据库技术发展、数字化转型应用和信创三大驱动力共同作用下&#xff0c;数据库从单一架构支持多类应用演变为多类架构支持多类应用。这些架构并非替代关系&#xff0c;而是相互共存、共同发展的关系&#xff0c;数据库的多样性成为必然&#xff0…
阅读更多...
解决github有时能访问有时不能访问的问题2

解决github有时能访问有时不能访问的问题2

下载地址 https://steampp.net/
阅读更多...
Oculus开发入门

Oculus开发入门

老是访问官网搭建unity环境太麻烦了&#xff0c;自己记录一下&#xff0c;在国内看。 官网教程连接 Getting Started with Interaction SDK | Oculus Developers Adjust Camera Rig Once you’ve completed the tutorial listed above, you can find Interaction SDK in Unit…
阅读更多...
媒介易发稿教程，在人民网投稿的指南与技巧

媒介易发稿教程，在人民网投稿的指南与技巧

在当今信息快速传播的时代&#xff0c;网络媒体成为了人们获取信息、表达观点的重要平台。而在这个庞大信息海洋中&#xff0c;人民网作为中国最具影响力的新闻网站之一&#xff0c;扮演着引领舆论、传播价值观念的重要角色。无论是个人经历、社会观察&#xff0c;还是学术研究…
阅读更多...
日本汽车弯道超车，意图反超中国汽车和特斯拉，中国汽车另辟蹊径

日本汽车弯道超车，意图反超中国汽车和特斯拉，中国汽车另辟蹊径

日本汽车领军者丰田再次宣称固态电池是商用正在加速&#xff0c;已在电池材料技术上取得突破&#xff0c;充电10分钟可行驶1200公里&#xff0c;将在2027年装载于雷克萨斯上&#xff0c;再次引领汽车行业变革&#xff0c;为它在新能源汽车行业的落后鼓气。 丰田与大众可谓汽车行…
阅读更多...
使用 IBM HeapAnalyzer 分析堆转储快照文件的

使用 IBM HeapAnalyzer 分析堆转储快照文件的

1.打开IBM HeapAnalyzer工具所在文件夹&#xff0c;执行cmd进入命令窗口 java -jar -Xmx1G .\ha456.jarha456.jar 为IBM HeapAnalyzer工具文件名 2、打开需要分析的日志文件
阅读更多...
测试人员的设计思维

测试人员的设计思维

我们在工作、生活中经常听到别人说设计思维。那么&#xff0c;设计思维是什么&#xff1f;对测试人员来说有什么帮助&#xff1f; 在聊设计思维前&#xff0c;让我们先了解一下思维。思维是人类的重要组成部分&#xff0c;它帮助我们理解复杂的情况&#xff0c;形成深思熟虑的…
阅读更多...
Class文件简单解析

Class文件简单解析

一、Class文件 Test.java public class Test{ private int count; public int inc(){ return count;} } vim -b Test.class 输入 :%!xxd 图一 java反编译 javap -v -l -c Test.class 图二 二、Class文件解析 1、Class文件结构 1、魔数 魔数magic是Class文件的标记&…
阅读更多...
（免费领源码）java#Springboot#mysql英语自主学习平台的设计与实现35901-计算机毕业设计项目选题推荐

（免费领源码）java#Springboot#mysql英语自主学习平台的设计与实现35901-计算机毕业设计项目选题推荐

摘 要 随着互联网趋势的到来&#xff0c;各行各业都在考虑利用互联网将自己推广出去&#xff0c;最好方式就是建立自己的互联网系统&#xff0c;并对其进行维护和管理。在现实运用中&#xff0c;应用软件的工作规则和开发步骤&#xff0c;采用Java技术建设英语自主学习平台。 …
阅读更多...
【Proteus仿真】【STM32单片机】水箱液位监控系统

【Proteus仿真】【STM32单片机】水箱液位监控系统

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真STM32单片机控制器&#xff0c;使用LCD1602液晶、按键、蜂鸣器、液位传感器、PCF8591 ADC转换器、水泵等。 主要功能&#xff1a; 系统运行后&#xff0c;LCD1602显示当前水位、上…
阅读更多...
安全和便捷：如何将运营商二要素API应用于实名制管理中

安全和便捷：如何将运营商二要素API应用于实名制管理中

引言 随着互联网的快速发展&#xff0c;数字化身份验证和实名制管理变得越来越重要。在金融、电子商务、社交媒体等领域&#xff0c;确保用户身份的安全和准确性至关重要。运营商二要素核验API成为了实名制管理的有力工具&#xff0c;它不仅能够提供高水平的安全性&#xff0c…
阅读更多...
M-LVDS收发器MS2111，可替代SN65MLVD206

M-LVDS收发器MS2111，可替代SN65MLVD206

MS2111 是多点低压差分 (M-LVDS) 线路驱动器和接收器。经过 优化&#xff0c;可运行在高达 200Mbps 的信号速率下。所有部件均符合 M LVDS 标准 TIA / EIA-899 。该驱动器的输出支持负载低至 30Ω 的多 点总线。 MS2111 的接收器属于 Type-2 &#xff0c; 可在 -1…
阅读更多...
特殊类设计[上]

特殊类设计[上]

文章目录 1.只能在堆上创建对象的类1.1析构函数私有化1.2析构函数 delete1.3构造函数私有定义拷贝构造私有只声明1.4构造函数私有定义拷贝构造 delete 2.不能被拷贝的类2.1 私有声明不定义拷贝构造函数2. 2拷贝构造函数 delete 3.只能在栈和静态区创建对象的类4.不能被继承的…
阅读更多...
Galaxy生信云|新增生存曲线绘制、肿瘤基因通路注释工具

Galaxy生信云|新增生存曲线绘制、肿瘤基因通路注释工具

2023-10-26&#xff0c;Galaxy生信云平台 UseGalaxy.cn 新增 2 个工具。 Cancer Research 生存曲线 Kaplan-Meier curve ploter肿瘤通路注释 Gene to oncogenic pathway mapper 部分结果展示 生存曲线 Kaplan-Meier curve ploter 生存曲线-不分层&#xff1a; 生存曲线-分层&am…
阅读更多...
封装, 继承, 多态详解

封装, 继承, 多态详解

面向对象编程有三大特征&#xff1a;封装、继承和多态 一.封装 思维导图概览&#xff1a; 1. 封装的概念 —— 把抽象出的数据&#xff08;属性&#xff09;和对数据的操作&#xff08;方法&#xff09;封装到一起&#xff0c;数据被保护在内部&#xff0c;程序的其它部分只有…
阅读更多...
linux系统 too many open files解决方法

linux系统 too many open files解决方法

1.遇到的问题 too many open files是Linux系统中常见的错误&#xff0c;从字面意思上看就是说程序打开的文件数过多&#xff0c;不过这里的files不单是文件的意思&#xff0c;也包括打开的通讯链接(比如socket)&#xff0c;正在监听的端口等等&#xff0c;所以有时候也可以叫做…
阅读更多...
Python 中的邻接矩阵

Python 中的邻接矩阵

Python 中使用图数据结构来表示各种现实生活中的对象，例如网络和地图。 我们可以使用邻接矩阵来表示图。 本文将讨论在 Python 中实现邻接矩阵的不同方法。 创建邻接矩阵 考虑下图。 图中，有 6 个节点，编号为 1 到 6。图中连接节点的边有 7 条； 边 eij 连接节点 i 和节点…
阅读更多...
2023年中国儿童滑板车优点、市场规模及发展前景分析[图]

2023年中国儿童滑板车优点、市场规模及发展前景分析[图]

儿童滑板车行业是指专门生产、销售和服务于儿童滑板车的行业。儿童滑板车是一种两轮滑行车&#xff0c;通常由车架、轮子、刹车和把手等部件组成。儿童滑板车是一种受欢迎的户外运动和娱乐工具&#xff0c;可以帮助儿童锻炼身体、提高平衡和协调能力&#xff0c;同时也是一种时…
阅读更多...
无人机真机搭建问题记录文档（待续）

无人机真机搭建问题记录文档（待续）

搭建问题 问题1 高飞课程中的飞控停产&#xff0c;更换飞控&#xff08;pixhawx 6c&#xff09;出现如下问题 1、飞控太大造成安装机载电脑的碳板上的孔被挡住。 2、课程提供的飞控固件&#xff0c;与更换的飞控不匹配 解决办法 1、现在的无人机碳板上只安装三个螺纹孔&…
阅读更多...
如何平衡需求变更与项目进度冲突问题？

如何平衡需求变更与项目进度冲突问题？

需求变更往往会对项目进度产生影响&#xff0c;可能会导致项目进度的重新评估、调整和重新开发已有功能&#xff0c;从而延长交付时间。如果忽视拒绝需求变更&#xff0c;会导致客户的不满和冲突。 因此如何更好地平衡两者间的冲突问题&#xff0c;迫在眉睫。一般来说&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023