跳到主要内容

React

React​

对react的理解​

JSX​

JSX是什么？​

  1. JSX是js的语法扩展，可以很好的描述UI应该呈现出交互形式
  2. JSX是React.CreateElement的语法糖
  3. 在React17+采用新的转换了react/jsx-runtime，因此不需要显示引入React

react元素$$typeof属性是什么​

  1. 用来表示元素的类型，是一个Symbol类型

虚拟DOM​

react怎么区分Class组件和Function组件​

  1. Class组件上prototype的isReactComponent属性

virtual Dom的理解​

  1. React.CreateElement返回的结果就是虚拟DOM
  2. 描述真实DOM的js对象
  3. 根据虚拟DOM实现差异化更新
  4. 兼容浏览器，可以实现跨平台

Fiber​

react的渲染过程​

  1. 调度Scheduler ：调度更新，实现优先级调度
  2. 协调Reconcilers ：深度优先遍历生成fiber树，根据每个fiber的状态(更新/删除/新增)生成副作用链表。
  3. 渲染Renderer：根据副作用链表渲染到页面上。

fiber是什么？作用？​

  1. fiber是执行工作单元。是数据结构，每个节点会生成一个fiber
  2. 可以实现增量渲染

DOM-DIFF​

dom-diff算法​

  1. 是旧Fiber树与新的虚拟DOM对比生成新的Fiber树的过程
  2. 只对同级节点进行对比。跨级不进行比较
  3. 通过key标识元素

生命周期​

componentWillMount、componentWillMount、componentWillUpdate为什么标记UNSAFE？​

  1. 在协调阶段可以实现暂停继续，优先级更新。低优先级的任务可能会被跳过，所以上述生命周期可能会执行多次

状态更新​

setState是同步的还是异步的​

  1. 同步(legacy)模式下：生命周期、事件处理都是异步批量更新。定时器、事件监听是同步更新
  2. 异步(concurrent)模式下：都是异步更新

为什么传入二次相同的状态，函数组件不更新​

在触发更新操作是，dispatchAction方法内取到上次的state和reducer和本次更新后的值进行对比。如果一样在直接返回

Hooks​

为什么不能在条件和循环里使用Hooks​

hook在fiber上以链表形式存储。每次更新创建的新hook对象，会根据上次存储的hook取值memoizedState和queue

为什么不能在函数组件外部使用Hooks​

在函数组件外使用hooks无法找到对应的函数组件的fiber

React Hooks的状态保存在了哪里?​

  1. 函数组件的fiber的memoizedState

为什么根据老的hooks生成新的hooks?​

  1. 新的hook依赖老的状态memoizedState和更新队列queue

fiber里面queue为什么是环形链表？​

  1. 更新存在优先级
  2. baseQueue baseState

函数组件的useState和类组件的setState有什么区别?​

  1. 相同点：更新状态触发重新渲染、
  2. 不同点：
  • 浅对比。类组件不会浅比较更新前后 state 的变化，函数组件会默认比较，这就需要在更新时传递一个新的对象。
  • 监听变化。类组件 setState 有专门监听 state 变化的回调函数 callback，可以获取最新state；但是在函数组件中，只能通过 useEffect 执行 state 变化引起的副作用。
  • 底层原理。setState 在底层处理逻辑上主要是和老 state 进行合并处理，而 useState 更倾向于重新赋值。

函数组件和类组件的相同点和不同点​

合成事件​

你对合成事件的理解​

  1. react把事件委托到容器上(v17之前是document上)
  2. 先处理原生事件，冒泡到容器上处理React事件
  3. React事件绑定的时刻是在reconciliation阶段,会在原生事件的绑定前执行
  4. 实现浏览器兼容性，保证一致性

我们写的事件是绑定在dom上么，如果不是绑定在哪里？​

  1. 绑定到container上

为什么我们的事件手动绑定this(不是箭头函数的情况)​

  1. 合成事件在执行时会丢失上下文

为什么不能用 return false 来阻止事件的默认行为？​

  1. react绑定的不是原生事件，是合成事件
  2. 合成事件对象是通过拷贝原生事件对象上的属性

react怎么通过dom元素，找到与之对应的 fiber对象的？​

  1. dom上挂载属性internalInstanceKey赋值为fiber对象

优化​

react有哪些优化手段​

  1. React.PureComponent、React.memo() props进行浅比较
  2. immutable.js 数据不可变性，复用旧数据
  3. React.lazy() 懒加载
  4. react-virtualized 虚拟列表
  5. react-lazyload 图片懒加载