代码编织梦想

React设计模式

😎Hello朋友你好!我是一名西安电子科技大学在校学生,🍉目前主要在做web方向,前端居多,别的方向也有尝试。
如果对博客内容有疑问,或者有想法,🎉欢迎私信或评论,看到一定会回复、尽力为大家解决问题!
如果你对web感兴趣,也欢迎👏一起交流讨论,比如学习路线、项目经验、技术点等等。
同时我会不定期写一些学习心得🦀、技术教程、项目教学等博客,希望能丰富大家的👉技术视野。
技术不易,我们,继续努力👏!

React是一款用于构建可重用组件化UI的流行JavaScript库。在使用React的过程中,设计模式是非常重要的,因为它们可以帮助我们编写出高效、可维护且可扩展的代码。本文将介绍React的设计模式,包括组件化设计模式、状态管理设计模式和性能优化设计模式。

目的是帮助想要学习React,或者对React有一些了解的同学,更清晰的认识这个伟大的框架。因为有时候,可能我们对一些技术点习以为常,但会用但是不会说。

一、组件化设计模式

React的核心思想是组件化,将UI拆分成小的、可重用的部件,以提高可维护性和可重用性。以下是一些常见的组件化设计模式:

1. 展示组件和容器组件

展示组件是负责渲染UI的纯函数组件,通常不涉及任何业务逻辑。容器组件是包含业务逻辑的组件,负责管理展示组件的状态和数据。这种分离可以使代码更易于理解和维护。

展示组件是React中最基本的组件。它们通常由纯函数组成,只负责将props转换为UI元素,通常不涉及任何业务逻辑。展示组件非常适合用于渲染静态UI元素,例如按钮、表单和列表项等。

容器组件是包含业务逻辑的组件。它们负责管理展示组件的状态和数据,并将其传递给展示组件。容器组件通常是应用程序的独特部分,因此它们可能不太可重用。例如,一个包含用户登录逻辑的登录表单组件就是一个容器组件,因为它需要处理用户输入和验证逻辑。

通常情况下,展示组件和容器组件是一一对应的关系。展示组件应该尽可能地简单和可重用,因为它们可能会在应用程序中的多个地方使用。容器组件通常是应用程序的独特部分,因此它们可能不太可重用。

2. 高阶组件

高阶组件是一个函数,它接受一个组件作为输入,并返回一个新的增强版组件。这种模式可以用来实现代码重用和行为组合。

高阶组件是一种非常有用的设计模式,因为它可以使你的代码更加清晰和可维护。使用高阶组件,你可以将共享的逻辑提取到单独的函数中,然后将该函数应用于多个组件中。

以下是一些常见的高阶组件用例:

  • 添加共享逻辑:例如,使用withRouter高阶组件可以将路由信息注入到组件中,方便组件使用路由信息。
  • 添加数据获取逻辑:例如,使用withData高阶组件可以将数据获取逻辑注入到组件中,方便组件获取数据。
  • 添加权限控制逻辑:例如,使用withAuthorization高阶组件可以将权限控制逻辑注入到组件中,方便组件根据用户权限进行渲染。

3. 子组件通信

在React中,通信通常是通过props进行的。然而,当层级嵌套较深时,将props传递到每个子组件可能会变得麻烦。这时可以使用context API,将数据注入整个组件树中。

context API是React提供的一种跨组件层次传递数据的方式。在某些情况下,使用context API可以使代码更加简洁和易于维护。

以下是一些常见的使用场景:

  • 主题:例如,可能希望在整个应用程序中共享主题信息,例如颜色和字体等。
  • 语言:例如,如果应用程序需要支持多种语言,可以使用context API将当前语言注入到整个组件树中。
  • 认证:例如,如果应用程序需要验证用户身份,可以使用context API将认证信息注入到整个组件树中。

二、状态管理设计模式

在React中,状态(state)是组件数据的核心来源。以下是一些常见的状态管理设计模式:

1. 单一状态树

单一状态树是指应用程序状态存储在单个对象中。这种模式可以使状态的变化更加可追踪和可预测。

在React中,状态通常存储在组件的state属性中。如果程序变得复杂,可能会有多个组件需要共享状态。在这种情况下,使用单一状态树可以使状态更加易于管理和理解。

Redux是一个流行的状态管理库,它使用单一状态树的概念来管理应用程序状态。Redux提供了以下功能:

  • 单一状态树:Redux使用单一状态树来存储应用程序状态。
  • 纯函数reducer:Reducer是用于更新状态的纯函数。
  • 中间件:中间件是Redux用来处理异步操作的机制。

2. 不可变性

不可变性是指状态一旦设置就不能直接更改。这种模式可以避免意外的状态更改,从而提高代码的稳定性和可维护性。

在React中,不可变性可以通过使用不可变的数据结构来实现。不可变性可以使代码更加安全,因为它可以避免在不同组件之间共享状态时出现潜在的问题。以下是一些常见的不可变性库:

  • Immutable.js:Immutable.js是一个JavaScript库,它提供了不可变数据结构和相关的操作。
  • Immer:Immer是一个JavaScript库,它使用ES6的Proxy API来实现不可变性。

3. Redux

Redux是一个流行的状态管理库,它使用单一状态树和不可变性的概念来管理应用程序状态。它提供了一个统一的方法来处理应用程序的状态变化,使得代码更加清晰和可维护。

Redux提供了以下功能:

  • 单一状态树:Redux使用单一状态树来存储应用程序状态。
  • 纯函数reducer:Reducer是用于更新状态的纯函数。
  • 中间件:中间件是Redux用来处理异步操作的机制。

在使用Redux时,需要按照以下步骤进行配置:

  • 创建一个reducer函数,它接受当前状态和一个操作,并返回一个新的状态。
  • 创建一个store对象,它管理应用程序状态并提供用于更新状态的方法。
  • 将store对象注入到应用程序中,并使用提供的方法来更新状态。

Redux是一个非常强大的状态管理库,它可以使代码更加可预测和易于维护。但是,由于Redux需要进行大量的配置和设置,因此它可能不适合所有应用。

三、性能优化设计模式

React的虚拟DOM机制使得高效的UI渲染成为可能。然而,为了进一步提高性能,以下是一些常见的性能优化设计模式:

1. Pure Component

Pure Component是一个自带shouldComponentUpdate方法的基本React组件。当组件的props和state没有变化时,Pure Component会自动避免不必要的重新渲染。

Pure Component非常适合用于展示组件,因为它们通常不涉及任何业务逻辑,只需要根据传递给它们的props渲染UI。当props和state发生变化时,Pure Component会进行浅比较,并在必要时重新渲染组件。

3.2 Memoization

Memoization是一种缓存计算结果的技术。在React中,可以使用memo函数或useMemo hook来避免重复计算,从而提高性能。

Memoization非常适合用于需要复杂计算的组件,例如计算机算法或复杂的UI元素。使用Memoization可以将计算结果缓存起来,避免不必要的计算。

当使用memo函数或useMemo hook时,React会比较依赖项的值,如果依赖项没有发生变化,则使用缓存的值。以下是一个使用memo函数的例子:

import React, { memo } from 'react';

const MyComponent = memo(props => {
  // 使用props进行计算
  return <div>{props.value}</div>;
});

3.3 懒加载

懒加载是指在需要时再加载组件或数据。这种模式可以使初始加载时间更快,并提高应用程序的响应速度。

懒加载非常适合用于具有延迟加载资源的组件,例如图像库或数据可视化库。使用懒加载可以使程序更加高效,因为其只会在需要时加载资源。

以下是一个使用React.lazy函数进行懒加载的例子:

import React, { lazy, Suspense } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

const App = () => (
  <div>
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  </div>
);

在上面的例子中,MyComponent组件将在第一次使用时才被加载。fallback属性指定了加载组件时显示的内容。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_51574759/article/details/129630706

选 react 还是其它?_光宇广贞的博客-爱代码爱编程_react vue

好久不写 CSDN 博客了。几年了。 曾记得,写 CSDN 博客最耗神儿的,是排版…… 现在我主要写公众号去了,还是一样的名字,如下图,欢迎关注。可以微信扫码或者搜索“光宇广贞”。嘿嘿。想预览的话,百度“光宇广贞”连好几页尽请观看。这并非技术类公众号……当然,本来我也从来没把 CSDN 博客当成技术类文库…… 说,是选 React 还是其它?

react 概念模型——脱离react谈谈它的设计思想_weixin_34356310的博客-爱代码爱编程

本文翻译自react-basic,本文从属于笔者的Web 前端入门与最佳实践 在正式学习React之前,我们希望能脱离React本身来了解下React的设计思想,这有助于我们更好地运用React与进行更好地架构设计。当然,这里讨论的一些设计理念肯定还是有争论的,见仁见智,各有所感。React.js本身的学习与实现是偏重于工程解决方案、算

《JavaScript设计模式》初次笔记——wsdchong-爱代码爱编程

《JavaScript设计模式》初次笔记 前言 设计模式一直久仰大名,但是没有去花时间去了解,于是今天特意花时间去看《JavaScript设计模式》(2013年6月出版)和w3cschool上的设计模式。然后做了一些笔记。 以《JavaScript设计模式》为目录,以w3cschool上的设计模式为补充。 讲的内容有三:设计模式、JavaScrip

JavaScript 设计模式核⼼原理与应⽤实践 之 行为型:策略模式——重构小能手,拆分“胖逻辑”-爱代码爱编程

JavaScript 设计模式核⼼原理与应⽤实践 之 行为型:策略模式——重构小能手,拆分“胖逻辑”   行为型:策略模式——重构小能手,拆分“胖逻辑” 策略模式和状态模式属于本书”彩蛋“性质的附加小节。这两种模式理解难度都不大,在面试中也几乎没有什么权重,但是却对大家培养良好的编码习惯和重构意识却大有裨益。针对这两种模式,大家了解、会用即可,不建议

antd + react model自定义footer_我理解的React:React 到底是什么?-爱代码爱编程

希望本文能帮助没接触过 React 的同学,对React有个大致的理解。 最近要做一个“前端零基础的入门课程分享”,很多非前端同学可能只是知道 React 是个前端框架,整体对 React 的理解还是很模糊,借此机会,分享一下我对 React 的理解。 最重要的写在前面 React是一个前端UI库。我对React的理解主要就两点: 组

跟 React 学设计模式:掌握编程“套路”,打造高质量应用-爱代码爱编程

跟 React 学设计模式:掌握编程“套路”,打造高质量应用   与性能优化的视角相似,当我们谈论 React 设计模式时,实际上是在谈论“React 组件的设计模式”。在 React 设计模式中,最重要、也是最为大家所津津乐道的几个模式分别是: 高阶组件(HOC)Render Props剥离有状态组件与无状态组件  这些形态各异的 React 设计模

React-Hooks设计动机和工作模式-爱代码爱编程

        拉勾《深入浅出搞定 React》笔记心得。下面这句话课程老师说的,很有道理。格物致知。                 在我的读者中,不少人在“What”和“How”这两个环节做得都不错,但是却疏于钻研背后的“Why”。其实这三者是相辅相成、缺一不可的:当我们了解了具体的“What”和“How”之后,往往能够更加具象地回答理论层面“Why

react:redux 设计思想_bensimons_25的博客-爱代码爱编程

Redux 背后的架构思想——认识 Flux 架构 Redux 的设计在很大程度上受益于 Flux 架构,可以认为 Redux 是 Flux 的一种实现形式(虽然它并不严格遵循 Flux 的设定),理解 Flux 将帮助更好地从抽象层面把握 Redux。   Flux 并不是一个具体的框架,它是一套由 Facebook 技术团队提出的应用架构,这套架构

react:设计模式_万邺的博客-爱代码爱编程

与性能优化的视角相似,当我们谈论 React 设计模式时,实际上是在谈论“React 组件的设计模式”。在 React 设计模式中,最重要、也是最为大家所津津乐道的几个模式分别是: 高阶组件(HOC)Render Props剥离有状态组件与无状态组件高阶组件(HOC):最经典的组件逻辑复用方式 什么是高阶组件 高阶组件(HOC)是 React

js十大设计模式(2/2)_名字还没想好☜的博客-爱代码爱编程

六、适配器模式 什么是适配器模式 适配器模式的作用是解决两个软件实体间的接口不兼容的问题。使用适配器模式之后,原本由于接口不兼容而不能工作的两个软件实体可以一起工作。 适配器的别名是包装器(wrapper),

前端开发中常用设计模式-总结篇_高阳很捷迅的博客-爱代码爱编程

  本文是向大家介绍前端开发中常用的设计模式,它使我们编写的代码更容易被复用,也更容易被人理解,并且保证代码的稳定可靠性。 1.什么是设计模式 通俗来讲,就是日常使用设计的一种惯性思维。 因为对应的这种思维,以及对具体的业务或者代码场景, 有着具体的优势,而后成为行业中的一种“设计模式”。 2.为什么使用设计模式 设计模式是各种业务

在 hooks 时代,我们如何写出高质量的 react和vue组件?_前端达人的博客-爱代码爱编程

vue 和 react都已经全面进入了hooks时代(在vue中也称为组合式api,为了方便后面统一称为hooks),然而受到以前react中类组件和vue2写法的影响,很多开发者都不能及时转换过来,以致于开发出一堆面条式代码,整体的代码质量反而不如改版以前了。 hooks组件到底应该如何写,我也曾为此迷惘过一段时间。特别我以前以react开发居

vue2.0 —— 由设计模式切入,实现响应式原理_vue 切入式-爱代码爱编程

Vue2.0 —— 由设计模式切入,实现响应式原理 《工欲善其事,必先利其器》 既然点进来了,麻烦你看下去,希望你有不一样的收获。 大家好,我是vk,好久不见,今天我们一起来盘一盘关于 Vue2.0 的响应

前端布局小案例,如何创建漂亮的毛玻璃输入表单卡片效果-爱代码爱编程

在当今互联网时代,用户体验是至关重要的。当我们在设计网站或应用程序时,一个漂亮、吸引人的界面往往是吸引用户并提高用户满意度的关键因素之一。而一个好看的表单则可以提高用户提交的意愿和效率。本文将介绍如何使用HTML和CSS创建一个漂亮的毛玻璃输入表单卡片效果,以提高用户的体验和满意度。让我们开始吧! HTML部分 首先,我们需要决定