这是我参与「第五届青训营」伴学笔记创作活动的第 8 天
React的历史与应用
应用场景
- 前端应用开发
- 移动原生应用开发
- 结合Electron进行桌面应用开发
- 3D对象（WebGL）
发展历史
- 2010，Facebook引入xhp框架，首次引入组合式组件思想，启发了React的设计
- 2011，Jordan Walke创造FaxJS（React原型）
- 2012，Facebook收购Instagram，Jordan Walke创造了React
- 2013，React开源
- 2014至今，生态大爆发
React的设计思路
从UI编程痛点开始
举例：购买手机页面，多个选项均会影响价格，修改JS变量，然后再调api更新UI 原生JS编程的问题：
- 状态更新，UI不会自动更新，要调DOM
- 欠缺基本的代码层面封装隔离，没有组件化
- UI数据依赖关系需要手动维护
响应式与转换式
-
转换式系统
- 给定输入求解输出的过程
- 常用于数据计算
-
响应式系统
- 监听事件（计算成分并不大）
- 适用于UI界面、监控系统
- 事件发生->执行回调->变更状态->更新UI
基于响应式系统的React
解决了三个问题
- 状态更新，UI自动更新
- 前端代码组件化，可封装可复用
- 状态之间相互依赖关系，只需声明即可
组件化
DOM和实际UI存在一一对应关系 组件的特点：
- 组件是组件的组合/原子组件
- 组件内拥有状态，外部不可见
- 父组件可以将状态传入子组件内部
状态归属问题：
- 一个在很多地方都出现的变量，应该属于需要使用它的组件的最近公共父组件（状态上移，是一种不合理的方案）
- 一个变量的修改位置和归属位置不同时，通过将更改函数下传的方式实现修改
- 不是双向过程：因为一次只是单向通讯
组件设计经验：
- 组件声明状态和UI映射
- 组件由props（外部传入）/state（内部私有）状态
- “组件”可由其它组件拼装而成
组件代码会是什么样子？
- 内部拥有state
- 接受外部props
- 根据当前的state&props返回UI
生命周期
- Mounting挂载到DOM上，执行构造函数和render函数
- Updating更新，根据新的值重新计算值，再render
- Unmounting卸载
