React
一、React设计思路
1.1原生js的缺点
- 状态更新，UI不会自动更新，，需要手动地调用DOM进行更新。
- 欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
- UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”。
1.2响应式与转换式
转换式系统：给定输入求解输出、编译器、数值计算。
响应式系统：监听事件，消息驱动、监控系统、UI界面。
响应式系统：事件发生后执行既定的回调，从而导致这个状态的变更。状态变更后UI更新就是前端UI。
1.3响应式编程
- 状态更新，UI自动更新。
- 前端代码组件化，可复用，可封装。
- 状态之间的互相依赖关系，只需声明即可。
1.4组件化
- 组件是组件的组合/原子组件
- 组件内拥有状态，外部不可见
- 父组件可将状态传入组件内部
1.5组件设计
- 组件声明了状态和UI的映射。
- 组件有Props/State两种状态。
- “组件”可由其他组件拼装而成。
二、React（hooks）的写法与React实现
import React,{useState} from 'react';
function Example(){
const[count,setCount]=useState(0);
return(
<div>
<p>You clicked{count}times</p>
<button onclick={()=>setCount(count+1)}>
Click me
</button>
<.div>
);
}
2.1Virtual DOM
它是一种用于和真实DOM同步，而在js内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系。
