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

React的设计思路

UI编程的痛点在于

1. 状态更新，UI不会自动更新，需要手动调用DOM接口进行更新
2. JS本身没有代码层面的封装和隔离，代码层面没有组件化的概念
3. UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会出现回调地域

响应式系统

1. 状态更新，UI自动更新
2. 前端代码组件化，可复用，可封装
3. 状态之间的互相依赖关系，只需声明即可

前端响应式编程的过程如下：

组件化

1. 组件是组件的组合/原子组件
2. 组件内拥有状态，外部不可见
3. 父组件可将状态传入组件内部

状态归属

React是单向数据流，只能由父组件传向子组件，所以组件的公共属性一般维护在其父组件上。

React的实现

有三个问题：

1. jsx不符合标准语法

解决方法：React会进行转义

2. 返回的JSX发生改变时，如何更新DOM 浏览器DOM操作很耗时，所以要尽可能少地操作DOM。 就要用到虚拟DOM的概念。

虚拟DOM是一种用于和真实DOM同步，而在JS内存中维护的一个对象，他具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系。他赋予了React声明式的API，你告诉React希望让UI是什么状态，React就确保DOM匹配该状态。

每次组件状态更新时，新旧虚拟DOM会执行Diffing进行比较，不同的部分重新加载，做到尽可能少地操作DOM。

3. State、Props更新时，要重新触发render函数

React状态管理库

状态提升的问题可以用状态管理库来解决。将状态抽离到UI外部进行统一管理。

• redux
• xstate
• mobx
• recoil

状态机

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

应用级别框架

• NEXT.js : VERcel的React开发框架
• MODERN.js ：字节的React全栈开发框架
• Blitz ： 无 API 思想的全栈开发框架

课后作业

1. React组件的render函数，在哪些时机下，会被重新执行？

   1. 当组件的prop和state发生改变时，组件的render函数会重新执行
   2. 当父组件的render函数执行时，子组件的render函数也会重新执行

2. React这种函数式编程，和vue这种基于模板语法的前端框架，有什么优点和缺点

   vue.js： 1.模板和渲染函数的弹性选择； 2.语法简洁，项目创建简洁； 3.渲染速度快，体积更小；

   react: 1.更适合超大型项目，更好的可测试性； 2.同时适用于wen端和原生的app； 3.更大的生态圈，维护的群体更大；

3. React推荐使用组合来进行组件复用，而不是继承，背后有什么考虑？