这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天
学习重点了react的历史与应用、设计思路、（hooks）的写法、react实现、状态归属问题、组件化、how to diff、React管理库等
react的应用
- 前端应用开发
- 移动原生应用开发
- 结合Electron，进行桌面应用开发
知道了react的应用，我能知道学习了这些知识我们可以有什么用处，可以实现什么项目，可以为我的学习确定一个目标
响应式编程
- 状态更新，UI会自动更新。
- 前端代码组件化，可复用，可封装。
- 状态之间的互相依赖关系，只需声明即可。
例子：选择手机配置界面，当我们选择手机的内存和颜色时，价格会自动更新
组件设计
- 组件声明了状态和UI的映射
- 组件有Props/state两种状态
- “组件”可由其他组件拼装而成
组件化
- 组件是组件的组合或原子组件
- 组件内拥有状态，外部不可见
- 父组件可将状态传入组件内部
思考状态归属问题后，我明白react是单向数据流，父组件可以向子组件传递状态，而子组件不能向父组件传递状态，向下传递； 组件状态改变时要重新触发render函数
虚拟DOM
虚拟DOM是一种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，
并和DOM建立一一对应的关系。
import React,{useState} from 'react';
function Example(){
const[const,setCount]=useState(0);
return(
<div> <p> You clicked { count } times </p> <button onClick={()=>setCount(count+1)}> Click me </button> </div>
);
}
上述例子为父组件传进入状态，子组件返回一个状态，用封装好的函数去更改状态，每点击一次按钮，count都会加一
How To Diff
要让diff足够快就要更新次数少原则是：
- 不同类型的元素进行替换
- 同类型的DOM元素进行更新
- 同类型的组件元素进行递归
React状态管理库——核心思想：
将状态抽离到UI外部进行统一管理
推荐的管理库有redux、xstate、mobx、recoil
状态机
就是从当前状态收到外部事件，然后迁移到下一个状态
