响应式系统与React

前置

01 HTML, JS, CSS 02 基础数据结构与算法 03 使用浏览器提供的DOM API来修改DOM，更新UI

01 React历史与应用

01 前端应用开发 02 移动原生应用开发 03 结合Electron进行桌面应用开发

组合式组件思想

02 React设计思路

UI编程的痛点 01 状态更新，UI不会自动更新，需要手动调用DOM进行更新 02 欠缺基本的代码层面的封装与隔离，代码层面没有组件化 03 UI之间的数据依赖关系需要手动维护，若依赖链路过长会导致Callback hell

监听事件，消息驱动 事件->执行既定的回调->状态变更->UI更新

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

组件内拥有状态，外部不可见 父组件可以将状态传入组件内部

1 组件声明了状态和UI的映射 2 组件有Props/State两种状态 3 组件可以有其他组件拼装

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

03 Problems

01 JSX不符合JS标准语法 02 返回的JSX发生改变时如何更新DOM 03 State/Props更新时重新触发render函数

虚拟dom最先是由facebook团队提出的，最先运用在react中，之后在vue2.0版本中引入了虚拟DOM的概念 我们用对象的方式来描述真实的 dom，并且通过对象与真实dom建立了一一对应的关系，那么每次 dom 的更改，我通过找到相应对象，也就找到了相应的dom节点，再对其进行更新。这样的话，就能节省性能，因为js 对象的查询，比对整个dom 树的查询，所消耗的性能要少