React---场景题

44 阅读2分钟

说说你对react的了解,从哪些方面可以说起?

  • 虚拟DOM
  • 状态和属性
  • 生命周期
  • Fiber架构
  • Hooks
  • 合成事件
  • 调度
  • 协调
  • render

哪些情景会触发render函数

在 React 中,组件的 render 方法是在以下情况下被触发的:组件挂载、组件状态或属性更新、父组件重新渲染、调用 forceUpdate、组件初始化和卸载,hook的调用

初始渲染时

组件首次被挂载到DOM时,render方法会被调用生成初始的UI结构,通常发生在componentDidMount生命周期方法之前

状态state或属性props的变化

组件的props或state发生变化,React会重新调用render方法来根据新的props和state生成新的UI结构。这样可以确保组件能够根据外部数据的变化及时更新UI。

父组件重新渲染

组件的父组件重新渲染,或者父组件的props发生变化,可能会导致子组件的render方法被调用,去生成新的UI结构。

强制更新:调用forceUpdate()

某些情况下,可能需要手动触发组件的重新渲染。可以使用forceUpdate方法来强制触发组件的render方法,即使组件的props和state没有发生变化。

什么场景会调用forceUpdate()

  • 第三方库集成:使用第三方库,一些图标库或视频播放器可能在React组件外部直接修改了数据,使用forceUpdate()强制React组件重新渲染。

使用React hooks时的变化:

使用React Hooks(如useStateuseEffect等)时,组件内部的状态发生变化或触发副作用时,也会导致组件的render方法被调用。

context改变

重新渲染时render会做什么

  • 生成新的虚拟DOM
  • 比较新旧虚拟DOM
  • 更新实际DOM
  • 调用生命周期方法或钩子

函数组件中如何强制性更新组件

通过函数式高阶组件利用updateStr更新触发组件刷新

原理:

监听父组件传给组件的updateStr, 如果updateStr有变化就改变forceUpdate(布尔值),

如果forceUpdate为false销毁组件, 为true显示刷新组件, 从而使组件有强制刷新的效果

React.memo

使用场景

  • 子组件频繁渲染但props不变
  • 组件渲染成本较高
  • 自定义比较函数

不适用场景

  • 组件内部依赖于state或context:如果组件依赖于内部状态或上下文,React.memo无法优化
  • 轻量级组件:对于渲染开销很小的组件,使用React.memo会得不偿失,因为浅比较本身也有一定开销。

什么场景会失效

  • 深层嵌套的props变化
  • 使用内联函数作为props
  • Context变化
  • hooks使用
  • 强制更新

什么场景会发挥作用

  • 单纯组件
  • 高阶组件
  • 复杂计算或数据处理的组件
  • 频繁更新的父组件
  • 性能敏感的应用