这是我参与「第五届青训营」伴学笔记创作活动的第16天
一、本节课重点内容
本节课1：为前端框架 React 的基础课程讲解，为了更好地帮助进入 React 技术原理学习，在本节课课程将带来有关前端框架 React 的发展历史。
在本节课2：，讲师将从 0 开始，带领大家共同推演 React 框架的设计思路，包括 React 设计的由来，具体的设计方案，剖析该框架为何演进为目前熟知的响应式编程模型，帮助大家更好地理解 React 代码。
课程重点内容归纳总结如下：
- 前端应用开发历程
- 移动原生应用开发
- 结合 Electron 的桌面应用开发
- UI 编程痛点
- 响应式与转换式
- React 设计与实现 - 组件化
- React 设计与实现 – 状态归属问题
- React 设计与实现 – 生命周期
二、详细知识点介绍
前置知识：
课程内容概要
- React的历史与应用
- React的设计思路
- React (hooks) 的写法
- React的实现
- React状态管理库
- 应用级框架科普
React历史与应用
- 可以写我们所需要的前端网页‘
- 写移动端的应用，这些代码可以使用原生应用来实现；
- 桌面应用的开发；
- 3D场景的控制与实现；
响应式的编程。
- 2010年Facebook 在其php 生态中，引入了xhp框架，首次引入了组合式组件的思想，声明式的写法，启发了后来的React的设计。
- 2011年Jordan Walke创造了FaxJS, 也就是后来的React原型:
reactive: 只需要关注一个状态的变化、与状态与UI之间的关系即可，这个开发框架就保证了只要状态进行了变化，我们的UI也会跟着状态进行变化，为开发人员节省了大量的时间与精力。
- 2012年在Facebook收购Instagram后，该FaxJS项目在内部得到使用，Jordan Walke基于FaxJS（react的原型）的经验，创造了React。
- 2013年React 正式开源，在2013 JSConf上Jordan Walke介绍了这款全新的框架。
- 2014年-今天生态大爆发，各种围绕React的新工具/新框架开始涌现:
设计思路
UI设计痛点：
每一个页面UI的变化都会导致状态的变化，如果用原生JS来写，挂载会比较多，状态更新的时候U不会更新、代码层面的封装不好、手动维护数据依赖；
- 状态更新，UI不会自动更新，需要手动地调用DOM进行更新。
- 欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
- UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”。
响应式-转换式：
JS是异步编程。
React的设计与实现-响应式编程:
- 状态更新，UI 自动更新。 “状态更新，UI 不会自动更新，需要手动地调用DOM进行更新。”
- 前端代码组件化，可复用，可封装。 “欠缺基本的代码层面的封装和隔离，代码层面没有组件化。”
- 状态之间的互相依赖关系，只需声明即可。
UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到=“Callback Hell”。
总结:
- 组件是组件的组合/原子组件
- 组件内拥有状态，外部不可见
- 父组件可将状态传入组件内部
状态归属问题：状态归属于两个节点向上寻找到最近的祖宗节点。
思考：
- React是单向数据流，还是双向数据流? 单项，父组件--->子组件，不能反过来进行； 2.如何解决状态不合理.上升的问题?（） 3.组件的状态改变后，如何更新DOM ?（）
组件设计：
- 组件声明了状态和UI的映射。
- 组件有Props/State 两种状态。（私有/开放）
- “组件” 可由其他组件拼装而成。
三、总结
了解了react的历史及其应用，而且对react的优点内容了解了一些； react大大的简化了状态变化下的UI变化，相比原生JS代码的，减少了人工重复的操作。
