React（coderwhy）- 01(介绍及基础)

news2024/11/15 11:43:59

React的介绍（技术角度）

React是什么？
  1. React：用于构建用户界面的 JavaScript 库
  2. React的官网文档：https://zh-hans.reactjs.org/

React的特点：

  1. 声明式编程
  2. 组件化开发
  3. 多平台适配

Hello React

react需要3个依赖，（ 可以使用官方CDN ）

  1. react ： 包含react所必须的核心代码
  2. react_dom ： react渲染在不同平台所需要的核心代码
  3. babel ：将jsx转换成React代码的工具
  <div id="app"></div>
  
  <script src="./lib/react.js"></script>
  <script src="./lib/react_dom.js"></script>
  <script src="./lib/babel.js"></script>
  <script type="text/babel">
    // 1.定义变量
    const message = "Hello World"

    // 2.渲染内容
    const root = ReactDOM.createRoot(document.querySelector("#app"))
    root.render(<h2>{message}</h2>)
  </script>

点击按钮修改内容：

   需要只用render方法来修改

<script type="text/babel">
    // 1.定义变量
    let message = "Hello World"
    const btnClick = () => {
      message = "Hello React"
      render()
    }

    // 2.渲染内容
    const root = ReactDOM.createRoot(document.querySelector("#app"))
    render()

    function render() {
      root.render((
        <div>
          <h2>{message}</h2>
          <button onClick={btnClick}>修改文本</button>
        </div>
      ))
    }
  </script>

Hello React – 组件化开发

整个逻辑其实可以看做一个整体，那么我们就可以将其封装成一个组件：
        1. 我们说过 root.render 参数 是一个 HTML元素或者一个组件 ；
        2. 所以我们可以先将之前的业务逻辑封装到 一个组件 中，然后传入到 ReactDOM.render 函数中的第一个参数；
在React中，如何封装一个组件呢？ 这里我们暂时使用 类的方式 封装组件：
        1.  定义一个类 （类名大写，组件的名称是必须大写的，小写会被认为是HTML元素），继承自React.Component
        2.  实现当前组件的render函数
         render当中返回的jsx内容，就是之后React会帮助我们渲染的内容 
  <script type="text/babel">
    function foo() {
      console.log("foo", this)
    }

    // 1.定义根组件
    class App extends React.Component {
      constructor() {
        super()
        this.state = {
          message: "Hello World"
        }
      }

      changeText() {
        this.setState({ message: "Hello React" })
      }

      render() {
        return (
          <div>
            <h2>{this.state.message}</h2>
            <button onClick={this.changeText.bind(this)}>修改文本</button>
          </div>
        )
      }
    }

    // 2.渲染根组件
    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<App/>)
  </script>

组件化 - 数据依赖

组件化问题一： 数据在哪里定义 ？
在组件中的数据，我们可以分成两类：
        1. 参与界面更新的数据 ：当数据变量时，需要更新组件渲染的内容；
        2. 不参与界面更新的数据 ：当数据变量时，不需要更新将组建渲染的内容；
参与界面更新的数据我们也可以称之为是 参与数据流 ，这个数据是 定义在当前对象的state 中
        1. 我们可以通过在 构造函数中 this.state = {定义的数据}
        2. 当 我们的数据发生变化 时，我们可以 调用 this.setState 来更新数据 ，并且通知React进行update操作；
        在进行update操作时，就会 重新调用render函数 ，并且使用最新的数据，来渲染界面

组件化 – 事件绑定

组件化问题二：事件绑定中的this
        在类中直接定义一个函数，并且将这个函数绑定到 元素的onClick事件 上，当前 这个函数的this指向的是谁 呢？
默认情况下是undefined
        1.  很奇怪，居然是 undefined ；
        2. 因为在正常的DOM操作中，监听点击，监听函数中的this其实是节点对象（比如说是button对象）；
        3.  这次因为React并不是直接渲染成真实的DOM，我们所编写的button只是一个语法糖，它的本质React的Element对象；
        4. 那么在这里发生监听的时候，react在执行函数时并没有绑定this，默认情况下就是一个undefined；
        
我们在绑定的函数中，可能想要使用当前对象，比如执行 this.setState 函数，就必须拿到当前对象的this
        1. 我们就需要在传入函数时，给这个函数直接绑定this
        2.  类似于下面的写法： <button onClick={this.changeText.bind(this)}>改变文本</button>

电影列表展示

<script type="text/babel">
    // 1.定义根组件
    class App extends React.Component {
      constructor() {
        super()
        this.state = {
          message: "Hello App",
          movies: ["星际穿越", "大话西游", "盗梦空间", "少年派的奇幻漂流"]
        }
      }

      render() {
        return (
          <ul>
            {
              this.state.movies.map(item => {
                return <li key={item}>{item}</li>
              })
            }
          </ul>
        )
      }
    }

    // 2.渲染根组件
    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<App/>)
  </script>

计数器案例

  <script>
    function foo() {
      console.log("foo:", this);
    }

    foo()

    // 1.定义根组件
    class App extends React.Component {
      constructor() {
        super()
        this.state = {
          counter: 0
        }
      }

      render() {
        const { counter } = this.state
        return (
          <div>
            <h2>当前计数: {counter}</h2>
            <button onClick={this.increment.bind(this)}>+1</button>
            <button onClick={this.decrement.bind(this)}>-1</button>
          </div>
        )
      }

      increment() {
        this.setState({
          counter: this.state.counter + 1
        })
      }
      decrement() {
        this.setState({
          counter: this.state.counter - 1
        })
      }
    }

    // 2.渲染根组件
    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<App/>)
  </script>

VSCode代码片段

我们在前面练习React的过程中，有些代码片段是需要经常写的，我们在VSCode中我们可以生成一个代码片段，方便我们快速
生成。
◼ VSCode中的代码片段有固定的格式，所以我们一般会借助于一个在线工具来完成。
◼ 具体的步骤如下：
        第一步，复制自己需要生成代码片段的代码；
        第二步， https://snippet-generator.app/ 在该网站中生成代码片段；
        第三步，在VSCode中配置代码片段；

React基础

JSX语法

◼ 这段element变量的声明右侧赋值的标签语法是什么呢？
        1.它不是一段字符串（因为没有使用引号包裹）；
        2.它看起来是一段HTML元素，但是我们能在js中直接给一个变量赋值html吗？
        3.其实是不可以的，如果我们将 type="text/babel" 去除掉，那么就会出现语法错误；
        4.它到底是什么呢？其实它是一段 jsx的语法 ；
◼ JSX是什么？
        1.JSX是 一种JavaScript的语法扩展（eXtension），也在很多地方称之为JavaScript XML，因为看起就是一段XML语法 ；
        2.它用于 描述我们的UI界面 ，并且其 完成可以和JavaScript融合在一起使用 ；
        3.它 不同于Vue中的模块语法 ，你 不需要专门学习模块语法中的一些指令 （比如v-for、v-if、v-else、v-bind）； 
  <script type="text/babel">
    // 1.定义根组件
    const element = <div>Hello World</div>

    // 2.渲染根组件
    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(element)
  </script>
为什么React选择了JSX  ？
React认为 渲染逻辑 本质上 与其他UI逻辑 存在内在耦合
        1.比如 UI需要绑定事件 （button、a原生等等）；
        2.比如 UI中需要展示数据状态；
        3.比如 在某些状态发生改变时，又需要改变UI ；
他们之间是 密不可分 ，所以React 没有将标记分离到不同的文件 中，而是 将它们组合到了一起 ，这个地方就是 组件（Component） ；
         当然，后面我们还是会继续学习更多组件相关的东西；
在这里，我们只需要知道，JSX其实是嵌入到JavaScript中的一种结构语法；
JSX的书写规范：
        1.JSX的顶层 只能有一个根元素 ，所以 我们很多时候会在外层包裹一个div元素 （或者使用后面我们学习的Fragment）；
        2.为了方便阅读，我们通常在jsx的外层包裹一个小括号()，这样可以方便阅读，并且jsx可以进行换行书写；
        3.JSX中的标签可以是 单标签 ，也可以是 双标签 ；
        注意：如果是单标签，必须以/>结尾；

JSX的基本使用

jsx中的注释 
{/*  要注释的内容  */}
◼ JSX嵌入变量作为子元素
 情况一 ：当变量是 Number、String、Array类型 时，可以直接显示
情况二 ：当变量是 null、undefined、Boolean类型 时，内容为空；
✓ 如果希望可以显示null、undefined、Boolean，那么需要转成字符串；
✓ 转换的方式有很多，比如toString方法、和空字符串拼接，String(变量)等方式；
情况三 ： Object对象类型 不能作为子元素（not valid as a React child）
◼ JSX嵌入表达式
运算表达式
三元运算符
执行一个函数
◼ jsx绑定属性
比如元素都会有 title属性   ：  使用{xxx变量}的方式绑定 ==>   <h2 title={title}><h2/>
比如img元素会有 src属性 
比如a元素会有 href属性 
比如元素可能需要 绑定class  :  三元表达式、数组、 第三方库
比如原生使用 内联样式style : {{ key  :  value }} ，不能写- ，要写驼峰

JSX的事件绑定

◼ 如果原生DOM原生有一个监听事件，我们可以如何操作呢？
方式一：获取DOM原生，添加监听事件；
方式二：在HTML原生中，直接绑定onclick；
◼ 在React中是如何操作呢？ 我们来实现一下React中的事件监听，这里主要有两点不同
React 事件的 命名采用小驼峰式（camelCase），而不是纯小写 ；
我们需要 通过{}传入一个事件处理函数 ，这个函数会在事件发生时被执行；
this的绑定问题
◼ 在事件执行后，我们可能需要获取当前类的对象中相关的属性，这个时候需要用到this
如果我们这里直接打印this，也会发现它是一个undefined
◼ 为什么是undefined呢？
原因是btnClick函数并不是我们主动调用的，而且当button发生改变时，React内部调用了btnClick函数；
而它内部调用时，并不知道要如何绑定正确的this；
◼ 如何解决this的问题呢？
方案一 ：bind给btnClick显示绑定this
方案二 ：使用 ES6 class fields 语法
方案三 ：事件监听时传入箭头函数（个人推荐）
事件参数传递
◼ 在执行事件函数时，有可能我们需要获取一些参数信息：比如event对象、其他参数
◼ 情况一：获取event对象
很多时候我们需要拿到 event对象 来做一些事情（比如阻止默认行为）
那么默认情况下， event对象有被直接传入 ，函数就可以获取到event对象；
◼ 情况二：获取更多参数
有更多参数时，我们最好的方式就是 传入一个箭头函数 ， 主动执行的事件函数，并且传入相关的其他参数 ；

JSX的条件渲染

  • if判断

  • 三元运算符

  • &&逻辑与

  • v-show实现效果

JSX的列表渲染

  • map高阶函数(重要)

  • filter

  • slice

循环要加 key

JSX的原理和本质

◼ 实际上，jsx 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖。
所有的jsx最终都会被转换成 React.createElement的函数 调用。
◼ createElement需要传递三个参数：
◼ 参数一：type
当前ReactElement的类型；
如果是标签元素，那么就使用字符串表示 “div”；
如果是组件元素，那么就直接使用组件的名称；
◼ 参数二：config
所有jsx中的属性都在config中以对象的属性和值的形式存储；
比如传入className作为元素的class；
◼ 参数三：children
存放在标签中的内容，以children数组的方式进行存储；
当然，如果是多个元素呢？React内部有对它们进行处理，处理的源码在下方

购物车案例

React脚手架解析

认识脚手架工具

◼ 对于现在比较流行的三大框架都有属于自己的脚手架：
Vue的脚手架： @vue/cli
Angular的脚手架： @angular/cli
React的脚手架： create-react-app
◼ 它们的作用都是帮助我们生成一个通用的目录结构，并且已经将我们所需的工程环境配置好。
◼ 使用这些脚手架需要依赖什么呢？
目前这些脚手架都是 使用node编写 的，并且都是 基于webpack 的；
所以我们必须在自己的电脑上 安装node环境 ；
◼ 这里我们主要是学习React，所以我们以React的脚手架工具： create-react-app作为讲解 ；

create-react-app

创建Eeact项目

◼ 创建React项目的命令如下：
注意：项目名称 不能包含大写字母
另外还有更多创建项目的方式，可以参考GitHub的readme
◼ 创建完成后，进入对应的目录，就可以将项目跑起来：
创建React项目
create-react-app 项目名称
cd 01-test-react
yarn start

 了解 PWA

◼ 整个目录结构都非常好理解，只是有一个PWA相关的概念：
PWA全称 Progressive Web App ，即 渐进式WEB应用 ；
一个 PWA 应用首先是 一个网页 , 可以 通过 Web 技术编写出一个网页应用 ；
随后添加上 App Manifest 和 Service Worker 来实现 PWA 的 安装和离线 等功能；
这种Web存在的形式，我们也称之为是 Web App ；
◼ PWA解决了哪些问题呢？
可以 添加至主屏幕 ，点击主屏幕图标可以实现启动动画以及隐藏地址栏；
实现 离线缓存功能 ，即使用户手机没有网络，依然可以使用一些离线功能；
实现了 消息推送 ；
等等一系列类似于Native App相关的功能；
◼ 更多PWA相关的知识，可以自行去学习更多；
https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps

webpack的配置

默认给隐藏起来了

从零编写代码
 

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

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

相关文章

最近蛮多应届生问，刚出来怎么找工作，我实在难以启齿......

最近蛮多应届生问，刚出来怎么找工作，我实在难以启齿......

前言 不知道什么情况&#xff0c;近几个月&#xff0c;好多兄弟朋友有在问我&#xff0c;关于应届生刚出来找工作的事儿。 可以看到标题&#xff0c; ‘难以启齿’ 这四个字大家应该都很少看到了吧。 因为很多兄弟问这个事情&#xff0c;我决定悄悄地发出来&#xff0c;把 我…
阅读更多...
域名批量查询 到期未续费域名查询

域名批量查询 到期未续费域名查询

域名的批量查询&#xff0c;指用户可以一次性输入多个域名进行查询&#xff0c;这样可以节省很多查询时间&#xff0c;例如你需要查询iis7这个关键词相关的域名在全球的注册情况 你完全可以使用域名批量查询工具。 最近入职了一家SEO公司&#xff0c;接手管理了110多个网站&am…
阅读更多...
ARM指令

ARM指令

目录 1.指令格式 2.条件&#xff08;cond字段&#xff09; 3.指令助记符 4.寄存器 1.指令格式 基本格式 <opcode>{<cond>}{S} <Rd>,<Rn>{,<opcode2>} 一共6部分 其中&#xff0c;<>内的项是必须的&#xff0c;{}内的项是可选的&#…
阅读更多...
【整型提升问题】

【整型提升问题】

整型提升是什么&#xff1f; 整型提升的规则整型提升的存在 整型提升&#xff1a; 在计算机中&#xff0c;一个数据的类型如果是char 类型&#xff0c;以整型的形式打印该char类型的值时&#xff0c;会自动转换成整型&#xff0c;叫做整型提升。 整型提升的规则&#xff1a…
阅读更多...
LeetCode 力扣 2042. 检查句子中的数字是否递增 areNumbersAscending

LeetCode 力扣 2042. 检查句子中的数字是否递增 areNumbersAscending

大家觉得写还可以&#xff0c;可以点赞、收藏、关注一下吧&#xff01; 也可以到我的个人博客参观一下&#xff0c;估计近几年都会一直更新&#xff01;和我做个朋友吧&#xff01;https://motongxue.cn 文章目录2042. 检查句子中的数字是否递增题目描述示例 1&#xff1a;示例…
阅读更多...
分享一套微信门户应用管理系统源码 微信公众号平台开发框架源码

分享一套微信门户应用管理系统源码 微信公众号平台开发框架源码

微信门户开发框架源码 微信公众号平台开发框架源码 源码分享&#xff0c;需要源码学习可私信我获取。 微信门户应用管理系统&#xff0c;采用基于 MVC Bootstrap Ajax Enterprise Library的技术路线&#xff0c;界面层采用Boostrap Metronic组合的前端框架&#xff0c;数…
阅读更多...
新浪l2接口委托撤单是如何用c++实现的？

新浪l2接口委托撤单是如何用c++实现的？

今天要和大家分享的是新浪l2接口委托撤单&#xff0c;那么接下来小编分享的是它的C实现代码&#xff01; // 委托撤单 // exchangeId: 0>深证(东兴证券是A0, 招商证券普通账户是2) // 1>上证 typedef void (*CancelOrderProc)(int clientId, const char …
阅读更多...
录屏怎么录，试试这三个电脑录屏方法

录屏怎么录，试试这三个电脑录屏方法

录屏是当前最常用的功能&#xff0c;它可以帮助我们将喜爱的视频片段、线上会议&#xff0c;网络课程以及不能被下载的视频都给录制下来。电脑录屏怎么录&#xff1f;我们可以用电脑自带的录屏工具&#xff0c;或者使用第三方专业的电脑录屏软件来录制。下面小编就给大家分享3个…
阅读更多...
2023年机器人与人工智能国际会议（JCRAI 2023）

2023年机器人与人工智能国际会议（JCRAI 2023）

2023年机器人与人工智能国际会议&#xff08;JCRAI 2023&#xff09; 重要信息 会议网址&#xff1a;www.jcrai.org 会议时间&#xff1a;2023年7月7-9日 召开地点&#xff1a;中国上海 截稿时间&#xff1a;2023年5月20日 录用通知&#xff1a;投稿后2周内 收录检索&am…
阅读更多...
异常机制与体系

异常机制与体系

目录 一、传统的错误处理机制 二、异常概念 三、异常的使用 3.1 抛出与捕获 3.1.1 异常的抛出和匹配原则 3.1.2 在函数调用链中异常栈展开匹配原则 3.2 重新抛出 3.3 异常安全 3.4 异常规范 四、自定义异常体系 五、标准库的异常体系 六、异常的优缺点 6.1 优点 …
阅读更多...
第三十三讲：神州三层交换机远程管理

第三十三讲：神州三层交换机远程管理

1、三层交换机带外管理&#xff1a; CS6200-28X-EI>ena CS6200-28X-EI#conf CS6200-28X-EI(config)#username dcn privilege 15 password 0 123456 CS6200-28X-EI(config)#enable password 789 CS6200-28X-EI(config)#authentication line console login local CS6200…
阅读更多...
Java多线程join()方法

Java多线程join()方法

Java多线程join()方法 一、概述 1、join():等待这个线程死亡&#xff0c;相当于join(0)。 2、join(int n) &#xff1a;最多等待n毫秒之后在处理 -2.1、join的时间 < sleep的时间&#xff0c;那么sleep就会停止&#xff0c;运行时间就是join的时间 -2.2、join的时间 > …
阅读更多...
vue 2.x+webpack+cesium1.64详解（7）：cesium事件详解

vue 2.x+webpack+cesium1.64详解（7）：cesium事件详解

目录 cesium事件详解 一、屏幕空间事件处理程序&#xff08;Screen Space Event Handler&#xff09; 1.1、 屏幕空间事件类型&#xff1a;&#xff08;ScreenSpaceEventType&#xff09;鼠标事件 2.1、键盘修饰符类型&#xff08;KeyboardEventModifier&#xff09; 二、屏…
阅读更多...
黑马Hive+Spark离线数仓工业项目-服务器性能监控Prometheus

黑马Hive+Spark离线数仓工业项目-服务器性能监控Prometheus

监控需求及常见工具 目标&#xff1a;了解服务器性能监控需求及常见监控工具 路径 - step1&#xff1a;监控需求 - step2&#xff1a;常见工具 实施 监控需求 - 问题&#xff1a;数据量越来越大&#xff0c;机器数量越来越多&#xff0c;如何保证所有服务器稳定的的运行&a…
阅读更多...
【EHub_tx1_tx2_E100】 ROS_ Melodic + Astra S(如何在该环境下打开摄像机获取rgb/深度图/点云)

【EHub_tx1_tx2_E100】 ROS_ Melodic + Astra S(如何在该环境下打开摄像机获取rgb/深度图/点云)

简介&#xff1a;介绍奥比中光 Astra S 深度相机 在EHub_tx1_tx2_E100载板&#xff0c;TX1核心模块环境&#xff08;Ubuntu18.04&#xff09;下测试ROS驱动&#xff0c;打开摄像头RGB图像和查看深度图和点云图&#xff0c;本文的前提条件是你的TX1里已经安装了ROS版本&#xff…
阅读更多...
CAN 通信协议

CAN 通信协议

CAN 概述 CAN 是Controller Area Network 的缩写&#xff08;以下称为CAN&#xff09;&#xff0c;它的设计目标是以最小的CPU负荷来高效处理大量的报文。1986 年德国电气商BOSCH公司开发出面向汽车的CAN 通信协议。此后&#xff0c;CAN 通过ISO11898 及ISO11519 进行了标准化…
阅读更多...
Vue 实现拖拽模块(五) - 下 预览元件

Vue 实现拖拽模块(五) - 下 预览元件

上文介绍了 定义元件的触发事件(上) 的简单实现 本文主要介绍了预览元件数据&#xff0c;并根据配置事件去触发逻辑&#xff0c;具体如下&#xff1a; 效果图 实现过程 创建预览页面 (元件配置和预览并不是同一个页面)预览页面使用 localStorage 缓存获取保存的元件数据&…
阅读更多...
网络编程看这一篇文章就够了

网络编程看这一篇文章就够了

第一章 网络编程概述 网络编程概述1 2 3Java语言提供了网络的支持,程序员能够很容易的开发常见的网络应用.Java提供的类库,可以实现无痛的网络连接,联网的底层细节被隐藏在安装Java本机系统里.由JVM进行控制.并且Java实现了一个跨平台的网络库.网络编程的目的1直接或间接地通过…
阅读更多...
SQL Server注入技巧与提权方式详解

SQL Server注入技巧与提权方式详解

目录 前言 一、SQL Server基础 1. SQL Server 2012安装启动 navicat远程连接 2. SQL Server概念 数据库的组成 数据库中常用对象 默认库介绍 3. T-SQL语言 创建数据库 创建表 插入数据 基础语法总结 4. sqlserver权限 新建用户并赋予权限 权限总结 二、Sqlser…
阅读更多...
4.1 集成运算放大电路概述

4.1 集成运算放大电路概述

集成电路以半导体单晶硅为芯片&#xff0c;采用专门的制造工艺&#xff0c;把晶体管、场效应管、二极管、电阻和电容等元件及它们之间的连线所组成的完整电路制作在一起&#xff0c;使之具有特定的功能。集成放大电路最初多用于各种模拟信号的运算&#xff08;如比例、求和、求…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023