这是我参与「第四届青训营 」笔记创作活动的第10天

1.React历史与应用

• 前端应用开发
• 移动原生应用开发
• 结合Electron,进行桌面应用开发

2.React的设计思路

UI编程痛点

• 状态更新，UI不会自动更新，需要手动的调用DOM进行更新
• 欠缺基本的代码层面的封装和隔离，代码层面没有组件化
• UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”

响应式系统

前端UI

响应式编程

• 状态更新，UI自动更新

  • 状态更新，ul 不会自动更新，需要手动地调用DOM进行更新。

• 前端代码组件化，可复用，可封装

  • 欠缺基本的代码层面的封装和隔离，代码层面没有组件化。

• 状态之间的互相依赖关系，只需声明即可

  • “ul之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”。

组件化总结

• 组件是组件的组合/原子组件
• 组件内拥有状态，外部不可见
• 父组件可将状态传入组件内部

组件设计

• 组件声明了状态和UI 的映射
• 组件有Props/State两种状态
• 组件可由其他组件拼装而成

3.React(hooks)的写法

import React,{useState}from'react';

function Example(){ //Declare a new state variable,which we'll call "count" const [count,setCount]=useState(0);

renturn(

4.React的实现

Virtual DOM(虚拟DOM)

Virtual DOM是一-种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系。

它赋予了React 声明式的API:您告诉React希望让UI是什么状态，React 就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。