React渲染相关内容——渲染流程API、Fragment、渲染相关底层API

React渲染过程依次遇到的函数

在React的渲染流程中，从组件的创建到其UI最终呈现到屏幕上，会经历一系列的生命周期方法和函数。这些方法和函数对于类组件（Class Components）和函数组件（Function Components）来说有所不同，尤其是自从React Hooks引入后，函数组件的能力得到了极大的增强。以下是React渲染流程中可能遇到的一些关键方法和函数，主要侧重于类组件，同时也会提及函数组件中的相关概念。

类组件中的渲染流程函数

  1. 构造函数（Constructor）

    • 在类组件实例化时调用，用于初始化state和绑定方法。
    • 在React 16.3及以后的版本中，通常不需要在构造函数中绑定方法，因为可以在类定义中直接使用箭头函数或者使用React.memo（对于函数组件）来避免不必要的重新渲染。

  2. 静态方法getDerivedStateFromProps

    • 在实例化或接收到新的props时调用，用于根据props更新state。
    • 这是一个静态方法，因此不能访问组件的实例。

  3. render方法

    • 返回组件的React元素树，这些元素描述了组件的UI结构。
    • 这是一个纯函数，给定相同的props和state，应该总是返回相同的React元素。

  4. 生命周期方法

    • componentDidMount：在组件首次挂载后立即调用，适合执行副作用操作，如数据获取、订阅等。
    • shouldComponentUpdate：在接收到新的props或state之前调用，用于决定组件是否需要重新渲染。返回false可以阻止渲染过程，提高性能。
    • getSnapshotBeforeUpdate：在最近一次渲染输出（提交到DOM节点）之前调用，返回一个值作为componentDidUpdate的第三个参数。
    • componentDidUpdate：在更新后立即调用，适合执行DOM操作或更新订阅。
    • componentWillUnmount：在组件卸载及销毁之前调用，适合进行清理工作，如取消网络请求、清除定时器、取消订阅等。

函数组件中的渲染流程函数

对于函数组件，由于没有实例化和生命周期方法的概念，React引入了Hooks来提供类似的功能。

  1. 函数组件本身

    • 每次组件的props或state发生变化时，都会重新调用函数组件，返回新的React元素。

  2. React Hooks

    • useState：用于在函数组件中添加state，并返回一个状态值和一个更新该状态的函数。
    • useEffect：用于在函数组件中执行副作用操作，类似于类组件中的componentDidMount、componentDidUpdate和componentWillUnmount。它接受一个函数和一个依赖数组，当依赖项发生变化时，函数会被调用。
    • useContext：用于让你在函数组件中订阅React上下文（context）。
    • useReducer：一个更复杂的state管理Hook，它接受一个reducer函数和一个初始state，并返回一个state值和一个dispatch方法。
    • useCallback：返回一个记忆化的回调函数版本，该回调函数在依赖项不变的情况下不会改变。
    • useMemo：返回一个记忆化的值，它只在依赖项发生变化时重新计算。
    • useRef：可以在整个组件的生命周期内持久化数据而不引起重新渲染。
    • useImperativeHandle：用于在使用forwardRef时自定义暴露给父组件的实例值。
    • useLayoutEffect：其用法与useEffect相同，但它会在所有的DOM变更之后同步调用，可以用于读取DOM布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect内部的更新计划将被同步刷新。

总结

  • 类组件和函数组件在React渲染流程中遇到的函数和方法有所不同。
  • 类组件依赖于生命周期方法来执行副作用操作、更新state和进行清理工作。
  • 函数组件则使用Hooks来提供类似的功能，同时保持组件的简洁性和可重用性。

Fragment

在React中，Fragment是一种特殊的组件，它允许你将子元素组合在一起，而不会向DOM添加额外的节点。这对于需要在单个元素中返回多个元素但又不希望引入额外DOM结构的场景非常有用。以下是关于React中Fragment的详细解释：

return返回原生HTML、自定义组件和fragment

一、Fragment的作用

  1. 组合元素：Fragment允许你将多个元素组合在一起，而不会破坏DOM结构。这在React组件中很常见，因为React组件通常只能返回一个根元素。
  2. 避免额外DOM节点：使用Fragment可以避免向DOM添加不必要的节点，从而保持DOM结构的简洁和高效。

二、Fragment的语法

  1. 完整语法：使用<React.Fragment>来包裹子元素。例如：
function MyComponent() {
  return (
    <React.Fragment>
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </React.Fragment>
  );
}
  1. 简写语法：Fragment的简写语法是使用空的JSX标签<>和</>。例如：
function MyComponent() {
  return (
    <>
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </>
  );
}

三、Fragment的属性

  1. key属性：Fragment唯一可以接受的属性是key。当使用Fragment包裹一个元素集合，并且这个集合需要通过map函数或其他方式生成时，通常需要为每个元素指定一个唯一的key属性。例如：
function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

或者使用简写语法：

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        <>
          <dt key={item.id}>{item.term}</dt>
          <dd>{item.description}</dd>
        </>
        // 注意：在简写语法中，key通常需要直接放在需要它的元素上，而不是Fragment上。
        // 上面的例子为了说明Fragment的key属性，实际上在简写语法中应该这样写：
        // <dt key={`${item.id}-term`}>{item.term}</dt>
        // <dd key={`${item.id}-description`}>{item.description}</dd>
        // 因为<>...</>本身不接受key属性。
      ))}
    </dl>
  );
}

// 更正后的简写语法示例：
function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        <React.Fragment key={item.id}> {/* 仍然可以使用React.Fragment并为其添加key */}
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ) || (
        <>
          {/* 如果map中的元素需要单独的key，则应该直接放在对应的元素上 */}
          <dt key={`${item.id}-term`}>{item.term}</dt>
          <dd key={`${item.id}-description`}>{item.description}</dd>
        </>
      ))}
    </dl>
  );
  // 注意：上面的更正示例中，第二个部分（使用<>...</>的）其实是一个假设的情境，
  // 实际上在map函数中，你应该为每个生成的元素对（dt和dd）分别指定key，
  // 而不是将key放在Fragment或<>上（因为它们不接受key属性）。
}

// 正确的简写语法使用方式（为每个元素分别指定key）：
function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        <>
          <dt key={`${item.id}-term`}>{item.term}</dt>
          <dd key={`${item.id}-description`}>{item.description}</dd>
        </>
      ))}
    </dl>
  );
}

注意：在简写语法<>...</>中，Fragment本身不接受key属性。如果需要为集合中的元素指定key，则应该直接将这些key属性放在需要它们的元素上，如上面的更正示例所示。

四、Fragment的应用场景

  1. 在表格中使用：当需要在<table>中返回多个<tr>、<td>等元素时，可以使用Fragment来避免额外的<div>或<span>节点。
  2. 在列表中使用：当需要在<ul>或<ol>中返回多个<li>元素时，同样可以使用Fragment。
  3. 在组件返回多个元素时使用：当React组件需要返回多个元素但又不希望引入额外DOM结构时，Fragment是一个很好的选择。

五、Fragment的注意事项

  1. Fragment不能作为事件的直接目标：因为Fragment不会渲染为真实的DOM节点，所以它不能作为事件的直接目标。如果需要为Fragment中的元素添加事件处理函数，应该直接将这些函数添加到对应的元素上。
  2. Fragment不支持ref属性：同样地，因为Fragment不是真实的DOM节点，所以它不支持ref属性。如果需要引用Fragment中的元素，应该使用其他方法（如回调refs或React.createRef()）。

综上所述，React中的Fragment是一个非常有用的工具，它允许你在不引入额外DOM结构的情况下组合多个元素。通过合理使用Fragment，可以保持DOM结构的简洁和高效，从而提高React应用的性能和可维护性。

渲染相关和性能相关API

React渲染相关和渲染优化相关的API主要包括以下几类：

一、React渲染相关API

  1. ReactDOM.render：

    • 作用：将React组件渲染到HTML文档中。
    • 用法：ReactDOM.render(<App />, document.getElementById('root'));，这里的<App />是React组件，document.getElementById('root')是HTML中的一个容器，用于渲染React组件。

  2. React.Component：

    • 作用：React中最基本的组件类型，用于构建用户界面。
    • 特点：可以接受props和state作为参数，并返回一个虚拟DOM节点。

  3. React.memo：

    • 作用：用于函数式组件，可以使其只在props发生变化时重新渲染。
    • 用法：const MyComponent = React.memo(function MyComponent(props) {...});

  4. Profiler（不稳定API，可能在未来的版本中发生变化）：

    • 作用：用于分析React组件的渲染性能，帮助识别应用程序中卡顿的原因。
    • 用法：通过onRender回调函数获取渲染时间和相关信息。

二、React渲染优化相关API

  1. shouldComponentUpdate：

    • 作用：通过重写该函数实现组件的条件渲染，即只有在组件的props或state发生变化时才重新渲染组件。
    • 用法：在class组件中重写shouldComponentUpdate(nextProps, nextState)方法，返回true或false以决定是否重新渲染。

  2. PureComponent：

    • 作用：React自带的一个纯组件，其shouldComponentUpdate函数已经被自动实现，只有在props或state发生变化时才会重新渲染组件。
    • 特点：仅会做浅层比较，复杂的state、props需要自行对比。

  3. useCallback和useMemo：

    • 作用：用于缓存函数和计算结果，避免重复计算或渲染。

    • 用法：

      • useCallback：返回一个记忆化的回调函数，该函数在依赖项不变时保持不变。
      • useMemo：返回一个记忆化的值，该值在依赖项不变时保持不变。

  4. React.Profiler（用于性能分析）：

    • 作用：除了作为渲染相关API外，还可以用于性能分析，帮助开发者识别和优化性能瓶颈。
    • 用法：通过包裹需要分析的组件，并在onRender回调中获取和分析渲染性能数据。

综上所述，React提供了丰富的渲染和渲染优化API，帮助开发者构建高效、可维护的用户界面。在开发过程中，根据具体需求和场景选择合适的API进行渲染和性能优化是至关重要的。

渲染相关和性能相关底层API

React渲染相关和渲染优化相关的底层API主要涉及React的虚拟DOM（VDOM）、调度系统、任务优先级以及React 18引入的一些新特性。以下是对这些底层API的详细解释：

一、React渲染相关底层API

  1. ReactDOM.render

    • 作用：将React组件渲染到DOM中。这是React应用启动的入口点，负责将React元素树挂载到指定的DOM节点上。

  2. React Fiber（虚拟DOM）

    • 作用：React使用虚拟DOM来提高渲染效率。虚拟DOM是一个轻量级的JavaScript对象，描述了真实DOM的结构。React通过比较新旧虚拟DOM的差异，然后只更新真实DOM中需要变化的部分，从而避免不必要的DOM操作。
    • 底层实现：React Fiber是React 16引入的新的协调算法，它允许将渲染工作拆分成更小的工作单元，并可以中断和恢复这些工作单元，从而提高了React应用的响应性和性能。

二、React渲染优化相关底层API

  1. Scheduler（调度系统）

    • 作用：React 18引入了一个新的调度系统，它负责管理任务的优先级和执行顺序。调度系统使用优先级队列来安排任务，确保高优先级的任务能够优先得到执行。
    • 底层实现：调度系统的核心是Scheduler模块，它提供了一套API来安排、更新和取消任务。React使用这套API来管理渲染任务的优先级和执行顺序。

  2. 并发模式（Concurrent Mode）

    • 作用：并发模式是React 18中的一个重要特性，它允许React在不阻塞主线程的情况下执行渲染和更新。这意味着React可以在用户进行交互时继续处理后台任务，如数据获取和状态更新。
    • 底层实现：并发模式依赖于React的调度系统和虚拟DOM算法。通过调度系统，React可以管理任务的优先级和执行顺序；通过虚拟DOM算法，React可以比较新旧虚拟DOM的差异，并只更新需要变化的部分。

  3. startTransition

    • 作用：startTransition是一个新的渲染API，它允许开发者将某些更新标记为“过渡性”的，这些更新可以被中断和延迟执行。这对于处理复杂的动画或过渡效果非常有用。
    • 用法：使用startTransition包裹更新逻辑，告诉React接下来的更新不应该立即执行，而是等待过渡完成。

  4. useDeferredValue

    • 作用：useDeferredValue允许开发者创建一个延迟的值，它不会立即阻塞组件的渲染，但会在适当的时候更新。这对于优化需要等待某些数据加载完成的组件非常有用。
    • 用法：使用useDeferredValue创建一个延迟的值，并将其传递给需要优化的组件。

  5. shouldYieldToHigherPriorityWork

    • 作用：这是一个内部函数，用于检查是否有更高优先级的工作需要执行。在并发模式中，React可以根据任务的类型和重要性分配不同的优先级，并允许低优先级的任务在执行过程中被中断，以便处理更高优先级的更新。

综上所述，React的渲染和渲染优化相关的底层API涉及虚拟DOM、调度系统、并发模式以及新的渲染API如startTransition和useDeferredValue等。这些API共同作用于React的渲染流程，提高了React应用的性能和响应性。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

数据库MYSQL——表的设计

数据库MYSQL——表的设计

文章目录 前言三大范式&#xff1a;几种实体间的关系&#xff1a;一对一关系&#xff1a;一对多关系&#xff1a;多对多关系&#xff1a; 前言 之前的博客中我们讲解的是关于数据库的增删改查与约束的基本操作&#xff0c; 是在已经创建数据库&#xff0c;表之上的操作。 在实…
阅读更多...
C++自动化测试：GTest 与 GitLab CI/CD 的完美融合

C++自动化测试：GTest 与 GitLab CI/CD 的完美融合

在现代软件开发中&#xff0c;自动化测试是保证代码质量和稳定性的关键手段。对于C项目而言&#xff0c;自动化测试尤为重要&#xff0c;它能有效捕捉代码中的潜在缺陷&#xff0c;提高代码的可维护性和可靠性。本文将重点介绍如何在C项目中结合使用Google Test&#xff08;GTe…
阅读更多...
备忘笔记-工具：JetBrains友好工具安装配置

备忘笔记-工具：JetBrains友好工具安装配置

1、配置/脚本文件下载 1、校验地址&#xff1a;https://3.jetbra.in/ 打开选择可用链接&#xff0c;点击跳转可用页面。 2、下载文件 左上角点击下载jetbra.zip文件 下载对应全家桶软件版本号&#xff0c;版本号在对应卡票右上角可见。 2、安装包下载 官网地址&#xff1a…
阅读更多...
Flask 基于wsgi源码启动流程

Flask 基于wsgi源码启动流程

1. 点击 __call__ 进入到源码 2. 找到 __call__ 方法 return 执行的是 wsgi方法 3. 点击 wsgi 方法 进到 wsgi return 执行的是 response 方法 4. 点击response 方法 进到 full_dispatch_request 5. full_dispatch_request 执行finalize_request 方法 6. finalize_request …
阅读更多...
Linux 下进程基本概念与状态

Linux 下进程基本概念与状态

文章目录 一、进程的定义二、 描述进程-PCBtask_ struct内容分类 三、 进程状态 一、进程的定义 狭义定义&#xff1a;进程是正在运行的程序的实例&#xff08;an instance of a computer program that is being executed&#xff09;。广义定义&#xff1a;进程是一个具有一定…
阅读更多...
IDEA使用tips（LTS✍）

IDEA使用tips（LTS✍）

一、查找项目中某个外部库依赖类的pom来源 1、显示图 2、导出Maven 项目依赖的可视化输出文件 3、点击要查找的目标类&#xff0c;项目中定位后复制依赖名称 4、在导出的依赖的可视化文件中搜索查找 5、综上得到&#xff0c;Around类来自于pom中的spring-boot-starter-aop:jar…
阅读更多...
【shell编程】函数、正则表达式、文本处理工具

【shell编程】函数、正则表达式、文本处理工具

函数 系统函数 常见内置命令 echo打印输出 #!/bin/bash # 输出普通文本 echo "Hello, World!"# 输出变量值 name"Alice" echo "Hello, $name"# 输出带有换行符的文本 echo -n "Hello, " # -n 选项不输出换行 echo "World!&quo…
阅读更多...
如何选择服务器

如何选择服务器

如何选择服务器 选择服务器时应考虑以下几个关键因素&#xff1a; 性能需求。根据网站的预期流量和负载情况&#xff0c;选择合适的处理器、内存和存储容量。考虑网站是否需要处理大量动态内容或高分辨率媒体文件。 可扩展性。选择一个可以轻松扩展的服务器架构&#xff0c;以便…
阅读更多...
LeetCode 904.水果成篮

LeetCode 904.水果成篮

LeetCode 904.水果成篮 思路&#x1f9d0;&#xff1a; 求水果的最大数目&#xff0c;也就是求最大长度&#xff0c;我们是单调的向前求解&#xff0c;则能够想到使用滑动窗口进行解答&#xff0c;可以用hash表统计每个种类的个数&#xff0c;kinds变量统计当前种类&#xff0c…
阅读更多...
初始Python篇（7）—— 正则表达式

初始Python篇（7）—— 正则表达式

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a; Python 目录 正则表达式的概念 正则表达式的组成 元字符 限定符 其他字符 正则表达式的使用 正则表达式的常见操作方法 match方法的…
阅读更多...
小程序免备案：快速部署与优化的全攻略

小程序免备案：快速部署与优化的全攻略

小程序免备案为开发者提供了便捷高效的解决方案&#xff0c;省去繁琐的备案流程&#xff0c;同时通过优化网络性能和数据传输&#xff0c;保障用户体验。本文从部署策略、应用场景到技术实现&#xff0c;全面解析小程序免备案的核心优势。 小程序免备案&#xff1a;快速部署与优…
阅读更多...
L14.【LeetCode笔记】返回倒数第k个节点

L14.【LeetCode笔记】返回倒数第k个节点

目录 1.题目 2.分析 思路 代码 提交结果 1.题目 面试题 02.02. 返回倒数第 k 个节点 实现一种算法&#xff0c;找出单向链表中倒数第 k 个节点。返回该节点的值。 注意&#xff1a;本题相对原题稍作改动 示例&#xff1a; 输入&#xff1a; 1->2->3->4->5 和 …
阅读更多...
深入解析 EasyExcel 组件原理与应用

深入解析 EasyExcel 组件原理与应用

✨深入解析 EasyExcel 组件原理与应用✨ 官方&#xff1a;EasyExcel官方文档 - 基于Java的Excel处理工具 | Easy Excel 官网 在日常的 Java 开发工作中&#xff0c;处理 Excel 文件的导入导出是极为常见的需求。 今天&#xff0c;咱们就一起来深入了解一款非常实用的操作 Exce…
阅读更多...
基于Java Springboot高校教室资源管理系统

基于Java Springboot高校教室资源管理系统

一、作品包含 源码数据库全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js、Vue、Element-ui 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA/eclipse 数据库&#xff1a;…
阅读更多...
k8s1.31版本最新版本集群使用容器镜像仓库Harbor

k8s1.31版本最新版本集群使用容器镜像仓库Harbor

虚拟机 rocky9.4 linux master node01 node02 已部署k8s集群版本 1.31 方法 一 使用容器部署harbor (1) wget https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo -O /etc/yum.repos.d/docker-ce.repo yum -y install docker-ce systemctl enable docker…
阅读更多...
C语言数据结构学习：循环队列

C语言数据结构学习：循环队列

C语言 数据结构学习 汇总入口&#xff1a; C语言数据结构学习&#xff1a;[汇总] 1. 循环队列 队列的博客&#xff1a;C语言数据结构学习&#xff1a;队列 循环队列会预先定义最大队列空间&#xff0c;然后定义一个数组&#xff0c;通过队列头和队列尾指针分别指向开头和结尾&…
阅读更多...
Vue——响应式数据，v-on，v-bind，v-if，v-for(内含项目实战)

Vue——响应式数据，v-on，v-bind，v-if，v-for(内含项目实战)

目录 响应式数据 ref reactive 事件绑定指令 v-on v-on 鼠标监听事件 v-on 键盘监听事件 v-on 简写形式 属性动态化指令 v-bind iuput标签动态属性绑定 img标签动态属性绑定 b标签动态属性绑定 v-bind 简写形式 条件渲染指令 v-if 遍历指令 v-for 遍历对象的值 遍历…
阅读更多...
小米note pro一代(leo)线刷、twrp、magisk、TODO: android源码编译

小米note pro一代(leo)线刷、twrp、magisk、TODO: android源码编译

本文主要说android5 整体思路 android 5.1 twrp magisk Zygisk(Riru) Dreamland(xposed) Riru不支持android5.1, 因此只能选择Zygisk : 如果你正在使用 Android 5&#xff0c;你必须使用 Zygisk 因为 Riru 并不支持 Android 5. 基于magisk之上的xposed 其中提到的 作者…
阅读更多...
自然语言处理: RAG优化之Embedding模型选型重要依据：mteb/leaderboard榜

自然语言处理: RAG优化之Embedding模型选型重要依据：mteb/leaderboard榜

本人项目地址大全&#xff1a;Victor94-king/NLP__ManVictor: CSDN of ManVictor git地址&#xff1a;https://github.com/opendatalab/MinerU 写在前面: 笔者更新不易&#xff0c;希望走过路过点个关注和赞&#xff0c;笔芯!!! 写在前面: 笔者更新不易&#xff0c;希望走过路…
阅读更多...
Redis 常用数据类型插入性能对比：循环插入 vs. 批量插入

Redis 常用数据类型插入性能对比：循环插入 vs. 批量插入

Redis 是一款高性能的键值数据库&#xff0c;其支持多种数据类型&#xff08;String、Hash、List、Set、ZSet、Geo&#xff09;。在开发中&#xff0c;经常会遇到需要插入大量数据的场景。如果逐条插入&#xff0c;性能会显得较低&#xff0c;而采用 Pipeline 批量插入 能大幅提…
阅读更多...
最新文章

Copyright @ 2022~2023