美团前端面试
当前状态: 一面可能要完了
现在就怕不考八股文的, 太抽象了
题目
两栏布局如何实现
可以使用flex布局中的flex-grow属性完成自适应
会自动占据剩下的空间, 举个例子
.container {
display: flex;
width: 600px;
}
.box {
border: 1px solid black;
padding: 10px;
}
.box1 {
flex-grow: 1; /* 扩展比例为1 */
}
.box2 {
flex-grow: 2; /* 扩展比例为2 */
}
.box3 {
flex-grow: 3; /* 扩展比例为3 */
}剩下的三个盒子会根据1.2.3的比例划分剩下的空间
react中组件传递的方式
父子组件之间传递就可以直接使用props
子组件向父组件传递数据, 可以在父元素中设置一个state, 然后将state的修改函数作为props的内容传递下去. 子组件中通过调用这个函数传递参数, 就可以实现向父组件传递数据的要求
全局状态可以使用redux或者跟组件提供provide,context进行托管.
如果微任务时间过于长
可以把微小任务拆分成更小的, 放在不同的任务队列中执行.
或者开多线程或者合理的优化算法
使用setTimeout暂时延迟这个任务
减少任务逻辑
关于useEffect
举个例子
useEffect(() => {
// 启动一个定时器
const timer = setTimeout(() => {
console.log('Timeout executed!');
}, 3000);
// 返回一个清理函数来清除定时器
return () => {
clearTimeout(timer);
console.log('Timeout cleared!');
};
}, []); // 空数组作为依赖项，表示只在组件挂载和卸载时执行如果依赖项本身是一个数组，并且你想要监听数组内容的变化，必须确保在状态变化时，React 能够检测到数组的引用变化。JavaScript 中，数组和对象是按引用传递的，因此 React 只会检查数组或对象的引用是否改变。如果只是修改了数组内容（如 .push() 或 .pop() 操作），引用不变，React 将不会触发 useEffect。
还有那些hooks?
- useState
- useEffect
- useContent(直接获取组件树中的公众数据)
- useReducer
redux的原理
redux是由社区维护的状态管理库, 使用reducer函数来处理动作逻辑,并对状态实现更新
大致使用流程如下
(1)设置初始状态
(2)设置reducer函数
(3)根据reducer函数创建出store
(4)如果想要更新, 就要使用useDispatch钩子, 参数为初始状态和action对象
(5)如果想要获取数据, 就要使用useSelector钩子,参数state就是状态对象 例如useSelector(state=>state.count)关于组件复用
笔试题目
实现一个深拷贝
function deepEqual(obj1, obj2) {
// 如果两个对象指向同一引用, 或者根本就是同一个基本数据，直接返回 true
if (obj1 === obj2) {
return true;
}
// 如果其中一个不是对象或者为 null，则返回 false
if (typeof obj1 !== 'object' || typeof obj2 !== 'object' || obj1 === null || obj2 === null) {
return false;
}
// 获取两个对象的键(转化为数组的形式)
const keys1 = Object.keys(obj1);
const keys2 = Object.keys(obj2);
// 如果键的数量不一致，则对象不相等
if (keys1.length !== keys2.length) {
return false;
}
// 递归比较每个键的值
for (let key of keys1) {
if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {
return false;
}
}
return true;
}转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 xranudvilas@gmail.com
