这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天
React设计思路
响应式与转换式
转换式
给定输入求解输出
响应式系统有四个显著的特点：
即 时响应（responsive）回弹性（resilience）弹性（elastic）消息驱动（message driven）
响应式
监听时间、消息驱动 我简单理解就是像我们前端开发捏，就不像我们写题的c++
- 状态更新，UI 自动更新;状态更新，UI 不会自动更新，需要手动地调用 DOM 进行更新。
- 前端代码组件化，可复用，可封装;欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
- 状态之间的互相依赖关系，只需声明即可;UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到Callback Hell
命令式：告诉你一步一步做什么，比如，你先放米，再打开水，然后洗米，然后放进锅里，然后完成做饭
组件化
- 组件是组件的组合/原子组件
- 组件内拥有状态，外部不可见
- 父组件可将状态传入组件内部
状态归属问题
Answer1：React是单向数据流，永远只有父组件给子组件传递，但不代表子组件不能改变父组件的状态
Answer2：状态管理库
Answer3：每次调用 render() 时， react 都会创建一个新的虚拟 DOM，其中根节点是调用其渲染函数的组件。当组件或其任何子组件的状态或道具发生变化时，将调用 render() 函数。render() 函数从根开始销毁所有旧的虚拟 DOM 节点，并创建一个全新的虚拟 DOM。
组件设计
- 组件声明了状态和 UI的映射
- 组件有 Props/State 两种状态
- “组件”可由其他组件拼装而成
生命周期
React（hooks）写法
Virtual DOM(虚拟DOM)
VirtualDOM 是一种用于和真实 DOM 同步，而在JS 内存中维护的一个对象，它具有和 DOM 类似的树状结构，并和DOM 可以建立一一对应的关系 它赋予了 React 声明式的API: 您告诉 React 希望让UI是什么状态，React 就确保 DOM 匹配该状态。这使您可以从属性操作、事件处理和手动 DOM更新这些在构建应用程序时必要的操作中解放出来
状态管理库
核心思想：将状态抽离到UI外部进行统一管理
