小红书面试手写发布订阅手写深拷贝循环依赖怎么解决 vite和webpack有了解过吗最近关注的热点和新知识有什么

刚面试完，先记录一下问题，后续补充答案

手写发布订阅

手写深拷贝

循环依赖怎么解决

方法1：重构代码以打破循环依赖

最直接的方式是通过重构代码，消除模块之间的直接依赖。以下是一些具体方法：

提取公共逻辑到新模块 如果两个组件共享某些逻辑导致循环依赖，可以将共享逻辑提取到一个独立的模块（例如工具函数、Hook 或上下文）中。

// utils.js
export const sharedLogic = () => {
  // 共享逻辑
};

// ComponentA.js
import { sharedLogic } from './utils';
export default function ComponentA() {
  sharedLogic();
  return <div>Component A</div>;
}

// ComponentB.js
import { sharedLogic } from './utils';
export default function ComponentB() {
  sharedLogic();
  return <div>Component B</div>;
}

将子组件移到父组件中 如果循环依赖是因为父子关系中的反向引用，可以将子组件的逻辑内联到父组件中，或者通过Props传递子组件的引用。

javascript

// Parent.js import ComponentB from './ComponentB'; export default function Parent() { return <ComponentB parentCallback={() => console.log('Callback')} />; } // ComponentB.js export default function ComponentB({ parentCallback }) { return <button onClick={parentCallback}>Click me</button>; }

方法2：使用延迟加载（Lazy Loading）

React 提供了 React.lazy 和 Suspense 来实现动态导入，这可以有效避免循环依赖问题，因为模块只有在需要时才会被加载。

javascript

// ComponentA.js import React, { lazy, Suspense } from 'react'; const ComponentB = lazy(() => import('./ComponentB')); export default function ComponentA() { return ( <Suspense fallback={<div>Loading...</div>}> <ComponentB /> </Suspense> ); } // ComponentB.js export default function ComponentB() { return <div>Component B</div>; }

通过 React.lazy，ComponentB 只有在渲染时才会被加载，避免了立即导入导致的循环依赖。

方法3：使用React Context或状态管理

如果循环依赖是因为组件之间需要共享状态或数据，可以使用React Context或外部状态管理库（如Redux、Zustand）来管理状态，从而避免直接的组件依赖。

javascript

// Context.js import { createContext, useContext } from 'react'; const AppContext = createContext(); export const AppProvider = ({ children }) => { const value = { /* 共享状态 */ }; return <AppContext.Provider value={value}>{children}</AppContext.Provider>; }; export const useAppContext = () => useContext(AppContext); // ComponentA.js import { useAppContext } from './Context'; export default function ComponentA() { const context = useAppContext(); return <div>Component A</div>; } // ComponentB.js import { useAppContext } from './Context'; export default function ComponentB() { const context = useAppContext(); return <div>Component B</div>; }

vite和webpack有了解过吗

最近关注的热点和新知识有什么

跨域是怎么产生的，处理跨域有什么方式呢

css的单位有哪些，em和rem是什么区别

如何实现响应式布局

在js中如何解决循环依赖，在react中如何解决循环依赖

set和weekset有了解过吗

什么情况会产生内存泄漏，如何解决呢

装饰器有了解过吗

了解过那些Ai方面的新技术

实现左侧固定右侧自适应的布局

大模型的通信方式有哪些

针对表格组件点击其他位置自动关闭修改功能

怎么理解BFC

块级格式化上下文，可以把BFC理解为一个隐藏的属性，当我们开启BFC之后，我们的元素就会具有以下特征：

首先BFC会成为一个独立的布局环境

子元素的垂直外边距不会传递给父元素

开启BFC之后元素不会被浮动元素所覆盖

开启BFC之后元素可以包含浮动元素并且高度不会塌陷

那么如何开启BFC呢

开启BFC的方式都是通过一些属性的副作用，我们的目的就是找到一种可以开启BFC同时副作用比较小的方式

浮动元素会开启BFC，让父元素float，就会包裹浮动子元素。但是这样的问题就是父元素也会脱离文档流，这样也会让后面的元素上来
将overflow设置为一个非visible的值
绝对定位也会开启BFC，position: absolute;
display: inline-block;
display: flex;
display: flow-root; 这个是开启BFC的最好的一个属性副作用最小

清除浮动的思路有两种：

开启BFC

clear:both清除浮动产生的影响

小红书面试