JavaScript 进阶实战课
石川
JavaScript Patterns and Anti-Patterns 等开源项目创建者,O'Reilly 技术评审
15066 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 47 讲
开篇词 (1讲)
JavaScript 进阶实战课
15
15
1.0x
00:00/00:00
登录|注册

26|特殊型:前端有哪些处理加载和渲染的特殊“模式”?

你好,我是石川。
在之前的几讲中,我们介绍完了经典的设计模式,今天我们来看看在 JS 中特有的一些设计模式。其实从函数式编程开始,我们就一直强调了前端所重视的响应式编程思想,所以我认为这个部分可以分三大块儿来系统地看下响应式编程在 JS 中的设计模式,分别是组件化、加载渲染和性能优化模式。下面,我们就来深入地了解下。

组件化的模式

首先,我们来看下组件化的设计模式。我想请你先思考这样一个问题:为什么说组件化在前端,特别是基于 JS 开发的 React 框架中,有着非常重要的位置呢?
随着 Web 和 WebGL 的逐渐普及,我们之前用的很多桌面应用都被网页版的应用替代,一是它可以达到和桌面应用类似的功能,二是这样节省了资源在我们的手机或是 PC 上的下载和存储,三是因为这样可以让我们随时随地访问我们需要的内容,只要有网络,输入一个 URL 便可以使用。而且在办公类的软件中它也大大增加了工作的协同,比如我们常用的 QQ 邮箱、Google Docs 或石墨文档都可以看做是由组件组成的复杂的 Web 应用。
接下来我们就来讲讲几种在 React 中会用到的组件化的模式。这里我们首先需要注意的是,在 React 中的组件化和我们通常了解的 Web Component 是有区别的。我们在说到 Web Component 的时候,更多关注的是组件的封装和重用,也就是经典的面向对象的设计模式思想。而 React Component 更多关注的是,通过声明式的方式更好地让 DOM 和状态数据之间同步。为了更好地实现组件化,React 推出了一些不同的模式,这里比较重要的就包含了上下文提供者、渲染属性、高阶组件和后来出现的 Hooks。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

本文深入探讨了前端开发中的特殊加载和渲染模式,包括组件化、加载渲染和性能优化模式。在组件化模式中,重点介绍了React中的经典模式,包括上下文提供者模式、渲染属性模式和高阶组件模式。Hooks模式的引入使得组件可以更直观地通过函数表达创建,同时实现了组件按功能解耦、再按相关性组合的功能。加载渲染模式方面,文章详细介绍了前端渲染、后端渲染、静态渲染、静态渐进生成等概念,以及水合和岛屿架构等模式的应用。这些模式为前端开发提供了更灵活的解决方案,有助于提升性能和优化用户体验。此外,文章还介绍了摇树优化和虚拟列表优化等进一步提高前端性能的模式。通过本文的学习,读者可以系统化地了解前端强交互场景下的设计模式,以及如何通过优化资源和节省算力来提高性能。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《JavaScript 进阶实战课》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(1)

  • 最新
  • 精选
  • 海是蓝天的倒影
    老师的课程真的是干货满满,谢谢老师帮我扫盲。
    2023-02-11归属地:上海
收起评论
显示
设置
留言
1
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部