这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天
React的历史与应用
- 2010年 Facebook在php生态中，引入xph框架，引入组合式组件 启发的React
- 2011 FaxJS React原型
- 2012 Facebook收购Instagram后，FaxJS在项目内部使用，基于FaxJS创造了React
- 2013 React正式开源
- 2014-今天 React各种生态和工具大爆发
React的设计与实现
UI编程痛点
- 状态更新，UI不会自动更新，需手动更新
- 卡按却封装隔离 未组件化
- UI长链路相互依赖，遇到 “Callback Hell”
设计与实现
-
UI跟随状态更新
-
代码组件化 可复用 可封装
- 原子组件
- 组件内状态 外部不可见
- 父组件可将状态传入组件内部
-
状态之间依赖 只需声明
状态归属问题
状态归属于两个节点向上寻找到最近的祖宗节点
组件设计
- 组件声明状态和UI映射
- 组件有Props（外部提供复用性） / State（内部状态） 两种状态
- 组件可以由组件拼装
组件化
1.组件内部拥有私有状态State 2.组件接受外部的Props状态提供复用性 3.根据当前的State/Props，返回一个UI
生命周期
React（hooks）的写法
React的实现
Problems
- JSX不符合JS标准语法
-
返回JSX发生改变时，如何更新DOM
-
根据diff算法只更新需要更新的部分虚拟DOM
- 虚拟Dom是一种用于和真实DOM同步 而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，和DOM直接建立一一对应关系；赋予了React声明式API
-
How to Diff？
- 不同类型的元素——替换
- 同类型的DOM元素——更新
- 同类型的组件元素——递归
-
-
State/Props更新时，要重新触发render（组件函数本身）函数
React状态管理库
核心思想
- 将状态抽离到UI外部进行统一管理
