响应式系统与react(1) | 青训营笔记

SUMU
102 阅读3分钟

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

响应式系统与React(1)

前置知识

  1. HTML、CSS和JavaScript基础
  2. 基础的数据结构/算法知识，如二叉树，深度遍历等
  3. 会使用浏览器提供的DOM API来修改DOM，更新UI

课程内容概要

  1. React的历史和应用
  2. React的设计思路
  3. React（hooks）的写法
  4. React的实现
  5. React状态管理库
  6. 应用及框架科普

1.React的历史和应用

React的应用

  1. 前端应用开发，如Facebook、Instagram、Netflix网页版
  2. 移动原生应用开发，如Instagram、Discord、Oculus
  3. 结合Electron，进行桌面应用开发

React的历史

  • 2010年 Facebook在其PHP生态中，引入了xhp框架，首次引入了组合式组件的思想，启发了后来的React的设计
  • 2011年 Jordan Walke创造了FaxJS，也就是后来的React原型
  • 2012年 在Facebook收购Instagram后，该FaxJS项目在内部得到使用
  • 2013年 React正式开源
  • 2014年-今天 围绕React的新工具/框架开始涌现

2.React的设计思路

UI设计痛点

image.png

  1. 状态更新，UI不会自动更新，需要手动的调用DOM进行更新
  2. 欠缺基本的代码层面的封装和隔离，代码层面没有组件化
  3. UI之间的数据以来关系，需要手动维护，如果以来链路长，则会遇到“Callback Hell”。

响应式与转换式

image.png

因为在写前端代码时，遇到痛点问题，这种过程式或者说转换式系统使用起来是很难受的，所以我们需要一种新的编程范式去帮助我们解决问题

3.React的设计与实现

响应式与编程

image.png

image.png

  1. 状态更新，UI自动更新
    痛点1：“状态更新，UI不会自动更新，需要手动的调用DOM进行更新”
  2. 前端代码组件化，可复用，可封装
    痛点2：“欠缺基本的代码层面的封装和隔离，代码层面没有组件化”
  3. 状态之间的相互依赖关系，只需要声明即可
    痛点3：“UI之间的数据以来关系，需要手动维护，如果以来链路长，则会遇到“Callback Hell”。”

组件化

image.png

DOM是浏览器内部的一种结构，只能通过JavaScript的API调用浏览器中的DOM结构

总结

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

状态归属问题

当前价格属于Root结点

image.png

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

当前价格如何改变？

  • 将onChargeValue()向下传递

思考

  1. React是单项数据流还是双向数据流？
    答：单向数据流：只能父组件传递东西给子组件，不能子组件传递东西给父组件。但子组件可以改变父组件的状态。
  2. 如何解决状态不合理上升的问题？
    答：通过状态管理库解决
  3. 组件的状态改变后，如何更新DOM？
    答：在第四节React实现中会提到

组件设计

  1. 组件声明了状态和UI的映射；
  2. 组件有 Pros/State 两种状态；
  3. “组件”可由其他组件拼装而成。

组件代码应该是什么样子的？

  1. 组件内部拥有私有状态State
  2. 组件接受外部的Pros状态提供复用性
  3. 根据当前的State/Pros，返回一个UI
avatar
文章
阅读
粉丝