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

卓怀芋
112 阅读4分钟

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

一、本堂课重点内容：

  • 本堂课的知识要点有哪些？
  1. 前端应用开发历程
  2. 移动原生应用开发
  3. 结合 Electron 的桌面应用开发
  4. UI 编程痛点
  5. 响应式与转换式
  6. React 设计与实现 - 组件化
  7. React 设计与实现 – 状态归属问题
  8. React 设计与实现 – 生命周期
  9. Live Code
  10. React 的实现基本概要
  11. React 的实现 - Problem 1 & 2
  12. React 的实现 - How to Diff
  13. React 状态管理库 - 核心思想
  14. React 状态管理库 - 推荐
  15. React 状态管理库 - 状态机
  16. React 状态管理库 - Modern.js/Reduck
  17. 应用级框架科普

二、详细知识点介绍：

  • 本堂课介绍了哪些知识点？

react的特点

使用场景：前端应用、移动原生应用（native）、桌面应用（electron）、3D图形/VR/AR etc

历史：FaceBook：xhp - faxjs - react（2013）- now繁荣生态

设计思路

原生UI不会随状态自动更新，欠缺组件化的封装和隔离，数据依赖需要手动维护。UI界面属于响应式系统，监听事件，消息驱动（异步编程）。时间发生-回调函数-状态变更-UI更新。

改进：组件化原则：组件是原子组件或组合，组件内有外部不可见的状态，父组件可将状态传入组件内部。组件要声明状态和UI的映射，有props（外部可改变）/state（组件内部私有）两种状态，根据当前的state/props返回UI。组件可拼装。

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

react是单向数据流，父传子。

react的生命周期

image.png mounting是挂载过程，关注挂载、卸载、改变的函数

hooks：挂在生命周期上执行的函数

react里声明一个新状态需要手动调用useState(0)函数

副作用：一些函数会产生附加影响（改状态/发请求/更新DOM等），要useEffect()解决,有些函数只在挂载时执行一次，避免无法及时更新状态。

useState()传入初始值，返回状态和set该状态的函数

useEffect(()=>{},[])传入函数和状态数组（依赖项），函数在mount时和依赖项被set的时候执行

不要在循环、条件、嵌套中调用hook

react的实现

  1. jsx不符合js语法怎么办？转译

  2. 返回的jsx改变时，如何更新dom？虚拟dom，计算diff。virtual DOM是一种和真实DOM同步，而在js内存中维护的一个对象，有和DOM类似的树状结构，并和真实DOM可以建立一一对应的关系。他赋予了React声明式API，告诉react，UI的状态，react就确保DOM匹配这个状态。

    补充：指令式编程：烧水、开火、C/原生js；声明式编程：下了指令之后自动更新状态，所有前端框架；

  3. state image.png

  • how to diff？

    • 牺牲理论最小diff，换取时间，得到了O(n)复杂度的算法heuristic O(n) algorithm

    • 从根节点开始比较，不同类型元素：替换；同类型DOM元素：更新；同类型组件元素：递归

react状态管理库

将状态抽离到UI外部进行统一管理， 缺点：降低了组件的复用性 准则：考虑被整个app使用？还是被某个组件使用？

image.png 常见的状态组件库：redux、xstate、mobx、recoil

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

应用级框架科普

next

modern.js

blitz

三、实践练习例子：

  • 有什么实践举例帮助理解知识点？
  • hooks
import React,{useState,useEffect} from 'react'
function example(){
    const [count,setCount] = useState(0)
    useEffect(()=>{
        
    })
    return(
        <div>{count}<button onclick={()=>setCount(count+1)}>change</button>
        </div>
    );
 }
  • Modern.js/Reduck
const App=()=>{
    const[{x,y},{incrementX, incrementY}]=useModel(countModel)
    return(<button type="button" onClick={()=>incrementX()}>x+1</button>
    <button type="button" onClick={()=>incrementY()}>y+1</button>
    )
}

四、课后个人总结：

  • 本章有什么知识点不容易掌握？
  • 什么地方容易与其他内容混淆？

五、引用参考：

  • 我参考了哪些外部博客/笔记/文章？
  • juejin.cn/post/717584…
  • 文章中有什么地方是我参考引用了外部博客/笔记/文章的？
avatar
文章
阅读
粉丝