react核心笔记

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情

该文章主要分享一些自己对react核心的一些理解的小笔记

小弟不才，其实我认为最好的核心代码笔记，就是写一个最小的可运行的的核心代码

那么现在让我们来一步一步来实现它吧

react 的fiber

有5个优先级的等级

• Immediate
• UserBlocking
• Normal
• Low
• Idle

高阶组件

怎么写一个高阶组件？

1. 普通方式
2. 装饰器
3. 多个高阶组件组合

高阶组件

1. 属性代理

• 操作props

• 操作ref

2. 继续/劫持

什么是react hooks?

• useState
• useEffect
• useMemo

react hooks 有什么优势

class 的缺点

1. 组件间的状态逻辑很难复用
2. 复杂业务的有状态组件会越来越复杂
3. 监听和定时器的操作，被分散在多个区域

不要在render里写bind

hooks 的优点

1. 利于业务逻辑的封装和拆分，可以自由自定义hooks(自己封装的用到了react hooks的公共逻辑) useEffect(()=>{})
2. 可以在无需修改组件结构的情况下，复用状态逻辑
3. 定时器、监听等等都被聚合到同一块代码下

hooks使用注意事项

1. 不能在循环判断里用索引问题
2. 只能在 React 的函数组件中调⽤ Hook，不要在其他 JavaScript 函数中调⽤
3. 自定义的hook怎样操作组件

diff

计算机世界里，比较两棵树的异同，其实可以抽象为经过一堆操作猛如虎后，就是将一颗树转成另一颗树的过程 假设，将字符串 'hello' -> 'hallo' 需要几步？一眼望去就知道答案是一步，这个时候你脑子里的思考过程其实就是编辑距离算法的模型了，计算机思维 got!

• 抽象一点，对字符串的操作不外乎三种，「替换」「插入」「删除」，执行这三种操作后到达目的的最小操作数，就是最短编辑距离，这里的复杂度就是我们需要考虑的
• a a 跨层级比较
• | | | |
• c b c d
• [a, a]
• [a, c]
• [a, d]
• ...

React diff 复杂度其实是 O(nm)，这里只是有一些技巧可以优化成 O(n)

 const arr = [a, b, c] vs const newArr = [b, d, e, f]
 [a, b]
 [b, d]
 [c, e]
 [null, f]
 
 for (let i = 0, len = oldNodes.length; i < len; i++) {
   if (oldNodes[i].type !== newNodes[i].type) {
     replace()
   }
   else if (oldNodes[i].children && oldNodes[i].children.length) { // 如果没有这一层，假设 type 全不相同，那么就是 O(n)，最坏复杂度 O(nm)
   }
 }

• O(n^2)
• O(nlogn)
• 当然，这只是 React 的实现，肯定还是有更优秀的 diff 算法的，比如 inferno 的，能到 O(mlogn)，vue3 也是借鉴了这一算法

总结

这里这介绍本人对react核心的一些粗见，核心代码见下期