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

一、本堂课重点内容：

• React 历史与应用
• React 的设计思路

二、详细知识点介绍：

React 历史与应用

React 的设计思路

UI编程痛点

如：当我们切换手机配置时候，手机价格随之变化。传统做法，给每一个配置设置点击事件然后写一个回调函数，当任何一个回调被触发都要调接口更新价格。

响应式与转换式

响应式编程

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

组件化

左侧的树状内容不是DOM树，DOM树不是js内部的变量，而是浏览器的东西，我们可以通过调用js去修改DOM，DOM与实际开发的UI存在一个一一对应的关系，左侧的划分是我们设计规划。

总结

1. 组件是 组件的组合/原子组件
2. 组件内拥有状态，外部不可见（组件拥有自己的状态）
3. 父组件可将状态传入组件内部（父组件可以控制子组件）

状态归属问题： 价格状态归属于哪一个节点

如果需要状态共享，应该归属于两个节点向上最近的祖宗节点

价格如何改变？

思考：

1. React是单向数据流，还是双向数据流？ 单向数据流
2. 如何解决状态不合理上升的问题？
3. 组件的状态改变后，如何更新DOM？

组件设计

1. 组件声明了状态和UI的映射
2. 组件有props（传入）/state（声明）两种状态
3. ‘组件’ 可有其他组件拼装

组件代码的样子

1. 组件内部拥有私有状态 state
2. 组件接受外部的 props 状态提供复用性
3. 根据当前的state/props，返回一个ui

生命周期