课程介绍
本节课程面向对于 React 知识有一定了解的同学,稍微深层次的介绍了下 React 的特性和更新流程。对于最近比较火的 Hook 也有了对比和介绍。并结合了较多具体常见的场景案例对 React 的基础知识进行了巩固介绍。
笔记
React 是一个用于构建用户界面的 JavaScript 库,它提供了一种声明式的编程方式,让开发者可以更容易地管理 UI 的状态和交互。React 也支持组件化的开发模式,让开发者可以复用和组合不同的 UI 组件,提高开发效率和代码可维护性。本文将介绍 React 的基本概念和特性,以及 React 的更新流程和常用 API。本文还将介绍 class 组件和函数组件的区别和优劣,以及 hook 规则的作用和使用方法。最后,本文将通过几个业务场景的案例,展示如何用 React 实现一些常见的 UI 功能。
React 简介与特性 React 是由 Facebook 开发并开源的一个 JavaScript 库,它最早于 2013 年发布,目前已经成为了前端开发中最流行和最受欢迎的框架之一。React 的核心思想是使用组件来构建用户界面,每个组件都有自己的状态和逻辑,可以接收外部传入的属性(props)来控制组件的渲染和行为。React 通过虚拟 DOM(Virtual DOM)技术来实现高效的 DOM 更新,只有当组件的状态或者 props 发生变化时,React 才会重新渲染组件,并且只更新变化的部分,而不是整个 DOM 树。这样可以大大提升页面的性能和用户体验。
React 的主要特性有:
- 声明式编程:React 让开发者只需要关注 UI 的最终状态,而不需要关心 UI 的具体实现细节和过程。开发者只需要使用 JSX 语法(一种类似于 HTML 的语法)来描述 UI 的结构和样式,React 会自动将 JSX 转换为 JavaScript 代码,并且根据组件的状态和 props 来渲染 UI。
- 组件化开发:React 让开发者可以将 UI 拆分为多个独立的组件,每个组件都有自己的作用域和生命周期,可以复用和组合不同的组件来构建复杂的 UI。这样可以提高代码的可读性和可维护性,也可以方便地进行单元测试和调试。
- 单向数据流:React 采用了单向数据流(One-way data flow)或者叫做单向绑定(One-way binding)的模式,即数据只能从父组件传递到子组件,而不能反向传递。这样可以避免数据的混乱和冲突,也可以让数据流更加清晰和可预测。
- 跨平台支持:React 不仅可以用于开发 Web 应用,还可以通过 React Native 来开发移动应用,或者通过 React VR 来开发虚拟现实应用。React 通过不同的渲染引擎来适配不同的平台,但是保持了相同的编程模式和 API,让开发者可以使用同一套代码来开发多个平台的应用。
React 更新流程 React 的更新流程是指当组件的状态或者 props 发生变化时,React 如何重新渲染组件并更新 DOM 的过程。React 的更新流程分为两个阶段:Reconciliation(协调)阶段和 Commit(提交)阶段。