响应式系统与React（上）｜ 青训营笔记

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

React的设计思路

UI编程的痛点

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

响应式与转换式

前端UI

响应式编程设计的要点：

1. 状态更新，UI自动更新。 “状态更新，UI不会自动更新，需要手动地调用DOM进行更新。”
2. 前端代码组件化，可复用，可封装。 “欠缺基本的代码层面的封装和隔离，代码层面没有组件化。”
3. 状态之间的互相依赖关系，只需声明即可。 “UI 之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”。”

React的设计思路-状态归属问题

• 父组件将函数传递给子组件，以改变父组件值：表现为子传父；

思考：

1.React是单向数据流，还是双向数据流？

单向；

React的设计思路-组件化

• 组件声明了状态和UI的映射。
• 组件有Props/State两种状态。
  1. 内部的私有状态：status
  2. 外部状态：Props：由外部传来
• “组件”可由其他组件拼装而成。

组件化的要点

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

React的设计思路-响应式编程：组件化代码

React的设计思路-生命周期

• new props setState 和 forceUpdate 都会再执行一次render