课程介绍
本节课为前端框架 React 的基础课程讲解，为了更好地帮助进入 React 技术原理学习，在本节课课程将带来有关前端框架 React 的发展历史。
课程重点
- 前端应用开发历程
- 移动原生应用开发
- 结合 Electron 的桌面应用开发
React 的应用
- 前端应用开发，如 Facebook、Instagram、Netflix 网页版。
- 移动原生应用，如 Instagram、Discord、Oculus。
- 结合Electron，进行桌面应用开发。
- React-three-fiber，写3D图形。
React 的历史
声明式的写法可以让两个组件组合在一起，这个写法启发了 React 的设计
FaxJS那张图片中的意思
- Seamless Client Server Rendering
既可以在客户端渲染，也可以在服务端渲染
- Reactive
响应式 当状态变更的时候，我的UI也会更新，不需要手动更新 3. Performant
性能好
- Structural
给前端做了一个组件级别的复用封装，组件又是函数声明的，声明式视图
React 的设计思路
UI 编程的痛点
当你在苹果官网选购手机的时候，你在当前手机价格下方选择不同的配置，都可能会改变当前手机的价格，如果我们不会React，用原生的JavaScript去写
用原生JS写UI有三个痛点
- 状态更新，UI不会自动更新，需要手动调用DOM进行更新。
- 欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
- UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”。
如何解决这些痛点？
响应式与转换式
响应式系统
前端UI
因此，我们对前端代码有了期望：
组件化
先给前端界面做一个语义化前端隔离
左侧的东西不是DOM树，DOM树不是js内部的一个变量，DOM本身是浏览器内部的维护的一个东西，我们只能通过调用JavaScript的DOM的api去修改dom，而不是说DOM本身是JavaScript的一个变量可以随意修改。
DOM和实际看到的UI其实是一一对应的关系，我们左侧所看到的划分，其实是我们自己的一个划分，是我们自己写代码的时候去做的一个规划。
总结
- 组件是 组件的组合/原子组件（Root组件就是由内容组件和底层组件组成，一个物体要么是组件的组合要么是原子组件。）
- 组件内拥有状态，外部不可见（右边的卡片，谁是蓝色谁是红色）
- 父组件可将状态传入组件内部（父组件应该是可以控制组件的）
【当前价格】状态属于谁？
因为父组件可以控制子组件，所以当前价格只能属于Root节点！ 只有放到这个组件才能让顶栏、型号选择才能共享这些状态。
大多数情况下，我们的状态其实都具有一定的局部性。比如说颜色可以很好地放在卡片里，这时候颜色不需要向顶栏共享，颜色就具有一定的局部性。
综上，状态归属于两个节点向上寻找到最近的祖宗节点。
【当前价格】如何改变？
函数在JavaScript中属于一等公民，在JavaScript中是可以传来传去的。 永远是父组件可以给子组件传东西，子组件是不可以给父组件传东西的。 但不代表子组件不能更改父组件的状态，父组件可以给子组件一个函数，让子组件去执行。 思考：
- React是单向数据流，还是双向数据流？ 单向数据流，父组件可以给子组件传东西。
- 如何解决状态不合理上升的问题？ 第五节通过状态管理库去解决。
- 组件的状态改变后，如何更新DOM？ 第四节React实现，来讲解React如何实现DOM更新。
组件设计
- 组件声明了状态和UI的映射。
映射其实是数学上的函数关系，我输入几个状态返回一个UI，这就是映射关系。
- 组件有Props/State状态。
组件内部应该有自己的状态，外部不可见。同时父组件又可以给子组件传状态。 内部的私有状态 state，外部传入的 props
- “组件”可由其他组件拼接而成。
组件代码会是什么样子？
我们再梳理一下：
- 组件内部拥有私有状态State
- 组件接受外部的Props状态提供复用性。
- 根据当前的State/Props，返回一个UI。
我们现在想象一下代码，代码不一定对。
React组件生命周期
我们需要注意组件三个重要的时间点：
- 它挂载的时候
- 它卸载的时候
- 它状态改变的时候
每天的任务不多，大家认真看课，认真做笔记就好。 加油！冲
