阿里前端二面

40分钟，还是电话面，纯聊实习，0八股
1. 自我介绍
2. 讲一下你历段实习最有挑战性的项目
3. 讲一下你最近一次实习的项目

4. js里对象如何合并

-- 扩展运算符，Object.assign()
在 JavaScript 中，有几种方法可以合并对象的属性，下面是其中常用的几种方法：

Object.assign() 方法：
```
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObj = Object.assign({}, obj1, obj2);
console.log(mergedObj); // { a: 1, b: 3, c: 4 }
```
使用 Object.assign() 方法可以将多个对象的属性合并到一个目标对象中。如果多个对象有相同的属性，则后面的对象的属性值会覆盖前面的对象。
扩展运算符（Spread Operator）：
```
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // { a: 1, b: 3, c: 4 }
```
使用扩展运算符可以将一个对象的属性解构出来，然后合并到另一个对象中。与 Object.assign() 方法类似，如果多个对象有相同的属性，则后面的对象的属性值会覆盖前面的对象。

使用 Object.entries() 和 Array.reduce()：

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObj = Object.entries(obj1).concat(Object.entries(obj2))
                   .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
console.log(mergedObj); // { a: 1, b: 3, c: 4 }

这种方法先使用 Object.entries() 方法将对象转换为键值对数组，然后使用 concat() 方法合并数组，最后使用 reduce() 方法将数组转换回对象。

5. 怎么可以设置对象里的属性不可修改

-- defineProperty，Proxy
在 JavaScript 中，可以通过以下几种方式将对象的属性设置为不可修改：

Object.defineProperty()： 使用 Object.defineProperty() 方法可以定义对象的属性，通过设置 configurable、writable 和 enumerable 属性可以实现属性的不可修改。

const obj = {};
Object.defineProperty(obj, 'name', {
    value: 'John',
    writable: false, // 设置为不可写
    configurable: false // 设置为不可配置
});
obj.name = 'Alice'; // 这里的赋值操作会被忽略

Object.freeze()： 使用 Object.freeze() 方法可以冻结对象，使其属性不可修改、添加或删除。

const obj = { name: 'John' };
Object.freeze(obj);
obj.name = 'Alice'; // 这里的赋值操作会被忽略

使用类（ES6）： 在 ES6 中，可以使用类来定义对象，通过在类的构造函数中使用 Object.defineProperty() 或者 Object.freeze() 来设置属性不可修改。

class Person {
    constructor(name) {
        Object.defineProperty(this, 'name', {
            value: name,
            writable: false,
            configurable: false
        });
    }
}
const person = new Person('John');
person.name = 'Alice'; // 这里的赋值操作会被忽略

这些方法可以根据需要选择合适的方式来设置对象的属性为不可修改，保护对象的数据完整性和安全性。

6. React生命周期

React 组件的生命周期包括挂载阶段、更新阶段和卸载阶段，下面是 React 类组件中常用的生命周期方法：

挂载阶段（Mounting）：
- constructor()： 构造函数，在组件被创建并初始化 state 或绑定方法之前调用。
- static getDerivedStateFromProps()： 用于在 props 发生变化时更新 state，返回一个对象来更新 state，或者返回 null 表示不更新 state。
- render()： 渲染方法，用于生成组件的 UI。
- componentDidMount()： 在组件被挂载到 DOM 后立即调用，可以在这个方法中进行 DOM 操作或发起网络请求等异步操作。
更新阶段（Updating）：
- static getDerivedStateFromProps()： 更新阶段也可以调用 getDerivedStateFromProps() 方法。
- shouldComponentUpdate()： 在更新阶段之前调用，用于决定是否要重新渲染组件，默认返回 true。
- render()： 渲染方法，用于生成组件的 UI。
- getSnapshotBeforeUpdate()： 在更新 DOM 之前调用，可以读取 DOM 并在 componentDidUpdate() 中使用。
- componentDidUpdate()： 在更新操作完成后立即调用，可以在这个方法中执行 DOM 操作或发起网络请求等异步操作。
卸载阶段（Unmounting）：
- componentWillUnmount()： 在组件被卸载和销毁之前立即调用，可以在这个方法中清理定时器、取消网络请求或清理组件中的其他资源。

此外，React 还提供了一些少用的生命周期方法，如：

componentDidCatch()： 用于捕获组件生命周期中的错误，类似于 JavaScript 中的 try-catch 语句。
UNSAFE_componentWillMount()、UNSAFE_componentWillReceiveProps()、UNSAFE_componentWillUpdate()： 这些方法被标记为不安全的，在 React 17 版本后被废弃，不建议使用。

需要注意的是，React Hooks 也提供了一种函数式的方式来管理组件的生命周期，如 useEffect()、useLayoutEffect()、useEffect() 等，它们可以替代类组件中的生命周期方法，使组件更加简洁和灵活。

8. 面试官猛和我探讨实习项目里有关forwardRef的细节，lz这里被问住了，因为确实没深入了解

在 React 中，forwardRef 是一种高阶组件技术，用于在函数组件中转发 ref 到其子组件。通常情况下，函数组件无法接收 ref，但通过 forwardRef 可以将 ref 传递给函数组件的子组件。

在实习项目中，面试官可能会询问关于 forwardRef 的一些细节，例如：

用途： 你是如何使用 forwardRef 的？为什么需要使用 forwardRef？在你的项目中有哪些场景使用了 forwardRef？
API： forwardRef 函数的签名是怎样的？它接受哪些参数？返回值是什么？你是否知道 forwardRef 的其他相关 API，例如 useImperativeHandle？
实现原理： 你是否了解 forwardRef 的实现原理？它是如何将 ref 传递给子组件的？是否了解 React 的 ref 转发机制？
注意事项： 在使用 forwardRef 时，有哪些注意事项需要考虑？例如，是否需要对接收 ref 的组件进行包装？是否需要手动转发其他属性？
与类组件的区别： forwardRef 和类组件中的 ref 有何区别？它们在使用上有何异同之处？
性能影响： forwardRef 是否会影响组件的性能？在什么情况下应该使用或避免使用 forwardRef？

面试官可能通过这些问题来考察你对 forwardRef 的理解程度以及在实际项目中的运用经验。因此，在准备面试时，建议你对 forwardRef 的用法、API、实现原理以及与类组件的区别等方面有一个清晰的理解，并能够举一些具体的例子来说明。

当面试官探讨实习项目中关于 forwardRef 的细节时，我可以这样回答：

用途： 在我们的实习项目中，我们使用 forwardRef 主要是为了在函数组件中转发 ref 到其子组件。这样可以使得函数组件可以像类组件一样接收 ref，并且可以对子组件进行操作，例如聚焦、滚动等。
API： forwardRef 函数的签名是 React.forwardRef((props, ref) => {})。它接受一个函数作为参数，函数的参数包括 props 和 ref，并且返回一个 React 组件。除了 forwardRef 之外，我也了解到了另一个相关的 API，即 useImperativeHandle，它可以用于在函数组件中自定义暴露给父组件的实例值。
实现原理： forwardRef 的实现原理是通过 ref 转发机制来实现的。它通过 forwardRef 函数接收一个函数组件，并在该函数组件内部将 ref 传递给子组件。子组件可以通过 forwardRef 函数中的第二个参数 ref 来接收 ref，并进行相应的操作。
注意事项： 在使用 forwardRef 时，需要注意的是，子组件必须是支持 ref 的组件，否则转发 ref 将不起作用。此外，在转发 ref 时，可能需要额外的处理来确保其他属性也被正确地转发。
与类组件的区别： forwardRef 和类组件中的 ref 在使用上的主要区别是，forwardRef 可以让函数组件像类组件一样接收 ref，并且可以对子组件进行操作。但与类组件不同的是，forwardRef 并不能访问实例属性，因为函数组件本身是无状态的。
性能影响： forwardRef 的使用并不会直接影响组件的性能，但需要注意在过度使用 ref 转发时可能会导致组件层级过深，从而影响应用的性能。因此，在使用 forwardRef 时，需要谨慎考虑是否真正需要在函数组件中使用 ref。

10. 反问：是二轮面吗？是。总共几轮技术面？3轮。学习react有没有什么好的建议？项目里学，多写
整个过程很chill，完全没有面八股，上面几个基础问题也是基于实习项目问出来的，感觉聊的还行，希望能给个三面

作者：夜阑hhhhh
链接：www.nowcoder.com/feed/main/d…
来源：牛客网

前端面试题详解整理49| forwardRef的细节React生命周期 对象如何合并 ，Object.defineProperty

阿里前端二面

4. js里对象如何合并

5. 怎么可以设置对象里的属性不可修改

6. React生命周期

8. 面试官猛和我探讨实习项目里有关forwardRef的细节，lz这里被问住了，因为确实没深入了解

前端面试题详解整理49| forwardRef的细节React生命周期对象如何合并，Object.defineProperty