这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天
课堂笔记
课程重点内容：
- 设计思路
- hooks写法
设计思路：
UI编程存在痛点：用户切换手机型号和颜色时，需要改变顶部的价格总额。此时利用js改变价格就得先给型号和颜色选项注册点击事件，并且每次切换都需要使用命令式编程来改变价格。
上述案例主要存在以下三个问题：
（1）状态更新，UI不会自动更新，需要手动调用DOM进行更新
（2）欠缺基本的代码层面的封装和隔离，代码层面没有组件化
（3）UI之间的数据依赖关系需要手动维护，如果依赖链路长，则会遇到'Callback Hell'（回调地域）
为解决以上三个问题可以分析出React的设计思路：
（1）状态更新，UI自动更新
（2）前端代码组件化，可复用，可封装
（3）状态之间的互相依赖关系，只需声明即可
具体方案：
（1）响应式编程来实现状态更新，UI自动更新的效果
（2）组件化
组件化的要求：
- 组件是组件的组合/原子组件
- 组件内拥有状态，外部不可见
- 父组件可将状态传入组件内部
（3）状态归属问题
状态上升：由于当前价格需要被型号和颜色共享，所以它应该属于二者的父组件，因为父组件能向子组件传递状态
存在问题：价格在Root组件当中，而事件是在型号选择和颜色选择上触发
解决方法：Root将onChangeValue()函数向下传给型号和颜色面板，再给型号和颜色面板注册点击事件，通过函数改变Root中的价格
（1）由上述只能是父组件给子组件传递状态，所以React是单向数据流
（2）利用React自身的状态管理库实现
（3）diff算法对比虚拟DOM和浏览器的DOM，来实现更新
hooks写法：
useState：传入一个初始值，返回一个状态，和set该状态的函数，用户可以通过调用该函数，来实现状态的修改
useEffect:传入函数和一个数组，数组是状态的数组，称作依赖项，该函数在mount时，和依赖项被set的时候会执行
有'副作用'的函数，要传入useEffect来执行。副作用代表除了单纯的计算之外，还要做其他的一些事情，比如网络请求、更新DOM、localStorage存储数据等
总结：
通过一个小的案例，发现开发时UI编程存在的痛点，引出React三个方面的设计思路分别是：状态改变引起UI自动更新、组件化、状态之间的依赖。利用响应式编程来达到状态改变UI自动更新的效果，组件化规定组件内部状态和父组件可以给子组件传递状态，状态之间的依赖通过父向子组件传递或状态管理库来实现。最后，利用React的hooks写法实现了内部数据更新和副作用修改网页的标题。
