这是我参与「第四届青训营 」笔记创作活动的的第10天
课前学习Getting Started – React (reactjs.org)
课后学习Next.js by Vercel - The React Framework (nextjs.org)
学习前所需知识：
- HTML，JS，CSS 基础
- 基础的数据结构/算法知识，比如二叉树，深度遍历等。
- 会使用浏览器提供的 DOM API 来修改 DOM，更新 UI
01. React 的历史与应用
- 前端应用开发，如 Facebook，Instagram， Netflix 网页版
- 移动原生应用开发，如Instagram，Discord，Oculus
- 结合 Electron，进行桌面应用开发
2010年，Facebook 在其 php 生态种，引入了 xhp 框架，首次引入了组合式组件的思想，启发了后来的 React 的设计
2011年，Jordan Walke 创造了FaxJS，也就是后来的 React 原型：
2012年，在 Facebook 收购 Instagram 后，该 FaxJS 项目在内部得到使用，Jordan Walke 基于 FaxJS 的经验，创造了 React
2013年，React 正式开园，在2013 JSConf 上 Jordan Walke 介绍了这款全新的框架
2014年-今天，生态大爆发，各种围绕 React 的 新工具/新框架 开始涌现：
02. React 的设计思路
UI 编程痛点
- 状态更新，UI 不会自动更新，需要手动地调用 DOM 进行更新。
- 欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
- UI 之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”。
响应式与转换式
响应式系统
响应式编程
前端UI
- 状态更新，UI自动更新
- 前端代码组件化，可复用，可封装
- 状态之间的相互依恋挂你先，只需声明即可
组件化
总结：
- 组件是 组件的组合/原子组件
- 组件内拥有状态，外部不可见
- 父组件可将状态传入组件内部
状态归属问题
[当前价格]状态属于谁？->属于 Root 节点！！
状态归属于两个节点向上寻找到最近的祖宗节点。
[当前价格]如果改变？->将 onChangeValue() 向下传递
思考：
- React 是单向数据流，还是双向数据流？
- 如何解决状态不合理上升的问题？
- 组件的状态改变后，如何更新 DOM ？
组件化
组件代码会是什么样子？
- 组件内部拥有私有状态 State
- 组件接受外部的 Props 状态提供复用性
- 根据当前的 State/Props，返回一个 UI
03. React（hooks）的写法
04. React 的实现
Problems
- JSX 不符合 JS 标准语法
- 返回的 JSX 发生改变时，如何更新 DOM
- State/Props 更新时，要重新出触发 render 函数
问题1：
问题2：
