React进阶

2023-09-15 15:25:47

TODO1

组件生命周期

React 组件生命周期 | 菜鸟教程 (runoob.com)icon-default.png?t=N7T8https://www.runoob.com/react/react-component-life-cycle.html

什么是组件生命周期

在 React 中，组件生命周期是指组件从创建到销毁期间经历的一系列阶段。在每个阶段，React 给予我们不同的方法来管理组件的状态和行为。这样，我们就可以根据需要执行相应的操作，以达到更好的效果。

React 组件生命周期包括三个阶段：

- 挂载阶段（Mounting）
- 更新阶段（Updating）
- 卸载阶段（Unmounting）

挂载阶段（Mounting）

挂载阶段发生在组件被插入到 DOM 树中之前。在这个阶段，React 将调用一些方法来初始化组件并准备它们渲染到页面上。

挂载阶段涉及的生命周期方法：

constructor()

`constructor()` 是类中唯一可以直接修改 state 的方法。在组件被创建时，这个方法就会被调用一次。因此，可以在这里设置初始的 state 和 props 值，也可以在其中绑定事件处理程序。

constructor(props) {
  super(props);
  this.state = {
    count: 0
  };
  // 绑定事件处理程序
  this.handleClick = this.handleClick.bind(this);
}
 static getDerivedStateFromProps()

这个生命周期方法是一个静态方法，也就是说，它可以在组件实例化之前就被调用。从 props 中派生状态的过程中，getDerivedStateFromProps() 可以返回一个新的 state 对象。

static getDerivedStateFromProps(props, state) {
  if (props.value !== state.value) {
    return {
      value: props.value
    };
  }
  
  return null;
}
 render()

在组件挂载到 DOM 树上时，React 将调用该方法以确定其如何渲染。返回值应该是子元素、文本或 React 元素。

render() {
  return (
    <div>
      <h1>Hello, world!</h1>
      <p>Count: {this.state.count}</p>
      <button onClick={this.handleClick}>Click me</button>
    </div>
  );
}
 componentDidMount()

在组件挂载到 DOM 树上后，React 将调用此方法。因此，在这里可以执行异步操作或获取数据，并使用 `setState()` 来更新组件。

componentDidMount() {
  // 获取数据
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
      this.setState({
        data: data
      });
    });
}

 更新阶段（Updating）

一旦组件被挂载到 DOM 树上并在 UI 中渲染出来，它的状态就可以更新。当状态被更新时，React 会运行几个生命周期方法以处理更新过程。

更新阶段涉及的生命周期方法：

static getDerivedStateFromProps()

这个方法在每次组件收到新的 props 时都会被调用，因此可以在这里检查 props 改变是否需要更新 state。如果需要更新，返回一个新的 state 对象，否则返回 null。

static getDerivedStateFromProps(props, state) {
  if (props.value !== state.value) {
    return {
      value: props.value
    };
  }

  return null;
}
shouldComponentUpdate()

在 React 调用 render() 方法之前，shouldComponentUpdate() 将被调用。该方法返回 true 或 false 来指示 React 是否应更新组件。默认情况下，React 总是重新渲染组件。但是，可以通过实现这个方法来进行自定义的逻辑判断。

shouldComponentUpdate(nextProps, nextState) {
  if (nextProps.name !== this.props.name) {
    return true;
  }
  if (nextState.count !== this.state.count) {
    return true;
  }
  
  return false;
}
render()

在组件更新时，React 调用 render() 来更新 UI。在这里，应该返回新的子元素、文本或 React 元素。

render() {
  return (
    <div>
      <h1>Hello, {this.props.name}!</h1>
      <p>Count: {this.state.count}</p>
      <button onClick={this.handleClick}>Click me</button>
    </div>
  );
}
componentDidUpdate()

在组件更新后，React 将调用此方法。在这里可以执行一些操作，比如发出网络请求、手动更新 DOM 或清除计时器等。

componentDidUpdate(prevProps, prevState) {
  if (prevState.count !== this.state.count) {
    console.log('Count updated!');
  }
}

 卸载阶段（Unmounting）

卸载阶段是指当组件从 DOM 树中移除时所经历的阶段。在这个阶段，React 将调用一个生命周期方法来执行一些清理工作。

卸载阶段涉及的生命周期方法：

componentWillUnmount()

在组件被卸载之前立即调用。在这里可以清除计时器、取消网络请求或任何其他需要被清理的资源。

componentWillUnmount() {
  clearInterval(this.intervalId);
}
class Counter extends React.Component {
  constructor(props) {
    super(props);
    console.log(`constructor()`); // 构造函数被调用
    this.state = { count: 0 }; // 初始化状态 count
  }

  componentDidMount() {
    console.log(`componentDidMount()`); // 组件挂载完成
    this.intervalId = setInterval(() => {
      this.setState({
        count: this.state.count + 1 // 每秒钟将 count 加一
      });
    }, 1000);
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log(`shouldComponentUpdate()`); // 组件更新与否
    return true; 
  }

  componentDidUpdate(prevProps, prevState) {
    console.log(`componentDidUpdate()`); // 组件更新完成
  }

  componentWillUnmount() {
    console.log(`componentWillUnmount()`); // 组件将被卸载
    clearInterval(this.intervalId); // 清除定时器
  }

  render() {
    console.log(`render()`); //组件进行渲染
    return (
      <div>
        <p>Count: {this.state.count}</p>
      </div>
    );
  }
}

ReactDOM.render(<Counter />, document.getElementById("root"));

TODO2

组件复用 render-props 高阶组件

组件复用

思考：如果两个组件中的部分功能相似或相同，该如何处理？

处理方式：复用相似的功能（联想函数封装）

复用什么？1. state 2. 操作state的方法 （组件状态逻辑）

两种方式：1. render props模式 2. 高阶组件（HOC）
思路：将要复用的state和操作state的方法封装到一个组件中

render props模式 

思路分析

问题1：如何拿到该组件中复用的state？
在使用组件时，添加一个值为函数的prop，通过函数参数 来获取（需要组件内部实现）

问题2：如何渲染任意的UI？
使用该函数的返回值作为要渲染的UI内容（需要组件内部实现）

使用步骤：

  1. 创建Mouse组件，在组件中提供复用的状态逻辑代码（1. 状态 2. 操作状态的方法）。
  2. 将要复用的状态作为props.render(state) 方法的参数，暴露到组件外部 。
  3. 使用 props.render() 的返回值作为要渲染的内容。
class Mouse extends React.Component{
  state = {
    x: 0,
    y: 0,
  }
  // 鼠标移动
  handleMouseMove = e => {
    this.setState({
      x:e.clientX,
      y:e.clientY,
    })
  }
  // 监听鼠标移动
  componentDidMount() {
    window.addEventListener('mousemove',this.handleMouseMove)
  }
  render() {
    return this.props.render(this.state)
  }
}
class App extends React.Component{
  render() {
    return (
      <div>
        <Mouse render={(mouse) => {
          return <p>鼠标当前位置：{mouse.x} {mouse.y}</p>
        }} />
      </div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

children代替render属性

注意：并不是该模式叫render props 就必须用名为render的prop，实际上可以用任意名称的prop。

把prop是一个函数并且告诉组件要渲染什么内容的技术叫做：render props模式 。

推荐：使用 children 代替 render 属性

代码优化

1.推荐给render-props模式添加prop校验

2.应该在组件卸载时解除mousemove事件绑定

Mouse.propTypes={
    children:PropTypes.func.isRequired
}

componentWillUnmount(){
    window.removeEventListener('mousemove',this.handleMouseMove)
}

 高阶组件

一个接收要包装的组件，返回增强后的组件

思路分析

1、高阶组件（HOC，Higher-Order Component）是一个函数，接收要包装的组件，返回增强后的组件
2、高阶组件内部创建一个类组件，在这个类组件中提供复用的状态逻辑代码，通过prop将复用的状态传递给 被包装组件 WrappedComponent

const EnhancedComponent = withHOC(WrappedComponent)

// 高阶组件内部创建的类组件：
class Mouse extends React.Component {
render() {
return <WrappedComponent {...this.state} />
}
}

使用步骤

  1. 创建一个函数，名称约定以with 开头
  2. 指定函数参数，参数应该以大写字母开头（作为要渲染的组件）
  3. 在函数内部创建一个类组件，提供复用的状态逻辑代码，并返回
  4. 在该组件中，渲染参数组件，同时将状态通过prop传递给参数组件
  5. 调用该高阶组件，传入要增强的组件，通过返回值拿到增强后的组件，并将其渲染到页面

设置displayName 

使用高阶组件存在的问题：得到的两个组件名称相同。
原因：默认情况下，React使用组件名称作为displayName 

解决方式：为高阶组件 设置 displayName 便于调试时区分不同的组件
displayName的作用：用于设置调试信息（React Developer Tools信息）

// 第一步 在高阶函数里写
 Mouse.displayName = `WithMouse${getDisplayName(WrappedComponent)}`

// 第二步 一个固定的函数 || 为假而来
function getDisplayName(WrappedComponent) {
    return WrappedComponent.displayName || WrappedComponent.name || 'Compontent'

传递props

问题：props丢失
原因：高阶组件没有往下传递props
解决方式：渲染WrappedComponent时，将 state 和 this.props 一起传递给组件
传递方式：

return <WrappedComponent {...this.state} {...this.props} />

React之组件的复用render props模式及高阶组件_11.28.的博客-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/PILIpilipala/article/details/113404786?ops_request_misc=&request_id=&biz_id=102&utm_term=%E7%BB%84%E4%BB%B6%E5%A4%8D%E7%94%A8%20render-props%20%E9%AB%98%E9%98%B6%E7%BB%84%E4%BB%B6&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-113404786.142^v94^insert_down1&spm=1018.2226.3001.4187

TODO3

React路由

React 路由详解(超详细详解)_react路由_普通网友的博客-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/m0_67402823/article/details/123258677?ops_request_misc=&request_id=&biz_id=102&utm_term=react%E8%B7%AF%E7%94%B1&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-123258677.142^v94^insert_down1&spm=1018.2226.3001.4187

axios

基本用例 | Axios 中文文档 | Axios 中文网 (axios-http.cn)icon-default.png?t=N7T8https://www.axios-http.cn/docs/exampleReact axios使用_react使用axios_茜红柿没错xx的博客-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/m0_61260987/article/details/122689021?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522169476233316800227454159%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=169476233316800227454159&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-122689021-null-null.142^v94^insert_down1&utm_term=axios%20react&spm=1018.2226.3001.4187

更多推荐

接口文档规范

接口文档规范主要包括以下几个方面：1.接口基本信息应该在文档的开头提供接口的基本信息，包括接口名称、接口URL、请求方法、请求参数、返回值、返回状态码等。这些信息应该清晰明了，并且易于理解。2.请求参数接口文档应该明确列出请求参数，并提供每个参数的名称、类型、是否必填、描述等信息。对于复杂结构的请求参数，例如JSON或

从网约车平台合规问题看企业合规难题如何破解

随着互联网的快速发展，网约车行业逐渐崛起并成为人们出行的重要选择之一。然而，虽然网约车平台带来了便利和效率，但也引发了一系列合规问题。近日，西安市交通运输综合执法支队和西安市出租汽车管理处组织开展了西安市网约车行业“全过程执法、全链条监管、全合规营运百日攻坚行动”。约谈会上，西安市出租汽车管理处相关负责人通报了“百日攻

华为OD机试真题 Java 实现【简易内存池】【2023 B卷 200分 考生抽中题】

目录一、题目描述二、输入描述三、输出描述样例：输出样例：四、解题思路五、Java算法源码六、效果展示1、输入2、输出3、说明4、再输入5、再说明6、如果走后一次请求的是20，会怎么样呢？华为OD机试2023B卷题库疯狂收录中，刷题点这里一、题目描述请实现一个简易内存池,根据请求命令完成内存分配和释放。内存池支持两种操作

Shiro【散列算法、Shiro会话、退出登录 、权限表设计、注解配置鉴权 】(五)-全面详解（学习总结---从入门到深化）

目录Shiro认证_散列算法Shiro认证_过滤器Shiro认证_获取认证数据Shiro认证_Shiro会话Shiro认证_会话管理器Shiro认证_退出登录Shiro认证_RememberMeShiro授权_权限表设计Shiro授权_数据库查询权限Shiro授权_在Realm进行授权Shiro授权_过滤器配置鉴权Sh

轻量服务器2核与1核的区别

​1.核心数量轻量服务器2核与1核最明显的区别在于核心数量。1核服务器只有一个处理器核心，而2核服务器有两个处理器核心。这使得2核服务器在处理数据时能够同时执行更多的任务。2.并行处理能力由于只有1个核心，1核服务器不具备并行处理任务的能力。而2核服务器在处理数据时可以同时执行多个任务，提高了服务器的处理速度和效率。3

GitLab数据迁移后出现500错误

一、背景去年做GitLab数据迁移时，写过一篇文章《GitLab的备份与还原》。后来发现新创建的项目没问题，但对于迁移过来的项目，修改名称等信息，或者删除该项目时，会出现500错误，以为是系统问题，一直也查到解决办法。二、原因前段时间再次搜索解决办法，终于解决了，在这里记录一下。导致这样的原因，了解到是db_key_b

辅助驾驶功能开发-功能规范篇(21)-3-XP行泊一体方案功能规范

XPilotParking自动泊车系统七、全自动泊车（AutoParking）•自动泊车辅助（AutoParkingAssist）、斜列式车位泊车辅助（DiagonalAutoParkingAssist）-产品定义基于超声波传感器和环视摄像头对空间和车位的识别，通过自动泊车系统实现全自动泊车入库。-功能说明当车辆以不高

前端杂记1

React是基于函数式编程的运行时框架，UI=fn（state），它的状态改变是通过发布订阅模式，单向数据流方式，更新是通过运行时diff，然后将变化的部分渲染，而vue是通过响应式以组件为颗粒进行更新，因此它可以在预编译阶段进行动静态标记来优化更新比较过程reactscheduler会将组件根据优先级划分成更小颗粒的

Vue全局事件总线

1.简介全局事件总线时一种组件间通信的方式，适用于任意组件间通信2.原理分析：如果A组件想要传递数据给B组件，那么就通过全局事件总线在B组件中绑定一个自定义事件，并界定一个参数来接收传递的数据，在A组件中，就需要通过全局事件总线对自定义事件进行触发，并传递参数简单理解：全局事件总线其实就是一个中间介质，组件间的相互通信

flex弹性盒模型与阿里图标的使用

华子目录flex布局flex布局原理flex使用三要素阿里图标（字体）flex布局相关学习网站：http://c.biancheng.net/css3/flex.html1.flex是当前最主流的布局方式：用它布局起来更方便，取代了浮动的作用。2.浮动布局有缺陷，会脱离文档流，可能会导致布局崩塌注：用flex布局的元素

SQL中LIKE和REGEXP简单对比

一、在SQL中，LIKE和REGEXP是用于模式匹配的两种不同语法。它们用于在数据库查询中匹配符合特定模式的字符串。1.LIKE是SQL中用于模糊匹配的运算符，它使用通配符%来表示任意个数字符序列（包括空字符序列）的位置。例如：SELECT*FROMtable_nameWHEREcolumn_nameLIKE'AA%'

热文推荐
  1. vue页面嵌入飞书网页组件,用于在类似ERP,OA等系统中展示在线文档

    先展示最终效果(就是在vue页面中,内嵌了一块ifream页面):1.注册进入飞书开放平台,地址为:飞书开放平台2.进入开放平台后,选择--创建企业自建应用--创建网页应用,然后在主页面记住该应用的appId和appSecret参数,后面要用3.然后注意一点的是,因为后面的授权等逻辑我们一般用我们自己的文档做测试,但是

  2. React antd Select 无法在disabled状态下选择并复制输入框内的内容情况分析及解决方案

    文章目录背景问题分析解决思路一：会不会是由于在选择框内hover的时候出现的那个图标导致的解决思路二：会不会是这个span禁止复制解决思路三：去看看antd具体实现最终解决方案其他版本的解决方案antd3.*antd5.*背景在React项目开发中，我们经常会用到antd内的Select组件。有时候我们会在disabl

  3. Eureka注册中心

    文章目录1.Eureka的结构与作用2.搭建eureka-server服务3.注册service服务4.服务发现1.Eureka的结构与作用在Eureka架构中，微服务角色有两类：lEurekaServer：服务端，注册中心记录服务信息u心跳监控lEurekaClient：客户端Provider：服务提供者注册自己的信

  4. 数据结构前瞻

    集合框架JAVA的集合框架是定义在java.util包下的一组接口和实现类，用于将多个元素置于一个单元中，对这些元素进行快速，便捷的存储，减速和管理，即增删查改下面的格子，黄色代表接口，蓝色代表抽象类，棕色代表类是动态数组（顺序表）优先级队列是双向列表底层就是一颗红黑树重要的四个接口算法效率时间复杂度即算法中基本操作的

  5. 2022年贵州省职业院校技能大赛中职组网络安全赛项规程

    2022年贵州省职业院校技能大赛中职组网络安全赛项规程一、赛项名称赛项名称：网络安全赛项归属：信息技术类二、竞赛目的为检验中职学校网络信息安全人才培养成效，促进网络信息安全专业教学改革，培养大批既满足国家网络安全战略需要有具备世界水平的优秀技能人才，在社会上营造“技能改变命运、匠心成就人生”的崇尚技能的氛围，国家教育部

  6. 深入理解WPF中MVVM的设计思想

    近些年来，随着WPF在生产，制造，工业控制等领域应用越来越广发，很多企业对WPF开发的需求也逐渐增多，使得很多人看到潜在机会，不断从Web，WinForm开发转向了WPF开发，但是WPF开发也有很多新的概念及设计思想，如：数据驱动，数据绑定，依赖属性，命令，控件模板，数据模板，MVVM等，与传统WinForm，ASP.

  7. Redis实现Session持久化

    Redis实现Session持久化1.前言直接使用Session存储用户登录信息，此时的会话信息是存储在内中的，只要项目重启存储的Session信息就会丢失。而使用Redis存储Session的话就不会存在这种情况，即使项目重启也并不影响，也无需用户重新登录。使用Redis存储Session，还能让项目支持分布式的，比

  8. 如何将 Transformer 应用于时间序列模型

    在机器学习的广阔前景中，transformers就像建筑奇迹一样高高耸立，以其复杂的设计和捕获复杂关系的能力重塑了我们处理和理解大量数据的方式。自2017年创建第一个Transformer以来，Transformer类型呈爆炸式增长，其中包括ChatGPT和DALL-E等强大的生成式AI模型。虽然transformer

  9. Beyong compare 介绍

    "BeyondCompare"是一个强大的文件和文件夹比较工具，它允许你比较两个或更多的目录/文件并显示差异。这个工具特别有用，当你需要找出两个不同版本的文件之间的改变时。如果你想要使用BeyondCompare，你需要按照以下步骤操作：1.**下载和安装**：首先，你需要从BeyondCompare的官方网站或其他可