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

ydcgye
78 阅读6分钟

这是我参与「第四届青训营 」笔记创作活动的的第16天

响应式系统与React

1.React的历史与应用

React的应用

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

React的历史

  1. 2010年Facebook在其php生态，引入了xhp框架，首次引入了组合式组件的思想，启发了后来的React
  2. 2011年 Jordan Walke创造了FaxJS，也就是后来的React原型
  3. 2012年 在Facebook收购Instagram后，该FaxJS项目在内部得到使用，Jordan Walke基于FaxJS的经验
  4. 2013年 React正式开源，在2013 JSconf上Jordan Walke介绍了这款全新的框架
  5. 2014年-至今 生态大爆发，各种围绕React的新工具/新框架开始涌现

React特性：

  • 既可以在客户端渲染，也可以在服务端渲染
  • 响应式，当状态变更，ui会自动更新（仅需关心ui以及状态与ui的关系）
  • 性能好，快速渲染
  • 对代码进行组件级别复用封装，利用函数声明，利用js声明

2.React的设计思路

原生JS-UI编程痛点

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

响应式与转换式

  1. 转换式系统
  • 将给定的输入求解输出
  • 如：编译器、数值计算，编译器就是一个复杂的转换式系统
  1. 响应式系统
  • 监听事件发生
  • 消息驱动，当事件发生后做什么事情
  • 如：监控系统，UI界面

响应式系统思路

graph LR
    事件发生 --- 执行既定的事件
    执行既定的事件 --- 状态变更
    状态变更 --- UI更新
  1. 状态更新时，UI自动更新
  2. 前端代码组件化，可复用，可封装
  3. 状态之间的互相依赖，只需声明即可

组件化

  1. 组件是组件的组合或原子组件
  2. 组件有内部状态，外部不可见
  3. 父组件可将状态传入组件内部，接口化概念

状态归属问题
两个组件的状态共享，则这个状态归属于两个节点向上寻找到最近的祖宗节点

组件设计

  1. 组件声明了状态和UI映射关系，即输入状态反射UI
  2. 组件有Props/State两种状态
  3. “组件”可由其他组件拼装而成
graph LR
    组件内部拥有私有状态State --- 组件接受外部的Props状态提供复用性
    组件接受外部的Props状态提供复用性 --- 根据当前的State/Props,返回一个UI

指令式、声明式、响应式的区别

  • 指令式编程
    • 手动告诉计算机这么做
  • 声明式
    • 发出指令，无需底层的东西
  • 响应式
    • 当更改什么时，其有关联的东西会自动进行更新、响应

3.React(hooks)的写法

什么是Hooks

  • React 一直都提倡使用函数组件，但是有时候需要使用 state 或者其他一些功能时，只能使用类组件，因为函数组件没有实例，没有生命周期函数，只有类组件才有
  • Hooks 是 React 16.8 新增的特性，它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性
  • 如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其它转化为 class。现在你可以直接在现有的函数组件中使用 Hooks
  • 凡是 use 开头的 React API 都是 Hooks

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

  • 不会把新的 state 和旧的 state 进行合并，而是直接替换

useEffect
传入一个函数，和一个数组，数组是状态的数组，称作依赖项，该函数在mount，和依赖项被set时候会执行

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

Hooks使用法则

  • 不要在循环，条件或嵌套函数中调用Hook，只能在函数内部的最外层调用 Hook
  • 只能在 React 的函数组件中调用 Hook，不要在其他 JavaScript 函数中调用

Hooks优势

  • 能优化类组件的三大问题（状态逻辑难复用、趋向复杂难以维护、this指向问题）
  • 能在无需修改组件结构的情况下复用状态逻辑（自定义 Hooks ）
  • 能将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据）
  • 副作用的关注点分离：副作用指那些没有发生在数据向视图转换过程中的逻辑，如 ajax 请求、访问原生dom 元素、本地持久化缓存、绑定/解绑事件、添加订阅、设置定时器、记录日志等。以往这些副作用都是写在类组件生命周期函数中的。而 useEffect 在全部渲染完毕后才会执行，useLayoutEffect 会在浏览器 layout 之后，painting 之前执行。

4.React的实现

存在的问题：

  1. JSX不符合JS标准语法
  2. 返回的JSX发生改变时，如何更新DOM
    • React的return值即为Virtual DOM（虚拟DOM）。是一种用于和真实DOM同步，而在JS内存中维护的一个对象。具有和DOM类似的树状结构，并和DOM建立一一对应关系
    • 真实的DOM是浏览器，内部维护的对象。需要利用DOM接口修改DOM，而非直接进行修改
  3. State/Props更新时，要重新触发render函数，即组件本身（其嵌套各层子节点都发生改变）

如何发现差异

一层一层对比DOM树

  1. 不同类型的元素---子树替换
  2. 同类型的DOM元素但属性变化---手动调用DOM接口完成更新
  3. 同类型的组件元素---递归调用

5.React状态管理库

核心思想：将状态（可能被任何组件所用到）抽离到UI外部进行统一管理，实现共享 不足之处：降低组件的复用性

状态机： 当前状态，收到外部事件，迁移到下一个状态

avatar
文章
阅读
粉丝