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

什么是React？

A javaScript library for building user interface

React 设计思路

UI编程痛点如下：

1. 状态更新，UI无法自动更新，需要手动调用DOM
2. 欠缺代码层面的封装和隔离，代码层面没有组件化
3. UI直接的数据依赖关系需要手动去更新。

转换式系统： 给定输入，求解输出（多用于编译器，数值计算）

响应式系统： 监听事件，消息驱动（多用于监控系统，UI界面）。也就是事件发生——>触发回调——>状态更新——>UI自动更新

组件化

• 组件的组合、原子组件
• 组件内拥有状态，外部不可见
• 父组件可将状态传入组件内部

组件设计

• 状态和UI相映射
• 有props和state两种状态
  • state为私有属性，props实现属性复用
• 组件可以由其他组件拼装而成

React的实现

声明式编程。（所有框架都是声明式） 返回的内容（虚拟dom）并不能直接运行在浏览器，主要有以下问题：

1. jsx不符合js标准
2. jsx不能直接操作DOM

什么是虚拟DOM？

虚拟DOM（virt DOM）是一种用于和真实的DOM同步，在js内存中维护的具有类似DOM的树状结构的对象，可以和DOM建立一一对应的关系。

如何进行Diff

• 不同类型元素——>替换
• 同类型DOM元素——>更新
• 同类型组件元素——>递归

性能问题

当父组件状态改变，子组件、子节点都会发生递归式的改变。

React的状态管理库

核心：将【需要共享的状态】抽离到UI外部进行统一管理。

常用状态管理库

• redux管理库
• xstate
• mobx
• recoil

哪些状态适合放在管理库？

区分状态被哪些组件所拥有，共用性越强越适合放在管理库

状态机

当收到外部事件，迁移到下一个状态。