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

安笛
41 阅读5分钟

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

    以下为日常上课笔记，有关于响应式系统与React的一些基础内容

  • 前置知识

    • HTML, JS, CSS基础

    • 基础的数据结构/算法知识，如二叉树，深度遍历等

    • 会使用浏览器提供的DOM API来修改DOM,更新Ul

  • 应用

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

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

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

  • 历史

    • 2010年，Facebook在其php生态中，引入了xhp框架，首次引入了组合式组件的思想.启发了后来的React的设计。

    • 2011年，Jordan Walke创造了FaxJS. 也就是后来的React原型

    • 2012年，在Facebook收购Instagram后，该FaxJS项目在内部得到使用，Jordan Walke基于FaxJS 的经验，创造了React

    • 2013年，React 正式开源，在2013 JSConf上Jordan Walke介绍了这款全新的框架

    • 2014年——今天，生态大爆发 各种围绕React的新工具/新框架开始涌现

  • React的设计思路

    • UI编程痛点

      • 一处状态改变，需要随之改变其他处的UI

      • 状态更新，UI 不会自动更新，需要手动地调用DOM进行更新

      • 欠缺基本的代码层面的封装和隔离，代码层面没有组件化

      • UI之间的数据依赖关系，需要手动维护、如果依赖链路长，则会遇到"Callback Hell"

    • 响应式与转换式

      • 两种系统

      • 响应式系统

      • 前端UI

      • 特点

        • 状态更新，UI自动更新

        • 前端代码组件化，可复用，可封装

        • 状态之间的互相依赖关系，只需声明即可

      • 响应式编程

        • 可能的样子

    • 组件化

      • 组件

      • 总结

        • 组件是组件的组合/原子组件

        • 组件内拥有状态，外部不可见

        • 父组件可将状态传入组件内部

      • 组件设计

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

        • 组件有Props/State 两种状态

        • 组件”可由其他组件拼装而成

        • 组件内部拥有私有状态State

        • 组件接受外部的Props状态提供复用性

        • 根据当前的State/Props， 返回一个Ul

    • 状态归属问题

      • 「当前价格」状态属于谁?

        • 「当前价格」属于Root节点!

      • 状态归属于两个节点向上寻找到最近的祖宗节点

      • 「当前价格」如何改变?

        • 将onChangeValue() 向下传递
          Javascript中,函数是「一等公民)」

      • React是单向数据流,还是双向数据流?

        • 单向数据量，父组件传递给子组件

        • 父组件传递函数给子组件，子组件执行后可改变父组件状态

      • 如何解决状态不合理上升的问题?

        • 状态管理库

      • 组件的状态改变后，如何更新DOM?

        • React的DOM更新算法

    • 生命周期

      • 图

  • React (hooks) 的写法

    • example

    • HOOKS写法新手入门

      • useState

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

      • useEffect

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

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

      • Hook使用法则

        • 不要在循环，条件或嵌套函数中调用Hook。

  • React的实现

    • JSX

      • JSX是一种嵌入式的类似XML的语法。 它可以被转换成合法的JavaScript，尽管转换的语义是依据不同的实现而定的。 JSX因React框架而流行，但也存在其它的实现

    • 问题

      • JSX不符合JS标准语法

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

      • State/Props更新时，要重新触发render函数

    • 例子

    • Virtual DOM ( 虚拟DOM)

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

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

      • How to Diff?

        • 完美的最小Diff算法，需要O(n^3)的复杂度

        • 牺牲理论最小Diff,换取时间，得到了O(n)复杂度的算法——Heuristic O(n) Algorithm

  • React状态管理库

    • 核心思想

      • 将状态抽离到UI外部进行统一管理

    • 推荐

    • 状态机

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

  • 应用级框架科普

    • NEXT.js

      • 硅谷明星创业公司Vercel 的React开发框架，稳定，开发体验好，支持Unbundled Dev、SWC等，其同样有Serverless一键部署平台帮助开发者快速完成部署。口号是"Let's Make Web Faster"

    • Modern.js

      • 字节跳动Web Infra团队研发的全栈开发框架，内置了很多开箱即用的能力与最佳实践，可以减少很多调研选择工具的时间

    • Blitz
      • 无API思想的全栈开发框架，开发过程中无需写API调用与CRUD逻辑，适合前后端紧密结合的小团队项目
avatar
文章
阅读
粉丝