React课程笔记（上） ｜ 青训营笔记

申晓玉
102 阅读5分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天

React课程笔记（上）

一、内容概要

  1. React的历史与应用
  2. React的设计思路
  3. React (hooks)的写法
  4. React的实现

二、重点内容

  1. 前端应用开发历程
  2. 移动原生应用开发
  3. 结合 Electron 的桌面应用开发
  4. UI 编程痛点
  5. 响应式与转换式
  6. React 设计与实现 - 组件化
  7. React 设计与实现 – 状态归属问题
  8. React 设计与实现 – 生命周期
  9. React 的实现基本概要
  10. React 的实现 - Problem

三、详细知识点

1、React的应用

  1. 前端应用开发，如Facebook, lnstagram, Netflix网页版。
  2. 移动原生应用开发，如linstagram, Discord, Oculus。
  3. 结合Electron，进行桌面应用开发。

2、UI编程的痛点

  1. 状态更新， UI不会自动更新，需要手动调用DOM进行更新
  2. 欠缺基本的代码层面的封装和隔离，代码层面没有组件化
  3. UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到"Callback Hell"

3、响应式与转换式区别

  • 响应式≠转换式
  • 转换式系统：给定输入求解输出
  • 响应式系统：监听事件，消息驱动

4、响应式编程

  1. 状态更新, UI自动更新
  2. 前端代码组件化, 可复用, 可封装
  3. 状态之间的互相依赖关系, 只需声明即可

5、组件化

  1. 组件是组件的组合/原子组件
  2. 组件内拥有状态, 外部不可见
  3. 父组件可将状态传入组件内部

组件设计

  1. 组件声明了状态和UI的映射。
  2. 组件有Props/State两种状态，即私有状态和外部传入两种状态。
  3. "组件"可由其他组件拼装而成。

6、生命周期

生命周期.png

7、hooks

  • hooks是React的一种最常用的写法
  • hooks是可以挂到react组件的生命周期上去执行的函数。
  • hooks分为两种：useState、useEffect，也有其他的但也基本都是useState、useEffect两种的封装。

8、useState和useEffect

1. useState

  • 传入一个初始值，返回一个状态，和set该状态的函数，用户可以通过调用该函数，来实现状态的修改。

2. useEffect

  • 传入一个函数，和一个数组，数组是状态的数组，称作依赖项，该函数在mount时，和依赖项被set的时候会执行。
  • 有"副作用"的函数，要传入useEffect来执行。副作用代表除了单纯的计算之外，还要做其它的一些事情，比如网络请求，更新DOM，localStorage存储数据等。

9、React的实现Problems

  1. JSX不符合JS标准语法，react不能直接在浏览器运行

解决办法：就是转译 加一个transpile

  1. 返回的JSX发生改变时, 如何更新DOM

解决办法：

  • 由于DOM树全部更新耗费太多，因此，只更新 新的JSX和旧的JSX之间的 different不同的部分，将DOM的耗时降到最低，这样就可以将DOM操作的耗时降到最低，实现了性能提升。
  • 但要注意diff算法本身不能太耗时，时间复杂度不能太高，否则JS内部运行时语法成本太高。
  • 两者之间需要平衡：diff尽可能小，计算diff的过程时间尽可能短。
  1. State/Props更新时, 要重新触发render函数

10、compile和transpile

  • compile是编译
  • transpile是转义。把一个语法的语言转译另外一个语言(例如C++转成JS)
  • HTML本质上是一个树状结构, 每一个节点可以有自己的属性, 可以表示成JSON数据格式, 因此可以转译

11、Virtual DOM (虚拟DOM)

  • Virtual DOM是一种用于和真实DOM同步, 而在JS内存中维护的一个对象, 它具有和DOM类似的树状结构, 并和DOM可以建立一一对应的关系.
  • 它赋予了React声明式的API, 您告诉React希望让UI是什么状态, React就确保DOM匹配该状态. 使您可以从属性操作,事件处理和手动更新DOM这些在构建应用程序时必要的操作中解放出来

真实的DOM不是JS的一个对象，而是浏览器内部维护的一个状态，我们只能通过DOM接口修改，不能直接随意修改。

但我们可以声明一个和DOM具有一一对应关系的变量，每次更新的时候是一个新的virtualDOM，和旧的做对比将diff算出来，再去更新。

四、个人总结

  • React是用于构建用户界面的JavaScript库。
  • 框架特点
  1. 声明式设计：React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React能高效更新并渲染合适的组件。
  2. 组件化: 构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。
  3. 高效：React通过对DOM的模拟，最大限度地减少与DOM。
  4. 灵活：无论你现在使用什么技术栈，在无需重写现有代码的前提下，通过引入React来开发新功能。
avatar
文章
阅读
粉丝