- 这是我参与第五届青训营伴学笔记创作活动的第7天
React历史与应用
- 2010年 Facebook在php生态中，引入xph框架，引入组合式组件 启发的React
- 2011 FaxJS React原型
- 2012 Facebook收购Instagram后，FaxJS在项目内部使用，基于FaxJS创造了React
- 2013 React正式开源
- 2014-今天 React各种生态和工具大爆发
React设计思路
痛点
- 状态更新，UI不会自动更新，需手动更新
- 卡按却封装隔离 未组件化
- UI长链路相互依赖，遇到 “Callback Hell”
解决思路
- UI跟随状态更新
- 代码组件化 可复用 可封装
- 原子组件
- 组件内状态 外部不可见
- 父组件可将状态传入组件内部
- 状态之间依赖 只需声明
状态归属问题
- React 单向数据流？双向数据流？
- 单向 只能父组件传子组件
- 状态不合理上升？
- 见状态管理
- 组件状态改变，更新DOM?
- 见React实现章节
组件化
- 组件声明状态和UI映射
- 组件有Props（外部提供复用性） / State（内部状态） 两种状态
- 组件可以由组件拼装
React（hooks）的写法
hooks简要介绍
React的实现
Problems & Answer
- JSX不符合JS标准语法
- 直接Transpare 转义就可以
- 返回JSX发生改变时，如何更新DOM
- 根据diff算法只更新需要更新的部分 Virtual DOM虚拟DOM
- 一种用于和真实DOM同步 而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，和DOM直接建立一一对应关系
- 赋予了React声明式API
- 根据diff算法只更新需要更新的部分 Virtual DOM虚拟DOM
5. State/Props更新时，要重新触发render（组件函数本身）函数
如何更新
生命周期
React状态管理库
- 将状态抽离到UI外部进行统一管理
- 会降低组件的复用性，组件和Store强关联，Store只会出现在业务中
- 常用React状态管理库
