react源码解析20.总结&第一章的面试题解答

最新推荐文章于 2022-09-30 09:25:37 发布

goClient1992

最新推荐文章于 2022-09-30 09:25:37 发布

阅读量197

点赞数

文章标签： react.js 前端

本文链接：https://blog.csdn.net/It_kc/article/details/122853278

版权

本文总结了React源码的核心理念，包括异步可中断的更新、Fiber架构、Lane模型和并发模式。同时，文章提供了第一章的面试题及答案，涉及到jsx与Fiber的关系、setState的同步性、hooks的使用限制、组件优化手段等React关键知识点。

摘要由CSDN通过智能技术生成

react源码解析20.总结&第一章的面试题解答

视频讲解（高效学习）：进入学习

总结

至此我们介绍了react的理念，如果解决cpu和io的瓶颈，关键是实现异步可中断的更新

我们介绍了react源码架构（ui=fn(state)），从scheduler开始调度（根据过期事件判断优先级），经过render阶段的深度优先遍历形成effectList（中间会执行reconcile|diff），交给commit处理真实节点（中间穿插生命周期和部分hooks），而这些调度的过程都离不开Fiber的支撑，Fiber是工作单元，也是节点优先级、更新UpdateQueue、节点信息的载体，Fiber双缓存则提供了对比前后节点更新的基础。我们还介绍了jsx是React.createElement的语法糖。Lane模型则提供了更细粒度的优先级对比和计算，这一切都为concurrent mode提供了基础，在这之上变可以实现Suspense和batchedUpdate（16、17版本实现的逻辑不一样），18章context的valueStack和valueCursor在整个架构中运行机制，19章介绍了新版事件系统，包括事件生产、监听和触发

面试题简答（详见视频源码角度讲解）

jsx和Fiber有什么关系

答：mount时通过jsx对象（调用createElement的结果）调用createFiberFromElement生成Fiber
update时通过reconcileChildFibers或reconcileChildrenArray对比新jsx和老的Fiber（current Fiber）生成新的wip Fiber树

react17之前jsx文件为什么要声明import React from ‘react’，之后为什么不需要了

答：jsx经过编译之后编程React.createElement，不引入React就会报错，react17改变了编译方式，变成了jsx.createElement

function App() {
     
  return <h1>Hello World</h1>;
}
//转换后
import {
     jsx as _jsx} from 'react/jsx-runtime';

function App() {
     
  return _jsx('h1', {
      children: 'Hello world' });
}

Fiber是什么，它为什么能提高性能

答：Fiber是一个js对象，能承载节点信息、优先级、updateQueue，同时它还是一个工作单元。
1. Fiber双缓存可以在构建好wip Fiber树之后切换成current Fiber，内存中直接一次性切换，提高了性能
2. Fiber的存在使异步可中断的更新成为了可能，作为工作单元，可以在时间片内执行工作，没时间了交还执行权给浏览器，下次时间片继续执行之前暂停之后返回的Fiber
3. Fiber可以在reconcile的时候进行相应的diff更新，让最后的更新应用在真实节点上

hooks

为什么hooks不能写在条件判断中

答：hook会按顺序存储在链表中，如果写在条件判断中，就没法保持链表的顺序

状态/生命周期

setState是同步的还是异步的

答：legacy模式下：命中batchedUpdates时是异步未命中batchedUpdates时是同步的

concurrent模式下：都是异步的
componentWillMount、componentWillMount、componentWillUpdate为什么标记UNSAFE

答：新的Fiber架构能在scheduler的调度下实现暂停继续，排列优先级，Lane模型能使Fiber节点具有优先级，在高优先级的任务打断低优先级的任务时，低优先级的更新可能会被跳过，所有以上生命周期可能会被执行多次，和之前版本的行为不一致。

组件

react元素$$typeof属性什么

答：用来表示元素的类型，是一个symbol类型
react怎么区分Class组件和Function组件

答：Class组件prototype上有isReactComponent属性
函数组件和类组件的相同点和不同点

答：相同点：都可以接收props返回react元素

不同点：

编程思想：类组件需要创建实例，面向对象，函数组件不需要创建实例，接收输入，返回输出，函数式编程

内存占用：类组建需要创建并保存实例，占用一定的内存

值捕获特性：函数组件具有值捕获的特性下面的函数组件换成类组件打印的num一样吗
```
export defa
```