这是我参与「第五届青训营」伴学笔记创作活动的第18天
一、本节课重点内容
在对 React 设计思路进行讲解后，本节课将重点带来有关 React 两大写法之一的 Hooks 写法，该写法也是目前学企界中常用的写法之一.
此外，讲师还将在本节课为大家讲解 React 实现层的重要知识，帮助大家更好地上手后续的 React 代码操作。
课程重点内容总结如下所示：
- 代码介绍
- Live Code
- React 的实现基本概要
- React 的实现 - Problem 1 & 2
- React 的实现 - How to Diff
二、详细知识点介绍
03 React （hooks）的写法
代码示例：
改变count不是直接进行改变，而是手动的调用[count ， setCount]
react封装一层，不可以直接进行+1。
04 React的实现
React的实现- Problems
- JSX不符合JS标准语法。
- 返回的JSX发生改变时，如何更新DOM。
- State/Props更新时，要状态/道具更新时，要重新触发render函数，重新触发渲染函数。
React的实现- Problem2
Virtual DOM ( 虚拟DOM)
Virtual DOM是一-种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立对应的关系。
它赋予了React 声明式的API:
您告诉React希望让∪I是什么状态，React 就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。
图解：
React的实现- How to Diff?
更新次数少←→计算速度快 完美的最小Diff算法，需要O(n^3)的复杂度。
牺牲理论最小Diff,换取时间，得到了0 (n)复杂度的算法: Heuristic O(n) Algorithm
- 不同类型的元素：替换
- 同类型的DOM元素：更新
- 同类型的组件元素：递归
三、总结
特点： 声明式设计：React 使创建交互式 UI 变得轻而易举。
为你应用的每一个状态设计简洁的视图，当数据变动时 React能高效更新并渲染合适的组件。
组件化:
构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。
