这是我参与「第五届青训营 」伴学笔记创作活动的第6天
一、本堂课重点内容：
- React的设计思路
- React的设计与实现--组件化
- React的实现--Problem
二、详细知识点介绍：
React的设计思路--响应式与转换式
- 转换式系统：给定输入求解输出，例如编译器以及数值计算
- 响应式系统：监听事件，消息驱动，监控系统，UI界面
注意：转换式系统不等于响应式系统
React的设计与实现--组件化
总结：
- React中，组件时组件的组合/原子组件
- 组件内拥有状态，外部不可见
- 父组件可以将状态等数据传入组件内部，例如父子组件之间的传值
React的设计思路--组件化
组件设计
- 组件声明了状态和UI的映射。
- 组件有Props/State两种状态。
- “组件”可由其他组件拼装而成。
组件代码
- 组件内部拥有私有状态State
- 组件接受外部的Props状态提供复用性
- 根据当前的State/Props，返回一个UI
React的实现--Problem
Virtual DOM(虚拟DOM) 虚拟DOM是一个用于和真实DOM同步，而在JS内存中维护的一个对象，它具有DOM类似的树状结构，并和DOM可以建立一一对应的关系。
它赋予了React声明式的API：你告诉React希望让UI是什么状态，React就确保DOM匹配该状态，这时你可以从属性操作，事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来，简单来说就是React可以不用直接去操纵DOM，而是去操纵虚拟DOM，从而达到同样的效果。
什么是Diff算法？
diff算法可以看作是一种对比算法，对比的对象是新旧虚拟Dom。虚拟Dom是呈树状的，所以我们可以发现，diff算法中充满了递归。总结起来，其实diff算法就是一个 patch —> patchVnode —> updateChildren —> patchVnode —> updateChildren —> patchVnode这样的一个循环递归的过程
