day6
响应式系统与React | 青训营笔记
这是我参与「第五届青训营 」笔记创作活动的第6天
一、本堂课重点内容:
- 前端应用开发历程
- 移动原生应用开发
- 结合Electron的桌面应用开发
- 响应式编程与转换式
- React 设计与实现 - 组件化、状态归属问题及生命周期
- React的实现
- React状态管理库-核心思想、推荐、状态机等
二、详细知识点介绍:
前置知识
- HTML、CSS、JS基础
- 基础的数据结构/算法知识
- 会使用浏览器提供的DOM API来修改DOM。更新UI
React的设计思路
- 状态更新 UI不会自动更新。需要手动调用DOM进行更新
- 欠缺基本的代码层面的封装和隔离,代码层面没有组件化
- UI之间的数据依赖关系,需要手动维护,如果依赖链路长。则会遇到“Callback Hell”
- 响应式与转换式
- 响应式系统
- 事件->执行既定的回调->状态变更
- 响应式编程
- 状态更新 UI自动更新
- 前端代码组件化、可复用、可封装
- 状态之间的互相依赖关系,只需声明即可
- 组件化
- 组件是组件的组合/原子组件
- 组件内拥有状态。外部不可见
- 父组件可将状态传入组件内部
- 组件设计
- 组件声明了状态好UI的映射
- 组件有Props/State两种状态
- ”组件“可由其他组件拼装而成
- 响应式系统
React的实现
问题:
- JSX不符合JS标准语法
- 返回的JSX反生改变时,如何更新DOM
- State/Props更新时,要重新触发render函数
React状态管理库
核心思想:将状态抽离到UI外部进行统一管理
状态机:当前状态,收到外部事件,迁移到下一个状态
应用级框架科普
- NEXT.JS
硅谷明星创业公司Vercel的React开发框架,稳定,开发体验好,支持Unbundled Dev,swC等其同样有Serverless一键部署平台帮助开发者快速完成部署。口号是”Lct’s Make Web Fastcr”
- MODERN.JS
字节跳动Web Infra团队研发的全栈开发框架内置了很多开箱即用的能力与最佳实践,可以减少很多调研选择工具的时间
- Blitz
无AP1思想的全栈开发框架.开发过程中无需写API调用与CRUD逻辑,适合前后端紧密结合的小团队项目
三、实践练习例子:
1 | function Component(props) { |
1 | import React, { useState } from react'; |
1 | "use strict"; |
1 | import React,useState,useEffect from react'; |
四、课后个人总结:
- React的实现是重难点
- 状态管理库的应用和理解
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Serendipity!