这是我参与「第五届青训营」笔记创作活动的第10天。

React设计思路

传统UI编程痛点
    状态更新，UI不会自动更新，需要手动的调用DOM进行更新；
    欠缺基本的代码层面的封装和隔离，代码层面没有组件化；
    UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到"Callback Hell"；
    
给定[输入]求解[输出]/编译器/数值计算——转换式系统 
                      ≠
监听事件、消息驱动/监控系统/UI界面——响应式系统

响应式系统
    事件 ——> 执行既定的回调 ——> 状态变更
前端UI
    事件 ——> 执行既定的回调 ——> 状态变更 ——> UI更新
    
响应式编程
    状态更新，UI自动更新；
    前端代码组件化，可复用，可封装；
    状态之间的互相依赖关系，只需声明即可；
    
组件化
    组件是组件的组合/原子组件；
    组件内用后状态，外部不可见；
    父组件可将状态传入组件内部；
    
    组件声明了状态和UI的映射；
    组件有Props/State两种状态；
    组件可由其他组件拼装而成；
    
    组件内部拥有私有状态State；
    组件接收外部的Props状态提供复用性；
    根据当前State/Props，返回一个UI；

React的设计思路——生命周期

React（hooks）写法

React的实现

返回的JSX发生变化时，如何更新DOM？
    Virtual DOM（虚拟DOM）
        虚拟DOM是一种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树
        状结构，并和DOM可以创建一一对应的关系；
        它赋予了React声明式的API：您告诉React希望让UI是什么状态，React就确保DOM匹配该状
        态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时的必要操作中解
        放出来；