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

中国青年
51 阅读2分钟

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

React实现

  1. JSX语法不符合JS标准语法： 需要将JSX文件转义为JS文件

  2. 返回的JSX发生改变时，如何更新DOM： Virtual DOM（虚拟DOM树）

  3. State/Props更新时，要重新触发render函数： Diff算法

    dom挂载很消耗性能，使用diff来判断更新的地方（diff函数本身也要低消耗） 更新速度少<--->计算速度快 diff原则（O(n) 只遍历一遍）：

    • 不同类型元素：替换，
    • 同类型Dom：更新，
    • 同类型组件元素：递归 -->父组件改变，子组件会递归render

React状态管理库-->将状态抽离到UI外部统一管理

使用管理库降低复用性，是一个强耦合，只出现在实际业务代码中，lib是不会用的，所以在store内放共享状态 store可以理解为组件全体的state

状态机：

image.png

应用级框架

  1. NEXT.js

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

  1. MODERN.js

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

  1. Blitz

无API思想的全栈开发框架，开发过程中无需写API调用与CRUD逻辑，适合前后端紧密结合的小团队项目。

React的实现

Problems 01.JSX 不符合JS标准语法

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

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

problem1

"use strict";

const Test = props =>{
const {
url
}= props;
return /*#__PURE__*/React.createElement( ""div",{
className: "root"
}，/*#__PURE__*/React.createElement( "img"，{
src: url
}));
};

复制代码

image.png

problem2

Virtual DOM(虚拟DOM)

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

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

avatar
文章
阅读
粉丝