带你认识React | 青训营笔记

Rona南柯一梦
79 阅读5分钟

响应式系统与React | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的第3天，今天总结的笔记是由牛岱老师讲解的《响应式系统与React》课程。

在学习这节课程前，我们需要掌握如下基础知识：

image.png

有了上面这些基础后，就可以开始这节课程的学习啦！

一、React的历史与应用

React应用场景

  • 前端应用开发，如Facebook,Instagram,Netflix网页版

  • 移动原生应用开发,如Instagram,Discord,Oculus

  • 结合Electron,进行桌面应用开发

二、React的设计思路

UI编程的痛点

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

响应式与转换式 & 响应式编程

image.png

响应式系统可以抽象地描述为下面四个卡片：

image.png

由此我们产生了对React框架的期望：

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

image.png

组件化

以下我们进行了语义化的组件隔离：

image.png

注意： 左侧的图不是DOM树，DOM树不是JS内部的变量， DOM本身是浏览器内部维护的状态， 我们只能通过调用JS的DOM-API去修改DOM， 这不代表DOM是JS的变量，可以去随意的修改它。DOM和UI是一一对应的关系。

总结:

  • 组件是组件的组合/原子组件
  • 组件内拥有状态， 外部不可见
  • 父组件可将状态传入组件内部

组件设计：

  • 组件声明了状态和UI的映射

  • 组件有Props/State两种状态

    • 内部的私有状态State, 外部传递接口的Props状态

  • "组件"可以由其他组件拼装而成

组件代码会是什么样子?

  • 组件内部拥有私有状态State
  • 组件接受外部的Porps状态提供复用性
  • 根据当前的State/Props, 返回一个UI

状态归属问题

直接给结论： 永远是父组件给子组件传东西(函数/变量), 而子组件不能给父组件传东西, 子组件不能改变父组件的状态, 子组件只能通过接受父组件传递过来的函数, 进而改变父组件的状态。

生命周期

image.png

三、React(hooks)的写法

image.png

image.png

useState

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

useEffect

传入一个函数, 和一个数组, 数组是状态的数组, 称作依赖项, 该函数在mount(挂载)时, 和依赖项被set的时候会执行.

注意：

有"副作用"的函数, 要传入useEffect中来执行, 副作用代表除了单纯的计算之外, 还要做其他的一些事情, 例如网络请求/更新DOM/更新localStorage/存储数据等等。

Hook使用法则

不要在循环, 条件或者嵌套中调用Hook

四、React的实现

React的实现 - Problems

  • JSX不符合JS标准语法
  • 返回的JSX发生改变时, 如何更新DOM
  • State/Props更新时, 要重新触发render函数

JSX不符合JS标准语法

解决办法是transpile(转义), 这里请大家理解一下compile和transpile的区别:

compile是编译, transpile是转义:把一个语法的语言转成另外一个语言(例如C++转成JS)

HTML本质上是一个树状结构, 每一个节点可以有自己的属性, 可以表示成JSON数据格式, 因此可以转义

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

真实DOM是浏览器内部维护的状态, 我们只能通过DOM接口去修改DOM, 而不能直接拿到DOM就随便更改

  • 指令式编程(面向过程)

    • 一步一步, 手动告诉程序怎么做

  • 声明式编程(面向对象)

    • 发出一个指令, 就把事情办完了;

    • 现在主流的前端框架都是声明式编程

    • 为什么不把声明式编程的方式植入浏览器中?

      • 浏览器作为应用平台, 不能提供更高层次的东西, 这样会把自由度降低

  • 响应式编程

    • 是声明式编程的一种, 当一个事物状态改变时, 改变其他事物的状态

Virtual DOM (虚拟DOM)

Virtual DOM是一种用于和真实DOM同步, 而在JS内存中维护的一个对象, 它具有和DOM类似的树状结构, 并和DOM可以建立一一对应的关系.

它赋予了React声明式的API, 您告诉React希望让UI是什么状态, React就确保DOM匹配该状态. 使您可以从属性操作,事件处理和手动更新DOM这些在构建应用程序时必要的操作中解放出来

React弊病: 当父组件发生状态改变时, 它的所有子节点要全部更新

image.png

How to Diff?

完美的最小Diff算法, 需要O(n*3)的复杂度

权衡更新次数少和计算速度快的要求, 实际我们牺牲了理论最小Diff, 换取时间, 得到了O(n)复杂度的算法

即Heuristic O(n) Algorithm(启发式O(n)算法)

image.png

五、React状态管理库

核心思想

image.png

列举了一些状态管理库

image.png

状态机

image.png

六、应用级框架科普

安利以下三个框架：

image.png

七、课后思考和总结

经过本节课的学习，我了解到了很多关于React的基础知识，课程大致分为六个板块，从React的历史开始介绍，到它的设计思路、写法、实现以及状态管理库的介绍和最后应用级框架的科普，整个课程对React的介绍非常全面，收益良多。

avatar
文章
阅读
粉丝