WHAT - React Context 两层组件的优化机制

目录

  • 一、Context
  • 二、分离逻辑和视图
  • 三、优化性能
    • 示例代码
    • 解释

一、Context

官方文档:https://react.dev/learn/passing-data-deeply-with-context

二、分离逻辑和视图

在 React 中使用两层组件来使用 Context 的原因主要是为了分离逻辑和视图,并且更好地管理和优化状态。

这种模式通常被称为“Context Provider/Consumer”模式。

以下是一些具体原因:

  1. 解耦状态逻辑和视图逻辑

    • Context Provider 组件通常负责管理和提供状态。它包含与状态管理相关的逻辑,例如获取数据、处理状态变化等。
    • Consumer 组件 负责渲染与状态相关的视图。它通过 Context 访问 Provider 提供的状态,从而保持视图逻辑的简洁和易维护。
  2. 提高组件的可复用性

    • 使用 Provider 和 Consumer 分离逻辑和视图后,可以更容易地在不同的视图组件中复用相同的状态逻辑,而无需重复编写相同的代码。
  3. 优化性能

    • Context 的更新会触发使用了这个 Context 的所有组件重新渲染。通过分层结构,可以在 Provider 中集中处理状态更新,减少不必要的重新渲染,提高性能。
    • Consumer 组件可以根据需要细粒度地订阅 Context 的某些部分,避免不必要的渲染。
  4. 简化测试

    • 逻辑和视图的分离使得单元测试更加简单。Provider 组件可以独立测试其状态管理逻辑,而 Consumer 组件可以通过模拟的 Context 值来测试其渲染逻辑。
  5. 增强代码的可维护性和可读性

    • 使用两层组件可以使代码结构更加清晰,职责分离明确。状态管理和 UI 逻辑分别处理,使得代码更容易理解和维护。

一个典型的使用示例如下:

// 创建 Context
const MyContext = React.createContext();// Provider 组件
const MyProvider = ({ children }) => {const [state, setState] = useState(initialState);const value = {state,updateState: (newState) => setState(newState),};return (<MyContext.Provider value={value}>{children}</MyContext.Provider>);
};// Consumer 组件
const MyConsumer = () => {const { state, updateState } = useContext(MyContext);return (<div><p>Current state: {state}</p><button onClick={() => updateState("new state")}>Update State</button></div>);
};// 使用 Provider 包裹应用
const App = () => (<MyProvider><MyConsumer /></MyProvider>
);export default App;

通过这种方式,Provider 组件管理状态逻辑,Consumer 组件专注于渲染逻辑,从而实现了状态逻辑和视图逻辑的分离。

三、优化性能

  • Context 的更新会触发使用了这个 Context 的所有组件重新渲染。通过分层结构,可以在 Provider 中集中处理状态更新,减少不必要的重新渲染,提高性能。
  • Consumer 组件可以根据需要细粒度地订阅 Context 的某些部分,避免不必要的渲染。

这段话解释了 Context 的工作机制以及如何优化组件的渲染行为。具体来说,当 Context 的值发生变化时,所有使用 useContext 获取该 Context 的组件都会重新渲染,即使这些组件使用了 React.memoshouldComponentUpdate 来优化性能。这是因为 Context 的变化会绕过这些优化机制。

为了避免这种情况,可以将组件分为两个部分:一个外层组件从 Context 中读取所需的内容,并将这些内容作为 props 传递给使用 React.memo 优化的子组件。这样,只有当与子组件相关的 Context 值发生变化时,子组件才会重新渲染。

下面是一个示例代码和解释:

示例代码

import React, { useContext, useState, createContext, memo } from 'react';// 创建 Context
const MyContext = createContext();const MyProvider = ({ children }) => {const [state, setState] = useState({ count: 0, name: 'John' });return (<MyContext.Provider value={{ state, setState }}>{children}</MyContext.Provider>);
};// 外层组件,从 Context 中读取所需内容
const OuterComponent = () => {const { state } = useContext(MyContext);// 只提取与子组件相关的值const name = state.name;return <InnerComponent name={name} />;
};// 子组件,使用 memo 优化
const InnerComponent = memo(({ name }) => {console.log('InnerComponent render');return <div>Name: {name}</div>;
});const App = () => (<MyProvider><OuterComponent /><button onClick={() => setState((prev) => ({ ...prev, count: prev.count + 1 }))}>Increment Count</button></MyProvider>
);export default App;

解释

  1. 创建 Context:我们创建了一个 Context MyContext,并使用 MyProvider 组件来提供 Context 的值。

  2. MyProvider 组件MyProvider 组件管理状态 state,包含 countname,并将其提供给 Context。

  3. OuterComponent 组件OuterComponent 组件使用 useContext 钩子从 Context 中读取状态 state。然后,它提取出与子组件相关的 name 值,并将其作为 props 传递给 InnerComponent

  4. InnerComponent 组件InnerComponent 组件使用 React.memo 进行优化。由于它只接收 name 作为 props,因此只有在 name 发生变化时,它才会重新渲染。

  5. 避免不必要的重新渲染:通过将 OuterComponent 作为中间层,从 Context 中读取值并将其传递给子组件,可以避免 InnerComponentcount 值变化时重新渲染,因为 InnerComponentcount 的变化不感兴趣。

这样,通过将组件分为两个部分,确保只有与子组件相关的 Context 值变化时才会触发子组件的重新渲染,从而优化性能。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

最短路径 | 743. 网络延迟时间之 Dijkstra 算法和 Floyd 算法

目录 1 基于 Dijkstra 算法1.1 代码说明1.2 完整代码 2 基于 Floyd 算法2.1 代码说明2.2 完整代码 前言&#xff1a;我在做「399. 除法求值」时&#xff0c;看到了基于 Floyd 算法的解决方案&#xff0c;突然想起来自己还没有做过最短路径相关的题。因此找来了「743. 网络…

【黑马java基础】特殊文件,日志

目录 特殊文件&#xff1a;Properties属性文件特点、作用使用Properties读取属性文件里的键值对数据使用properties把键值对数据写到属性文件中去案例 特殊文件&#xff1a;XML文件概述读取XML文件中的数据把数据写出到XML文件中去补充知识&#xff1a;约束XML文件的编写[了解]…

HarmonyOS 本地真机运行

目录 官网地址 1.开发工具设置签名 2.手机开启开发者模式 3.使用USB连接方式 4.使用无线调试连接方式 5.常见的问题 官网地址 使用真机运行应用 使用本地真机运行应用/服务 1.开发工具设置签名 官网应用/服务签名 1.左上角文件--项目结构-勾选自动生成签名-Sign in登录 2…

麦田物语第十二天

系列文章目录 麦田物语第十二天(鸽了两天,今天继续) 文章目录 系列文章目录一、实现拖拽物品交换数据和在地图上生成物品二、制作 ItemTooltip 的 UI1.ItemTooltip的组成以及UI效果展示2.Layout Group-Vertical Layout Group3.Content Size Fitter一、实现拖拽物品交换数据…

Apache2服务介绍

apache2 安装使用配置web访问配置虚拟主机配置代理正向代理反向代理 官网 互联网上排名第一的 HTTP 服务器&#xff0c;Apache HTTP 服务器项目致力于开发和维护适用于现代操作系统&#xff08;包括 UNIX 和 Windows&#xff09;的开源 HTTP 服务器。该项目的目标是提供安全、…

【译】设计已死

文章概括&#xff1a; 本文探讨了人工智能&#xff08;AI&#xff09;的崛起如何可能使设计师甚至设计本身变得过时。作者借用尼采的名言“上帝已死”&#xff0c;引出设计在AI时代面临的困境&#xff0c;并分析了 AI 对设计行业的深远影响。 思维导图&#xff1a; 人类创造的…

GPT模型为什么能生成有意义的文本

GPT模型的底层&#xff0c;其实是谷歌团队推出的Transformer模型。但是在GPT-3出现之前&#xff0c;大家一直对它没有多少了解。直到它的参数数量突破1750亿个的时候&#xff0c;它才建立起一个庞大的神经网络&#xff0c;这个神经网络最突出的特点是大数据、大模型和大计算。其…

书生浦语多模态简述——学习笔记

多模态学习概念 多模态它是研究异构且相互连接数据的科学。它涵盖了从原始的器官信号到抽象概念的多种模态。 比如说我们语音和语言是我们理解人类交流的关键模态&#xff0c;而情感和图像就为我们提供了对环境和对象的感知&#xff0c;通过分析这些模态&#xff0c;我们就可…

技术成神之路:设计模式(九)观察者模式

介绍 观察者模式&#xff08;Observer Pattern&#xff09;是一种行为设计模式。它允许一个对象&#xff08;称为主题或可观察者&#xff09;来监视并通知一组依赖于这个对象的其他对象&#xff08;称为观察者&#xff09;&#xff0c;以便在主题状态发生变化时自动更新观察者的…

Python中高效处理大数据的几种方法

随着数据量的爆炸性增长&#xff0c;如何在Python中高效地处理大数据成为了许多开发者和数据科学家的关注焦点。Python以其简洁的语法和丰富的库支持&#xff0c;在数据处理领域占据了重要地位。本文将介绍几种在Python中高效处理大数据的常用方法。 目录 1. 使用Pandas进行数…

双向链表(C语言版)

1. 双向链表的结构 注意&#xff1a;这里的“带头”跟单链表的“头结点”是两个概念&#xff0c;实际上在单链表阶段称呼不太严谨&#xff0c;但是为了更好地理解就直接称为单链表的头结点。带头链表里的头结点&#xff0c;实际为“哨兵位”&#xff0c;哨兵位结点不存储任何有…

若依Vue前后端分离版如何部署(windows)(超详细)

一、项目环境准备 下面是项目所需要准备的环境 Node.js redis 1、Node.js下载 下面进入官网可以下载Node.js — 在任何地方运行 JavaScript (nodejs.org)https://nodejs.org/zh-cn 下载完成安装后&#xff0c;需要配置环境变量&#xff0c;首先复制以下nodejs的安…

【JavaScript】箭头函数

具体讲解 之前写 this 的指向时就提到过箭头函数&#xff0c;但是由于其比较复杂&#xff0c;还是单独开一篇来讲箭头函数。 箭头函数&#xff0c;箭头函数不能作为构造函数&#xff0c;没有原型 prototype&#xff0c;不能 new。 在箭头函数中&#xff0c;this 关键字指向的是…

代码随想录Day15|| 110平衡二叉树 257二叉树的所有路径 404左叶子之和 222完全二叉树的节点个数

110平衡二叉树 力扣题目链接 题目描述 给定一个二叉树&#xff0c;判断它是否是 平衡二叉树 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;true示例 2&#xff1a; 输入&#xff1a;root [1,2,2,3,3,null,null,4,4] 输出&#xff…

.NET Core异步编程与多线程解析:提升性能与响应能力的关键技术

在.NET Core中&#xff0c;异步编程和多线程是构建高性能应用程序的核心技能。理解这两个概念不仅可以提升应用程序的响应能力&#xff0c;还能优化资源使用。本文将深入剖析异步编程和多线程的关键知识点&#xff0c;提供代码示例&#xff0c;并附上步骤以帮助理解。 1. 异步…

深入浅出WebRTC—GCC

GoogCcNetworkController 是 GCC 的控制中心&#xff0c;它由 RtpTransportControllerSend 通过定时器和 TransportFeedback 来驱动。GoogCcNetworkController 不断更新内部各个组件的状态&#xff0c;并协调组件之间相互配合&#xff0c;向外输出目标码率等重要参数&#xff0…

高级java每日一道面试题-2024年7月24日-你对ReadWriteLock和StampedLock了解多少?

面试官: 你对ConcurrentHashMap了解多少? 我回答: ReadWriteLock和StampedLock都是Java并发库中提供的锁机制&#xff0c;它们各自针对不同场景提供了灵活性和性能优势。 ReadWriteLock ReadWriteLock是Java并发包中的一个接口&#xff0c;它提供了一种读写锁的实现&#…

昇思25天学习打卡营第17天|计算机视觉

昇思25天学习打卡营第17天 文章目录 昇思25天学习打卡营第17天ShuffleNet图像分类ShuffleNet网络介绍模型架构Pointwise Group ConvolutionChannel ShuffleShuffleNet模块构建ShuffleNet网络 模型训练和评估训练集准备与加载模型训练模型评估模型预测 打卡记录 ShuffleNet图像分…

2023 N1CTF-n1proxy

文章目录 参考rsa握手rust_proxy源码公匙交换和签名会话钥匙后续通信生命周期和裸指针代码审计漏洞点 libc-2.27.so大致思路&#xff08;exp还有变化&#xff09;调试exp泄露libc写free_hook执行命令exp 参考 https://github.com/Nu1LCTF/n1ctf-2023/tree/main/pwn/n1proxy ht…

JVM从1%到99%【精选】-运行时数据区

目录 1.运行时数据区概括 2.什么是内存溢出 3..程序计数器 4.Java虚拟机栈 5.本地方法栈 6.堆 7.方法区 8.直接内存 1.运行时数据区概括 Java虚拟机在运行Java程序过程中管理的内存区域,称之为运行时数据区。主要分为两大类&#xff1a;线程不共享、线程共享线程不共…