这是我参与「第五届青训营 」伴学笔记创作活动的第 15 天
一、本堂课重点内容：
- React的发展历史与应用
- React的设计思路
-
- UI 编程痛点
- 响应式与转换式
- React 设计与实现 - 组件化
- React 设计与实现 – 状态归属问题
- React 设计与实现 – 生命周期
二、详细知识点介绍：
React的应用
前端应用开发，如Netflix 网页版、Facebook，Instagram。
移动原生应用开发，如 Instagram，Discord，Oculus。
结合 Electron，进行桌面应用开发。
React发展历史
2010年：Facebook 在其 php 生态中，引入了 xhp 框架，首次引入了组合式组件的思想，启发了后来的 React 的设计。
2011 年：Jordan Walke 创造了 FaxJS，也就是后来的 React 原型
2012 年：在 Facebook 收购 nstagram 后，该 FaxJS 项目在内部得到使用，Jordan Walke 基于 FaxJS 的经验，创造React。
2013 年 React 正式开源，在 2013 JSConf 上 Jordan Walke 介绍了这款全新的框架:
2014 年今天生态大爆发，各种围绕 React 的新工具/新框架开始涌现:
React设计思路
UI编程痛点
我们看下面这一个图，任何一种配置的改变都会改变价格，改变的价格又必须实时反映在右上角。所以就需要有一个JS变量来存储价格，每次修改配置都要调用回调来修改价格，同时要更新UI，所以要需要挂载onclick事件。
由此我们可以看出原生JS在进行UI编程时的痛点
- 状态更新，UI 不会自动更新，需要手动地调用 DOM进行更新。
- 欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
- UI之间的数据依赖关系，需要手动维护如果依赖链路长，则会遇到“Callback Hell”。
响应式与转换式
转换式系统就是给一个输入然后得出一个输出。
响应式系统就是监听事件，消息驱动。
前端代码并不需要很多计算，而是需要很多监听，所以说用转换式子系统写前端代码是非常难受的。因此React是响应式系统。
具体到前端UI还要增加一个步骤。
所以针对原生JS在进行UI编程时候的痛点，React采取了如下的改进措施。
- 状态更新，UI自动更新
- 前端代码组件化，可复用，可封装
- 状态之间的相互依赖关系，只需要声明即可。
组件化
我们对例子进行一个组件的划分，通过观察左侧的树，我们可以得出如下结论;
- 组件是组件的组合或者原子组件
- 组件内拥有状态，外部不可见
- 父组件可将状态传入组件内部
状态归属问题
我们再次观察一下右侧的例子，其中的“当前状态”应该属于谁？
答案是只能放在root节点，因为状态归属于两个节点向上寻找到的最近的祖宗节点，这样才能让子组件共享数据。但是这样很不好，因为如果所有的状态都上移，那么会失去组件的可复用性。
事件是由子组件触发的，但是状态是保存在父组件里面，这中间如何完成数据的传递呢？
由于JS中函数是一个变量类型，因此可以父组件给子组件传递函数，子组件通过这个函数就可以修改父组件的状态。
组件设计草图
综上所述，我们组件设计的整体思路为
- 组件声明了状态和 UI的映射。
- 组件有 Props/State 两种状态。
- “组件”可由其他组件拼装而成。
细化一点
- 组件内部拥有私有状态State。
- 组件接受外部的 Props状态提供复用性
- 根据当前的 State/Props，返回一个 UI。
所以不考虑语法错误的情况下，组件可以这么写
三、课后个人总结：
- 之前学过Vue，但是没学过React，这节课最大的收获就是了解了React框架的设计思路，体现了从实际需求出发，这也是我平时需要注意的一个点。
