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

一、首先学习响应式系统与 React所需的前置知识

• 01 html，js，css基础。
• 02基础的数据结构/算法知识，如二叉树，深度遍历等。
• 会使用浏览器提供的DOM API来修改DOM，更新UI。

二学习React

2.1 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正式开源，在2013JSConf尚Jordan Walke介绍了这款全新的框架：

2.2 React的设计思路

• UI编程痛点

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

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

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

• 响应式与转换式

• 

2.3React（hooks）的写法

2.4React的实现

• Problems
• 01.JSX不符合JS标准语法
• 02.返回的JSX发生改变时，如何更新DOM
• 03.State/Props更新时，要重新出发render函数

Problem1

Problem2

• Virtual Dom(虚拟DOM)
• Virtual DOM是一种用于和真实DOM同步,而在Js内存中
• 维护的一个对象,它具有和DOM类似的树状结构,并和
• DOM可以建立一一对应的关系。
• 它赋予了 React声明式的AP:您告诉 React希望让U是什
• 么状态, React就确保DoM匹配该状态。这使您可以从属
• 性操作、事件处理和手动DOM更新这些在构建应用程序时
• 必要的操作中解放出来。