这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天
重点内容：🍞React🍞
🍔前言🍔
在休息了这么长时间后，今天终于满怀期待的开始了新的学习，今天一起来看一看React的基础内容吧！
🍟React历史🍟
要了解一个框架，要了解其过去，才能明白其存在的意义，还有它的作用。这样才有助于了解框架本身的功能和所用。
2010年 Facebook 在其 php 生态中，引入了 xhp 框架，首次引入了组合式组件的思想，启发了后来的React 的设计。
2011年 Jordan Walke 创造了 FaxJS，也就是后来的 React 原型: “简单的客户端服务端渲染、响应式的交互、更好的性能、结构化的封装”。后续React的优化也是在此基础上不断更迭。
2012年 在Facebook 收购 Instagram 后，该 FaxJS 项目在内部得到使用，Jordan Walke 基于 FaxJS 的经验，创造了 React。
2013年 React 正式开源，在 2013 JSConf 上 Jordan Walke 介绍了这款全新的框架:
A JavaScript library forbuilding user interfaces.
2014年-今天 生态大爆发，各种围绕React的新框架不断涌现:🍕React应用🍕
React适用于前端、移动端、桌面应用开发等多个方面！
🌭React的设计思路🌭
UI编程痛点
- 状态更新，UI不会自动更新，需要手动地调用 DOM 进行更新。
- 欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
- UI之间的数据依赖关系，需要手动维护如果依赖链路长，则会遇到“Callback Hell”。
转换式系统与响应式系统
转换式系统:给定输入，求解输出。例如编译器，数值计算。 响应式系统:监听事件，消息驱动。例如监控系统，UI界面。
响应式编程
- 状态更新，UI自动更新。
- 前端代码组件化，可复用，可封装。
- 状态之间的相互依赖关系，只需声明即可。
可以看到，响应式编程就对应了UI编程的三大痛点，对其进行优化。
🥪React——组件化🥪
组件是组件的组合或原子组件。例如图中每一部分都是一个组件，它可以是单个的原子组件，也可以是嵌套在一起的组件组合。
组件内拥有状态，外部不可见。例如图中的型号，颜色都可以进行选择，这些是属于型号组件和颜色组件的内部状态，改变状态可以改变父组件的属性。
父组件可将状态传入组件内部。例如生成接口时，接口可以接收外部的一些信息，然后在组件内部消费它，这样可以提供一个组件复用的作用。
🌮React——状态归属🌮
如图所示，当前价格一定要放在根节点，因为只有父组件可以控制子组件。只有放在根节点，才能在更新价格的同时控制和改变其他栏的属性信息。
结论：如果想要让两个组件状态共享，那么这个状态就应该归属于两个组件向上寻找到最近的祖宗节点上。
🥙React——生命周期🥙
组件挂载到UI上会执行render函数，每当状态发生改变的时候就会重新执行render函数，然后更新真实DOM，最后执行componentDidMount。
🧀一点补充🧀
- 组件声明了状态和UI的映射。
- 组件有Props/State两种状态。
- “组件”可以由其他组件拼装而成。
- React 是单向数据流，子组件可以通过函数的方式改变父组件状态。
看起来好像是上下交互双向传递，但实际上永远都只能是父组件给子组件传递东西，子组件不能给父组件传递，所以本质上它就是单向数据流。但是，这并不代表子组件不能改变父组件的状态，JavaScript中函数是一等公民，可以作为参数传递。因此父组件可以把一个函数传递给子组件，子组件通过执行此函数可以改变父组件的状态！
🥓总结🥓
本次课程，主要了解的React的发展史，以及它的设计思路，对后续代码编写的思路大有裨益。了解这些基础的概念的理论，有助于我们对React有一个更深层次的理解，而不是仅仅停留在一个解决什么问题的框架上。
