React （hooks）的写法与 React 实现 | 青训营笔记

雨崽LXY
108 阅读2分钟

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

一、本堂课重点内容：

  • 1.代码介绍
  • 2.React 的实现 - Problem 1 & 2
  • 3.React 的实现 - How to Diff

二、详细知识点介绍：

1. 代码介绍

image.png
简单介绍一下上方的图片中的代码：
在React中的函数组件，声明一个新状态需要手动调用React封装的函数useState，然后这个函数传入一个状态的初始值，接着返回一个状态本身，和这个状态的set，要改变这个状态，不能直接count+1，需要手动地调用setCount函数来加1

接下来看下面这张图片，增加了一个useEffect image.png

2.React 的实现 - Problem 1 & 2

  • Problem1.JSX不符合JS标准语法

image.png 图片中的左边就是React的写法（JSX），然后经过转译后会变成右边的编码的样子，右边的样子就是符合JS标准语法的，所以在浏览器中就可以进行展示，那这个问题也就解决啦！！

  • Problem2.返回的JSX发生改变时，如何更新DOM

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

image.png

  • 3.React 的实现 - How to Diff
  • 完美的最小Diff算法，需要O（n^3）的复杂度。
  • 牺牲理论最小Diff，换取时间，得到了O(n)复杂度的算法 Heuristic O(n) Algorithm

使用：

  • 不同类型的元素-> 替换
  • 同类型的DOM元素 -> 更新
  • 同类型的组件元素 -> 递归

image.png

avatar
文章
阅读
粉丝