响应式系统与React | 青训营

icetm_jim
82 阅读2分钟

前置知识

1.HTML，CSS，JS基础

2.基础的数据结/算法知识，如二叉树，深度遍历等

3.会使用浏览器提供的DOM API 来修改DOM 更新UI

💖内容概要

1.React的历史与应用

在这里插入图片描述 2010年 Facebook在其php生态中，引入了xhp框架，首次引入了组合式组件的思想，启发了后来的React的设计 2011年 Jordan Walke 创造了FaxJS，也就是后来的React原型： 在这里插入图片描述

2012年 在Facebook收购Instagram后，该FaxJS项目在内部得到使用，Jordan Walke基于FaxJS的经验，创造了React 在这里插入图片描述 在这里插入图片描述

2.React的设计思路

UI编程痛点

在这里插入图片描述

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

响应式与转换式

响应式系统 在这里插入图片描述

响应式编程

前端UI 在这里插入图片描述

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

组件化

在这里插入图片描述 总结

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

状态归属问题

在这里插入图片描述 状态归属于两个节点向上寻找到最近的祖宗节点 S在这里插入图片描述

组件设计

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

🙌提问：组件代码会是什么样的？

  1. 组件内部拥有私有状态State
  2. 组件接受外部的Props状态提供复用性
  3. 根据当前的State/Props,返回一个UI

生命周期

在这里插入图片描述

3.React(hooks)的写法

在这里插入图片描述 在这里插入图片描述

4.React的实现

Problems

  1. JSX不符合JS标准语法
  2. 返回的JSX发生改变时，如何更新DOM
  3. State/Props更新时，要重新触发render函数

Problem1

在这里插入图片描述

Problem2

在这里插入图片描述 在这里插入图片描述

How to Diff？

在这里插入图片描述 在这里插入图片描述

5.React状态管理库

核心思想

在这里插入图片描述

推荐

在这里插入图片描述

状态机

在这里插入图片描述 当前状态，收到外部事件，迁移到下一个状态

6.应用及框架科普

# 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述

avatar
文章
阅读
粉丝