这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天
今天学习了一些React的相关知识。
react可以应用于前端应用开发、移动原生应用开发、桌面应用开发（结合Electron）等。
1 React的设计思路
当前UI编程存在一些问题，如下图，要根据点击事件更新右上角的价格，代码会十分繁复。具体问题为可总结为以下三点。
- 状态更新时，UI不会自动更新，需要手动地调用DOM进行更新。
- 欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
- UI之间的数摆依赖关系，需要手动维护，如果依赖链路长，则会遇到"Callback Hell"。
响应式编程更适合前端开发
转换式系统：给定输入，求解出输出。
响应式系统：监听事件，消息驱动。
因此 我们期望做到：
- 状态更新，UI自动更新。
- 前端代码组件化，可复用，可封装。
- 状态之间的互相依赖的关系，只需声明即可。
因此刚才的界面可以如此设计以实现组件化：
组件定义
- 组件是组件的组合/原子组件
- 组件内拥有状态，外部不可见
- 父组件可将状态传入组件内部
- 状态属于两个节点向上寻找到最近的祖宗节点
组件设计
- 组件声明了状态和U的映射。
- 组件有Props/State两种状态。
- “组件”可由其他组件拼装而成。
2.React(hooks)的写法
import React， { useState } from 'react;
之所以使用setCount是因为如果自己改react很难接管，要是用react封装好的来更改状态，react才能做状态的刷新。
应用级框架
- Next.js，硅谷明星创业公司Vercel的React开发框架
- Modern.js，字节Web Infra团队研发的全栈开发框架
- Blitz，无API思想的全栈开发框架，适合前后端紧密结合的小团队项目
