React 学习笔记

156 阅读5分钟

React 学习笔记

课程讲师:牛岱

课程主题:React 的历史与应用

一、课程介绍

这是一节关于前端框架 React 的基础课程,旨在帮助我们更好地踏入 React 技术原理学习阶段。在本节课中,讲师着重介绍了前端框架 React 的发展历史,同时还围绕其在不同领域的应用展开讲解,让我们对 React 有更全面且深入的认知。

二、课程重点内容

(一)前端应用开发历程

  • 早期前端开发状况:在前端开发早期,页面结构相对简单,大多是静态网页,主要通过 HTML 来搭建页面框架,用 CSS 去定义样式,再配合简单的 JavaScript 实现一些交互效果,比如表单验证、简单的页面跳转等。但随着互联网的发展以及用户对于网页功能和交互体验要求的不断提高,传统的开发方式面临诸多挑战,比如代码的可维护性差、难以应对复杂的业务逻辑和频繁的页面更新需求等。
  • React 的诞生背景:面对这些问题,React 应运而生。它是由 Facebook 团队开发并开源的一款前端框架,旨在解决大型前端应用开发中遇到的诸如组件复用性低、DOM 操作繁琐、数据与 UI 难以高效同步等痛点。React 创新性地引入了组件化开发思想以及虚拟 DOM 等概念,使得前端开发变得更加高效、灵活且易于维护。
  • React 对前端开发的影响:自从 React 出现后,前端开发的模式发生了很大改变。开发者们可以将页面拆分成一个个独立且可复用的组件,就像搭建积木一样去构建复杂的页面。而且虚拟 DOM 的运用,让页面更新性能得到极大提升,它通过对比虚拟 DOM 的变化来精准地更新真实 DOM,减少了不必要的重渲染,提高了整个应用的响应速度,也使得前端应用能够承载更复杂的业务逻辑和交互功能。

(二)移动原生应用开发

  • 跨平台需求的出现:随着移动互联网的蓬勃发展,企业和开发者们希望能够以一种高效的方式开发出同时适配 iOS 和 Android 等不同操作系统的移动应用。传统的原生开发方式虽然能提供高性能和良好的用户体验,但需要针对不同平台使用不同的编程语言(如 iOS 用 Swift/Objective - C,Android 用 Java/Kotlin)分别开发,成本较高且开发周期长。
  • React Native 的应用:React 团队推出了 React Native,它基于 React 的理念,让开发者可以使用 JavaScript 和 React 的开发模式来构建移动原生应用。通过 React Native,开发者能复用大量的 React 组件以及开发逻辑,只需针对不同平台进行一些特定的适配和调用原生组件接口等操作,就可以快速开发出性能接近原生应用的跨平台移动应用。例如,很多电商类、社交类的移动端应用都采用了 React Native 进行开发,既保证了应用在不同手机上的流畅运行,又大大缩短了开发周期、降低了开发成本。
  • 优势与局限:React Native 的优势在于开发效率高、代码复用性强、能够快速迭代更新应用等。不过它也存在一定局限性,像某些复杂的原生功能可能需要编写额外的原生代码来实现,而且在性能上可能无法完全达到纯原生应用的极致水平,但总体来说,在大多数移动应用开发场景中,它的优势还是十分突出的。

(三)结合 Electron 的桌面应用开发

  • 桌面应用开发的痛点:以往开发桌面应用,在 Windows 上可能需要使用 C#、C++ 等语言,在 macOS 上要用 Objective - C 等,不同操作系统需要不同的开发技能和工具链,开发难度较大,且要维护多套代码。此外,更新桌面应用也相对繁琐,很难做到像网页应用那样便捷地推送更新。
  • Electron 的出现与结合 React 的优势:Electron 是一个开源框架,它允许开发者使用 HTML、CSS 和 JavaScript(也就是可以借助 React)来开发桌面应用,能够将前端技术栈无缝应用到桌面应用开发领域。通过结合 React 和 Electron,开发者可以利用 React 的组件化开发优势快速构建桌面应用的界面,同时 Electron 负责与操作系统底层进行交互,提供诸如文件系统访问、系统托盘功能、窗口管理等原生应用具备的功能。例如,像 Visual Studio Code 这样广受欢迎的代码编辑器就是基于 Electron 结合 React 等前端技术开发的,它实现了跨平台使用,并且能够频繁地更新迭代,为用户带来更好的使用体验。
  • 发展前景:这种结合的方式让桌面应用开发变得更加容易上手,吸引了越来越多的开发者尝试,也使得一些原本只专注于前端开发的团队能够涉足桌面应用领域,未来有望在更多类型的桌面应用开发中发挥重要作用,不断拓展其应用范围。

三、学习收获与感悟

通过这堂课程,对 React 的发展历史以及它在前端应用、移动原生应用和桌面应用开发中的应用情况有了清晰的认识。深刻体会到 React 作为一款强大的前端框架,在不同领域所展现出的巨大价值,它不仅改变了前端开发的模式,还通过衍生的技术拓展了应用开发的边界。在后续学习中,希望能进一步深入学习 React 的具体技术细节,掌握其核心原理,并尝试运用到实际的项目开发中,去体验它带来的高效与便捷。