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

一、本堂课重点内容：

• 1. UI 编程痛点
• 2. 响应式与转换式
• 3. React 设计与实现 - 组件化
• 4. React 设计与实现 – 生命周期

二、详细知识点介绍：

• 1. UI 编程痛点
  这是一个手机购物页面的网页，这个图右上角有一个当前手机的价格，在右侧配置面板中可以选择手机的型号，还有颜色的选择，这些配置改变后，右上角的手机价格都会改变，如果这个事件用原生的JavaScript来写，不难，但是过程很麻烦，会挂载很多onClick事件，这就不简单了，这就是过程式的编程的特点，这是就是一个简单的改变价格都要写这么多代码，如果后续要实现更多之类的功能，或更麻烦的功能，那代码的复杂量就更大了。 所以总结来说UI编程有3个痛点
• 1.状态更新，UI不会自动更新，需要手动的调用DOM进行更新
• 2.欠缺基本的代码层面的封装和隔离。代码层面没有组件化
• 3.UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”

• 2. 响应式与转换式
  编译器、数值计算是转换式系统（给定输入，求解输出），监控系统，UI界面是响应式系统（监听事件，消息驱动）
  响应式系统

前端UI

所以我们就期望响应式编程会有下面这三点：

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

• 3. React 设计与实现 - 组件化

总结：

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

• 4. React 设计与实现 – 生命周期