说说你对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(如useState、useEffect等)时,组件内部的状态发生变化或触发副作用时,也会导致组件的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使用
- 强制更新
什么场景会发挥作用
- 单纯组件
- 高阶组件
- 复杂计算或数据处理的组件
- 频繁更新的父组件
- 性能敏感的应用