这是我参与「第五届青训营 」伴学笔记创作活动的第16天，前几天也是在认真的过年呢，今天是年后字节青训营的第一节课今天学习的内容主要和React有关，以下内容是我做的课堂笔记：

React的历史与应用

先来说应用，它可以用来做前端应用开发（facebook），移动原生应用开发（Oculus），结合Electron进行桌面应用开发。关于React的历史，需要记住一个人Jordan Walke，他在React的发展中有着重要的地位。

React的设计思路

UI编程的痛点：

1.状态更新，UI不会自动更新，需要手动地调用DOM进行更新。2.欠缺基本的代码层面的封装和隔离，代码层面没有组件化。3.UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到回调地域（Callback Hell）。

上面提到了UI编程，那么UI编程是什么呢？我在百度上搜索的结果是：UI即User Interface（用户界面）的简称。UI设计则是指对软件的人机交互，操作逻辑，界面美观的整体设计。

响应式和转换式

图片中，上面的蓝色字体是对转换式和响应式的介绍，下面的蓝色字体是它们的具体应用。

图片中UI更新的前三步是响应式系统，因此这四步是响应式编程

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

组件化

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

组件设计：1.组件声明了状态和UI的映射。2.组件有Props/state两种状态。3.“组件”可由其他组件拼装而成

组件内部拥有一个私有状态State，组件接受外部的Props状态提供复用性，根据当前的State/Props返回一个UI

状态归属问题

状态归属于两个节点向上寻找到最近的祖宗节点。

注意：React是单向数据流。

React（hooks）的写法

主要是两个函数，其它的都是在这两个函数上的变化。

图片中有个使用法则：不要在循环、条件、嵌套函数中调用Hook

React的实现

可以归成三个问题（可见图中）第一个问题的话直接转译即可，第二个问题： 第二个问题的解决用到了Virtual DOM（虚拟DOM）由图中可以看出它的用途，下面这张图片是在青训营课堂上截取的，这张图片抽象地表达了是怎么解决问题二的（其中的Diffing本人也不是特别懂）：

React状态管理库

它的核心思想就是：将状态抽离到UI外部进行统一管理。

小结

以上就是今天的课堂笔记了，还有很多内容需要自己去摸索（Diffing），加油新的一年要更努力才行，谢谢阅读。