React 学习笔记总结(三)

news2024/11/18 8:43:29

文章目录

  • 1. React( v16.8 版本) 生命周期
  • 2. React( v16.8 版本) 生命周期 更新流程
    • 2.1 三个更新流程
    • 2.2 setState()的生命周期流程(对应上图2号线)
    • 2.3 forceUpdate()的生命周期流程(对应上图3号线)
    • 2.4 父组件render()渲染的生命周期流程(对应上图1号线)
    • 2.5 React( v16.8 版本)生命周期 总结
  • 3. React 新版本的生命周期
  • 4. React(17 新版本钩子函数) getDerivedStateFromProps函数
  • 5. React(17 新版本钩子函数) getSnapshotBeforeUpdate函数
  • 6. React 17版本的生命周期总结
  • 7. React 之 DOM的Diffing算法
  • 8. React 之 react脚手架初始化
  • 9. React 之 脚手架文件结构
    • 9.1 文件结构
    • 9.2 应用加壳技术
    • 9.3 public中的index.html 结构解析
    • 9.4 public 中的robots.txt
    • 9.5 src下的文件

1. React( v16.8 版本) 生命周期

组件的 挂载(mount) 和 卸载(unmount) 。

生命周期钩子函数：

  • componentDidMount()函数调用周期：组件挂载完毕之后。
  • componentWillUnmount()函数调用周期：组件将要卸载之前调用。
  • render函数调用周期：初始化渲染、state状态更新之后。

组件卸载后，经常遇到的一个错误：
在这里插入图片描述

react生命周期架构图：
在这里插入图片描述
在这里插入图片描述

2. React( v16.8 版本) 生命周期 更新流程

2.1 三个更新流程

更新流程，大体上三个流程如下：
在这里插入图片描述

2.2 setState()的生命周期流程(对应上图2号线)

setState()的生命周期流程：

// shouldComponentUpdate钩子函数：相当于一个控制组件更新的 阀门 (校验)
// 应该修改就返回true，不应该修改就返回false。
// 该函数不实现就会有一个默认值永远返回true。
shouldComponentUpdate(){
    console.log('shouldComponentUpdate')
    return true
}

// 组件将要更新的钩子
componentWillUpdate(){
    console.log('componentWillUpdate')
}

// 组件更新完毕之后的钩子
componentDidUpdate(){
    console.log('componentDidUpdate')
}

2.3 forceUpdate()的生命周期流程(对应上图3号线)

forceUpdate是强制更新，而setState是正常更新。

强制更新的不同在于，不修改state状态的情况下，也能更新页面。

在这里插入图片描述

2.4 父组件render()渲染的生命周期流程(对应上图1号线)

就是存在了父子组件会调用的钩子：

class A extends React.Component {
     state = {carName: '奔驰'}
     changeCar = ()=>{
         this.setState({carName:'奥托'})
     }
     render() {
         return (
             <div>
                 <div>我是A组件</div>
                 <button onClick={this.changeCar}>换车</button>
                 <B carName={this.state.carName}/>
             </div>
         );
     }
 }

 class B extends React.Component {
     render() {
         return (
             <div>
                 我是B组件，接受到的车是: {this.props.carName}
             </div>
         );
     }

     componentWillReceiveProps(){
         console.log('componentWillReceiveProps')
     }

     shouldComponentUpdate(){
         console.log('shouldComponentUpdate')
         return true
     }

     componentWillUpdate(){
         console.log('componentWillUpdate')
     }

     componentDidUpdate(){
         console.log('componentDidUpdate')
     }

 }

 // 渲染组件
 ReactDOM.render(<A/>,document.getElementById('test'))

2.5 React( v16.8 版本)生命周期 总结

在这里插入图片描述

3. React 新版本的生命周期

react.development.js 和 react-dom.development.js的版本一般都是对应的，如上面版本都是( v16.8 版本)。

接下来用17新版本的React学习：
在这里插入图片描述
在这里插入图片描述
官方的解释：
在这里插入图片描述

注意：这里的UNSAFE并不是指的安全性问题，而是为了未来版本迭代中有可能出现bug(异步渲染)。
在这里插入图片描述

几个版本的对于三个钩子的显示：
在这里插入图片描述

16版本React 与 17版本React生命周期比对：
在这里插入图片描述

4. React(17 新版本钩子函数) getDerivedStateFromProps函数

derived英文直译：衍生的。

该钩子函数一般用于下图的情况：即state的值在任何时候都取决于props的值。

在这里插入图片描述

class B extends React.Component {
    state = {
        count:0
    }
    render() {
        return (
            <div>
                我是B组件，接受到的车是: {this.props.carName}
            </div>
        );
    }
    static getDerivedStateFromProps(props,state){
        console.log('getDerivedStateFromProps',props,state)
        // 返回null，就是放行。因此，一般state状态要规定与props相同的时候才会用到。
        return null
    }
}

使用的时候注意以下几点：

  • 必须声明为static静态的。
  • 能接受到两个参数props和state两个参数。
    在这里插入图片描述

该函数生命周期钩子如下：
在这里插入图片描述

5. React(17 新版本钩子函数) getSnapshotBeforeUpdate函数

在这里插入图片描述

17版本的React的componentDidUpdate钩子函数可以接受三个参数：
在这里插入图片描述

getSnapshotBeforeUpdate(){
    console.log('getSnapshotBeforeUpdate')
    return '接受'
}
// 接受三个参数，更新前的props，更新前的state，快照值snapshotValue
componentDidUpdate(preProps,preState,snapshotValue){
    console.log('preProps',preProps)
    console.log('preState',preState)
    console.log('snapshotValue',snapshotValue)
}

getSnapshotBeforeUpdate函数使用场景：

  • 锁定滚动条场景案例：

在这里插入图片描述

6. React 17版本的生命周期总结

在这里插入图片描述

目前建议的做法：
在这里插入图片描述

7. React 之 DOM的Diffing算法

每一个真实DOM会对应一个虚拟DOM。当生成一个新的虚拟DOM，旧的虚拟DOM与新的虚拟DOM会进行比对。
在这里插入图片描述
就像上面是的，通过新虚拟DOM与旧虚拟DOM进行比对，仅仅是将不一样的数据(肖战)放上去了。

并且这个页面更新的最小粒度是标签。就像下图：
在这里插入图片描述

面试题：

  • react/vue中的key有什么作用！
  • 为什么遍历列表的时候，key最好不要用index？
    在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

8. React 之 react脚手架初始化

facebook提供了一个react脚手架，项目的整体技术架构为：react、webpack、es6、eslint。

脚手架开发的项目特点：模块化、组件化、工程化。

React提供了一个用于创建React项目的脚手架库：create-react-app。

创建脚手架项目过程：

  • 第一步：全局安装：npm install -g create-react-app。
  • 第二步：切换到创项目的目录，使用命令：create-react-app hello-react。
  • 第三步：进入项目文件夹：cd hello-react。
  • 第四步：启动项目npm start。

9. React 之 脚手架文件结构

9.1 文件结构

node_modules文件：存放依赖的文件。

public文件：存放静态资源的。
在这里插入图片描述

Vue 和 React都是SPA(single page application)应用，单页面应用。

9.2 应用加壳技术

应用加壳技术：

  • 可以理解为用户操作移动端的时候其实是打开了一个壳，通过这个壳操作壳里面的html页面。看着像是操作移动端的东西，其实是通过壳来操作html页面而已。
    在这里插入图片描述

可以通过开启移动端访问taobao.com网址来达到这种效果：(也就是应用加壳)
在这里插入图片描述

9.3 public中的index.html 结构解析

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- %PUBLIC_URL%代表public文件夹的路径。 -->
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <!-- 开启理想视口，用于做移动端网页的适配。 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 用于配置浏览器页签的颜色 + 地址栏的颜色。(仅支持安卓手机，移动端的！) -->
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <!-- 用于指定网页添加到手机主屏幕后的图标 -->
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!-- 加壳应用要用到的一个配置文件！ -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <!-- 若浏览器不支持js，则展示标签中的内容 -->
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

9.4 public 中的robots.txt

当别人的爬虫，爬取网页信息时，通过此文件可以定义什么可以爬取，什么不可以爬取。

9.5 src下的文件

app.css：app组件的样式。

app.js：app的js文件。

app.test.js：测试文件。

index.css：入口文件index.js的样式。

logo.svg：是svg的logo图。

index.js：入口文件。

//  React.StrictMode作用：检查App组件的瑕疵什么的！
<React.StrictMode>
 <App />
</React.StrictMode>

// reportWebVitals方法是用来做性能检测的。
reportWebVitals();

在这里插入图片描述

在这里插入图片描述

setupTests.js文件：用来做组件测试的。也是引入了别的组件库。
在这里插入图片描述

总结：
在这里插入图片描述

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

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

相关文章

“学了一个我不感兴趣的专业，要不要转行IT？”

“学了一个我不感兴趣的专业，要不要转行IT？”

“这个专业太无聊了&#xff0c;我想转行……” “你想转去干什么&#xff1f;” “我对金融感兴趣&#xff0c;听说金融很赚钱&#xff0c;我想学金融……” “你感兴趣为什么课后不去钻研&#xff0c;而要选择打游戏&#xff1f;” “以后再慢慢来嘛……” “可是你已经…
阅读更多...
报表工具-FineReport JS实现参数面板显示对应数据

报表工具-FineReport JS实现参数面板显示对应数据

1. 概述 1.1 版本 报表服务器版本 功能变更 11.0 -- 1.2 预期效果 1.3 实现思路 对照填报界面的章节&#xff0c;在参数界面也用 SQL 语句实现对应数据的展示 &#xff0c;当第一次打开模板时&#xff0c;标签不显示可以通过JS 控制实现。 2. 示例 2.1 新建模板 新建普通…
阅读更多...
设计模式-牛刀小试01

设计模式-牛刀小试01

前言 本文为datawhale2022年12月组队学习《大话设计模式》task4打卡学习&#xff0c;本次完成homework1。 【教程地址】https://github.com/datawhalechina/sweetalk-design-pattern 一、任务描述 1.1 背景 小李已经是一个工作一年的初级工程师了&#xff0c;他所在的公司是…
阅读更多...
靶机练习——vulnstack1

靶机练习——vulnstack1

下载地址&#xff1a;http://vulnstack.qiyuanxuetang.net/vuln/detail/2/ 注意事项 密码一定要设置为不同的 部署环境 根据红日安全出具的wp&#xff0c;我们只需要设置两个C段即可&#xff0c;分别是外网的72和内网的52&#xff0c;这里直接添加新的网络以及子网地址即可&…
阅读更多...
十三、DockerFile构建增强版本centos7

十三、DockerFile构建增强版本centos7

1、概述 在Docker 常用命令篇中&#xff0c;我们已经知道了2中构建镜像的方式 export\import 和 commit方式。这两种方式都需要先运行并创建容器&#xff0c;然后在容器中安装vim、ifconfig等命令&#xff0c;然后再重新构建加强版的镜像&#xff0c;比较麻烦。Dockerfile通过…
阅读更多...
2022CTF培训（九）MIPS PWN环境搭建MIPS PWN入门

2022CTF培训（九）MIPS PWN环境搭建MIPS PWN入门

附件下载链接 环境搭建 在 ARM PWN 环境搭建 的基础上&#xff0c;首先安装具备MIPS交叉编译gcc与MIPS程序动态链接库&#xff1a; sudo apt-get install gcc-mips-linux-gnu sudo apt-get install gcc-mipsel-linux-gnu sudo apt-get install gcc-mips64-linux-gnuabi64 su…
阅读更多...
【CANN训练营第三季】Ascend平台体验Pytorch笔记

【CANN训练营第三季】Ascend平台体验Pytorch笔记

模型迁移 手册地址&#xff1a;https://www.hiascend.com/document/detail/zh/CANNCommunityEdition/600alpha002/ptmoddevg/ptmigr/ptmigr_000009.html 主要修改&#xff1a; 导入相关库 import torch import torch_npu #1.8.1及以上需要指定NPU设备 通过device()指定 …
阅读更多...
JDBC编程步骤、JDBC API详解和数据库连接池

JDBC编程步骤、JDBC API详解和数据库连接池

前言&#xff1a; JDBC 就是使用Java语言操作关系型数据库的一套API &#xff0c;全称&#xff1a;( Java DataBase Connectivity ) Java 数据库连接。官方&#xff08;sun公司&#xff09;定义的一套操作所有关系型数据库的规则&#xff0c;即 接口各个数据库厂商去实现这套…
阅读更多...
工具及方法 - Process Explorer以及类似工具，用来获取系统运行的进程信息

工具及方法 - Process Explorer以及类似工具，用来获取系统运行的进程信息

下载Process explorer&#xff1a; Process Explorer - Sysinternals | Microsoft Learn Process explorer简介 有没有想过哪个程序打开了一个特定的文件或目录&#xff1f;现在你可以找到了。Process Explorer向你显示关于进程打开或加载的句柄和DLL的信息。 Process Explore…
阅读更多...
[Python图像处理] 使用 HSV 色彩空间检测病毒对象

[Python图像处理] 使用 HSV 色彩空间检测病毒对象

使用 HSV 色彩空间检测病毒对象前言检测病毒对象相关链接前言 在本节中&#xff0c;我们将学习如何使用 OpenCV 在 HSV 色彩空间中使用特定颜色检测感兴趣对象。我们需要通过指定颜色值范围识别和提取感兴趣的对象&#xff0c;使用具有病毒的血细胞图像&#xff0c;我们的目标…
阅读更多...
Python 自动化测试(五): Pytest 结合 Allure 生成测试报告

Python 自动化测试(五): Pytest 结合 Allure 生成测试报告

本文节选自霍格沃玆测试学院测试开发内部教材&#xff0c;进阶学习文末加群&#xff01; 测试报告在项目中是至关重要的角色&#xff0c;一个好的测试报告&#xff1a; 可以体现测试人员的工作量&#xff1b; 开发人员可以从测试报告中了解缺陷的情况&#xff1b; 测试经理可…
阅读更多...
7.Linux实用操作(2)

7.Linux实用操作(2)

文章目录零、学习目标一、进程管理1、概念2、查看进程3、查看指定进程4、关闭进程二、主机状态1、查看系统资源占用2、top命令内容详解3、top命令选项4、top交互式选项5、磁盘信息监控三、上传、下载1、上传、下载2、rz、sz命令四、压缩、解压1、压缩格式3、tar命令4、tar 命令…
阅读更多...
后端开发浅学react

后端开发浅学react

博客笔记来自于学习 柴柴老师在b站分享的react学习视频&#xff0c;仅供学习参考&#xff0c;学习视频是来自于b站的&#xff1a;柴柴_前端教书匠&#xff0c;视频链接&#xff1a;React入门到实战(2022全网最新&#xff09;_哔哩哔哩_bilibili 和 react官网 开始 – React …
阅读更多...
谁会嫌钱多啊，最适合学生党的Python兼职攻略以及接私活经验

谁会嫌钱多啊，最适合学生党的Python兼职攻略以及接私活经验

大家好&#xff0c;我是小八 这次我想谈谈一个非常热门的话题&#xff0c;就是如何在学习python的同时去赚钱。在这篇文章中&#xff0c;你会学习到如何通过学习python来赚取副业收入。 相信大家都对钱感兴趣吧&#xff0c;如果你和马云爸爸对钱不敢兴趣的话&#xff0c;那这…
阅读更多...
Lambda表达式从用到底层原理

Lambda表达式从用到底层原理

文章目录前言一、lambda函数基本使用参数列表返回类型函数体捕获列表值捕获引用捕获隐式捕获混合方式捕获修改值捕获变量的值异常说明二、lambda表达式使用的注意事项避免默认捕获模式三、lambda表达式底层实现原理采用值捕获采用引用捕获前言 lambda式作为一种创建函数对象的…
阅读更多...
Python tkinter -- 第18章 画布控件之多边形

Python tkinter -- 第18章 画布控件之多边形

18.2.19 create_polygon(coords, **options) 根据 coords 给定的坐标&#xff0c;在画布上绘制一个多边形。 &#xff08;1&#xff09;coords&#xff1a;给定多边形的坐标 &#xff08;2&#xff09;options&#xff1a;选项的具体含义&#xff1a; 选项含义activedash当鼠标…
阅读更多...
JavaEE- JVM八股文（JVM垃圾回收机制GC）

JavaEE- JVM八股文（JVM垃圾回收机制GC）

JVM垃圾回收的目标&#xff1a;主要针对内存中的堆空间进行垃圾回收。 Java中&#xff0c;大量的内存都在堆中。 程序计数器&#xff1a;固定大小&#xff0c;不涉及释放 栈&#xff1a;函数执行完毕&#xff0c;对应栈的空间就自动释放了&#xff0c;不需要垃圾回收 方法区&…
阅读更多...
07-Golang中标识符的命名规则

07-Golang中标识符的命名规则

Golang中标识符的命名规则标识符概念标识符的命名规则保留关键字介绍预定义标识符介绍标识符命名注意事项标识符概念 1.Golang对各种变量、方法等命名时使用的字符序列称为标识符 2.凡是自己可以起名字的地方都叫标识符 标识符的命名规则 1.由26个英文字母大小写&#xff0…
阅读更多...
华为云桌面之下的“冰山”：技术底座x繁荣生态加速模式进化

华为云桌面之下的“冰山”：技术底座x繁荣生态加速模式进化

在新兴技术迭代升级持续加速的背景下&#xff0c;很多产品类别的内涵和外延都在不断演进——虽然名字没什么变化&#xff0c;但实际所指已有云泥之别。 “云桌面”即是如此。从早期的无盘工作站&#xff0c;到VDI、IDV和VOI等技术流派的群雄并起&#xff0c;云桌面的江湖总是“…
阅读更多...
linux第七章---管道、环境变量、常用命令

linux第七章---管道、环境变量、常用命令

1.管道 1.1概念&#xff1a; 管道类似于文件重定向&#xff0c;可以将前一个命令的stdout重定向到下一个命令的stdin。 1.2要点&#xff1a; 管道命令仅处理stdout&#xff0c;会忽略stdeer。管道右边的命令必须要能接受stdin.多个管道命令可以串联。 1.3与文件重定向的区…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023