React 的设计思路
传统开发痛点
三点基本痛点
痛点例子
比如说右上角展示了手机的价格，手机的型号，颜色，容量等都会对展示价格产生影响，所以每个不同的选项，我们就需要编写一个对应的callback对状态进行修改，然后再调用Dom API对数字进行修改(这在一个小项目来看可能问题不是很大，但当你的项目逐渐变得复杂，庞大，以及考虑到维护等问题，这将是个非常恐怖的事情，而是这是个偏向于process-oriented[面向过程]的编程范式)
响应式与转换式
- 转换式更像是个函数，给定一个输入，让后给出一个输出(最简单的可能是算法题，比如说算斐波那契的函数，最复杂的可能到编译器 [但总的来说 ，它们都可以看做是转换式系统])
- 响应式系统是比如说一个事情发生了，然后系统去响应这个事件(比如像一个火灾监控系统，监测到火情发生了，它会报火警，然后开自动喷淋这些措施等)
响应式系统
响应式编程
现在回到之前那个苹果官网的例子🔙
组件化
(注：上图左侧并不是Dom树，是我们自己定义的结构)
以下是组件化的一些要求⬇️
-
如果把这个状态放在顶栏，型号和颜色的改变就不能影响价格的改变，因为父组件可以控制子组件，而顶栏组件和型号组件即颜色组件并不构成父子关系
-
如果把这个状态放在配件或颜色组件里也不行，原因与以上相同
-
所以这个状态只有放在顶栏组件和内容组件的最近的祖宗节点才行
-
函数在JavaScript中是一等公民，所以可以当作变量传来传去
-
把root里的
onChangeValue函数传给型号和颜色组件，点击后，通过传来的函数对状态进行改变 -
通过这种方式实现了看似'跨组件'变化
那这是否是双向通信呢😵💫？并没有，因为父组件将函数传给子组件，子组件执行函数后，并没有将状态传回到父组件(或者可以说子组件并没有将信息传给父组件)
问题思考
-
React是单向数据流(永远只能是父组件给子组件传东西，不能是子组件给父组件传东西，但这并不代表子组件不能改变父组件状态，因为父组件可以给子组件传函数，子组件可以通过调用该函数来改变父组件状态)
-
可以通过状态管理库来解决
-
之后的内容会解释
组件设计-三条经验
- State是组件自己内部的状态，Props是父组件传给子组件的
对代码的想象
生命周期
一个组件有三个关键的时间节点
- 挂载的时候
- 状态更新的时候
- 卸载的时候
