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

用户9534627805481
240 阅读2分钟

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

重点

  • React历史应用
  • React设计思路
  • React写法和实现
  • React状态管理库

React

React历史与应用

历史

image.png

  • 客户端 服务端都可以渲染
  • 响应式 只要状态变 UI就会变
  • 性能好
  • 组件封装 函数

应用

  • 前端应用开发eg FB,INS Neflix网页版
  • 移动原生应用开发 eg INS
  • 结合Electron进行桌面应用开发

React设计思路

UI编程缺点

  • 状态更新，UI不会自动更新，需要手动调用DOM进行更新
  • 欠缺基本的代码层面的封装和隔离，代码层面没有组件化
  • UI之间数据依赖关系 需要手动维护 如果以来链路过长，则会遇到callback hell 如苹果更改配置 价格会改变

image.png

转换式 响应式

转换式：给定输入 求解输出 响应式：监听事件，一个事情的发生会带来其他的改变

image.png 响应式

image.png image.png

响应式编程

  • 状态更新 UI自动更新
  • 前端代码组件化、可复用、可封装
  • 状态之间的相互依赖关系只需声明

组件化

  • 组件是组件的组合/原子组件
  • 组件内拥有状态，外部不可见
  • 父组件可将状态传入组件内部

image.png 属于root节点

状态归属问题

状态归属于两个节点向上寻找到最近的祖宗节点 React是单向数据，用状态管理库来解决状态不合理上升

组件设计

image.png

image.png

生命周期

image.png

React（hooks）写法

image.png

image.png image.png

例子

计算 image.png

image.png image.png 改变颜色

image.png image.png useEffect

image.png

React实现

image.png

解决JSX不符合JS标准预防

image.png

解决更新dom的问题

image.png

image.png dom不是JS真实的变量！

解决state、prop更新 render问题

image.png

image.png

image.png

React状态管理库

核心思想

将状态抽离到UI外部进行统一管理 image.png

状态库推荐

image.png

状态机

image.png

例子

image.png

image.png

image.png

更改subtitle image.png

应用级框架科普

image.png

总结

这节课课程内容很多 因为没了解过React 后期需要多花时间了解

avatar
文章
阅读
粉丝