阿里国际lazada前端一面 9.26

正常问。

为什么会有hooks。 React Hooks 的出现是为了解决类组件的一些问题，并提供更简洁、灵活的方式来管理组件的状态和副作用。主要原因包括：

1. 逻辑复用：在类组件中，如果要共享状态逻辑或副作用逻辑，需要使用高阶组件、render props 或者使用 Mixin 等方式，这些方式增加了组件的复杂性。而 Hooks 提供了 useState、useEffect 等钩子函数，使得逻辑的复用更加简单和直观。

2. 减少代码量：使用 Hooks 可以大大减少组件的代码量，不再需要定义类组件、使用 this 关键字，以及手动绑定事件处理函数。Hooks 更符合函数式编程的思想，代码更加简洁易懂。

3. 避免 this 的问题：在类组件中，需要注意绑定事件处理函数时的 this 指向问题，有时需要手动绑定或者使用箭头函数来确保 this 的正确性。而函数组件中不涉及 this，避免了这类问题的发生。

4. 更好的性能优化：使用 Hooks 可以更容易地优化组件的性能，因为 Hooks 的设计更有利于使用 memoization 和更精确地控制副作用的执行时机。

总的来说，React Hooks 的出现是为了提供更简单、更灵活、更强大的组件开发方式，使得开发者可以更专注于组件的逻辑和功能实现，而不必过多关注类组件中的一些繁琐细节。

手撕两个：能写出来

1.react钩子函数倒计时组件

下面是一个基于 React Hooks 的简单倒计时组件示例：

import React, { useState, useEffect } from 'react';

const CountdownTimer = ({ initialSeconds }) => {
  const [seconds, setSeconds] = useState(initialSeconds);

  useEffect(() => {
    const timer = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds - 1);
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  useEffect(() => {
    if (seconds === 0) {
      clearInterval(timer);
    }
  }, [seconds]);

  return (
    <div>
      <h2>Countdown Timer</h2>
      <p>Seconds Remaining: {seconds}</p>
    </div>
  );
};

export default CountdownTimer;

在这个组件中，我们使用了 useState 来定义一个 seconds 状态，用于存储倒计时剩余的秒数。然后使用 useEffect 来启动定时器，每秒更新剩余秒数。当倒计时结束时，清除定时器。

你可以像这样使用这个组件：

import React from 'react';
import ReactDOM from 'react-dom';
import CountdownTimer from './CountdownTimer';

ReactDOM.render(
  <React.StrictMode>
    <CountdownTimer initialSeconds={60} />
  </React.StrictMode>,
  document.getElementById('root')
);

这个组件会渲染一个简单的倒计时器，初始秒数为60秒，每秒递减，直到倒计时结束。

2.不用flat扁平化数组

如果不使用 flat 方法来扁平化数组，可以使用递归的方式来实现。下面是一个示例实现：

function flattenArray(arr) {
  let result = [];
  arr.forEach(item => {
    if (Array.isArray(item)) {
      result = result.concat(flattenArray(item));
    } else {
      result.push(item);
    }
  });
  return result;
}

// 示例用法
const nestedArray = [1, 2, [3, 4, [5, 6]], 7, [8]];
const flattenedArray = flattenArray(nestedArray);
console.log(flattenedArray); // 输出：[1, 2, 3, 4, 5, 6, 7, 8]

这个 flattenArray 函数会递归地遍历数组，如果遇到数组元素则继续递归调用自身，直到遍历到非数组元素为止，然后将所有非数组元素收集起来返回一个扁平化的数组。

反问了一些东西稍微救了一下，他跟我说好好准备二面。

建议：某些点我可以展开说，没踩到他想要的点。反馈认为我是他面试过4个里面比较认可的一个。

别的候选人虽然八股熟，但是看出来开发经验是不足的，看我的掘金觉得我能折腾。

属于有心了，现在还认真看简历并且看写的博客的面试官很少了。。。

作者：boscograb
链接：www.nowcoder.com/discuss/536…
来源：牛客网