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

SSRRFF
105 阅读4分钟

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

React的历史与应用

历史

  1. 2010-react最初迹象FB引入xhp到php代码中，同年开源。Xhp允许创建复合组件，后期引入至react中。
  2. 2011-早期原型JordanWalke创建FaxJs，react的早期原型，支撑了FB的一套搜索组件。
  3. 2012-fb新变化FBAD管理难度加深，FB需要找到更好解决方案，JordanWalke基于原型创建了react。4月9日，FB收购Instagram，Instagram想使用FB的新技术。基于此，FB受压之下考虑解耦并开源React。这些大部分由PeteHunt完成。
  4. 2014-扩张之年React逐渐获得了声誉，开始走向潜在用户中的早期使用者。
  5. 2015-走向稳定2015年早期：Flipboard发布React Canvas1月：Netflix表示喜欢React2015年早期:Airbnb开始使用React1月28日至29日：Reactjs Conf 2015大会，FB在一次技术演讲中发布了React Native的第一个版本。
  6. 2015-走向稳定2015年早期：Flipboard发布React Canvas1月：Netflix表示喜欢React2015年早期:Airbnb开始使用React1月28日至29日：Reactjs Conf 2015大会，FB在一次技术演讲中发布了React Native的第一个版本。
  7. 2018-趋于稳定3月1日-2日：ReactCONF冰岛大会，DanAbramov发表超越React16演讲

应用

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

React的设计思路

UI编程痛点

  1. 状态更新，UI不会自动更新，需要手动地调用DOM进行更新
  2. 欠缺基本的代码层面的封装和隔离，代码层面没有组件化
  3. UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”
  4. 性能低，每一次手动更新DOM会导致整个页面刷新，性能低。

响应式与转换式

转换式系统：给定输入求解输出，编译器，数值计算。
响应式系统：监听事件，消息驱动，监控页面，UI界面。

React的设计的响应式系统

  1. 状态更新，UI自动更新。
  2. 前端代码组件化，可复用，可封装。
  3. 代码之间的互相依赖关系，只需声明即可。
  4. 通过虚拟DOM实现部分DOM刷新。

React状态提升问题

当多个组件需要共享同一个数据时i，这个数据存在的位置应该位于所有共享组件的父节点以上。
注意：

  • React是单向数据流

React (hooks)的写法

useState

hooks写法不是直接修改变量，而是通过函数修改变量，实现控制

import {useState} from 'react'
const [count,setCount] = useState(0)
//此时修改count就需要调用setCount函数
setCount(count + 1)

hooks提供的工具

  1. useState ----> 相当于类组件中的 constructor 对数据做初始化
  2. useEffect----> 对数据进行挂载，更新。在useEffect的 return()=>{ } 中会执行卸载。
  3. useReducer()可以去了解一下，三个参数。一般可用useState()实现相同效果
  4. useMemo() 函数值返回依赖，值改变会重新计算。
  5. useRef 定一个不用渲染页面的值  const searchParmas = useRef(null)
  6. useContext 定义在父组件中，接收context对象，返回对象当前值，在父组件发生变化时，重新渲染子组件。
  7. 自定义hooks， 需要使用‘use’开头。

React的实现

React实现的问题

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

问题的解决

  1. 解决JSX问题，通过babel将return中的内容转换为React.createElement()
  2. 解决频繁更新DOM的问题，使用虚拟DOM，使用Diffing算法实现只更新修改了的DOM。

Diffing算法实现原则

  • 不同类型的元素-替换
  • 同类型的DOM元素-更新
  • 同类型的组件元素-递归

React状态管理库

React状态管理库将state（状态）抽离到组件外部，进行统一管理。

常见的状态管理库：redux、xstate、mobx、recoil。
react状态管理解决了state提升导致的问题。

状态机

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

应用级框架科普

  1. NEXT.js
    是一个轻量级的 React 服务端渲染应用框架。
  2. MODERN.js
    这个框架想将现代前端的方方面面都包含在内。涵盖了响应式页面、微前端、桌面应用、低代码等等技术。
  3. Blitz.js
    Blitz 是一个基于 Next.js、功能齐备，并提供一个能消除 REST/GraphQL 依赖的零 API 数据抽象层的框架
avatar
文章
阅读
粉丝