深剖前端面试之React：通关秘籍助你斩获offer

2023-09-17 15:35:04

前端面试中，React相关问题往往是重中之重，而本文将聚焦于React面试中一些典型的问题，从React keys到虚拟DOM，从组件到生命周期，全面剖析这些概念，并辅以具体的示例，助你轻松应对面试挑战，一举拿下offer。

React keys：识别元素，高效追踪

问题：React中keys的作用是什么？

解答： Keys是React用于追踪列表中元素被修改、添加或移除的辅助标识。有了key属性后，可以与组件建立一种对应关系，React根据key来决定是销毁重新创建组件还是更新组件。key相同，若组件属性有所变化，则更新组件；key不同，则销毁旧组件，创建新组件。

示例：

const List = () => {
  const items = [1, 2, 3];
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};

在这个示例中，我们使用了map方法来遍历items数组，并为每个元素添加了一个唯一的key属性。这个key属性就是元素的索引，它帮助React追踪列表中元素的变化。

React虚拟DOM：高效更新，优化性能

问题：React如何实现高效更新？

解答： React使用虚拟DOM来实现高效更新。虚拟DOM是一个与真实DOM相对应的内存中的数据结构，它包含了真实DOM的所有信息，包括元素的类型、属性和子元素。当状态发生变化时，React会先更新虚拟DOM，然后将更新后的虚拟DOM与真实DOM进行比较，只更新那些真正需要更新的部分。这种方式可以大大提高性能，减少不必要的DOM操作。

示例：

const App = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>+</button>
    </div>
  );
};

在这个示例中，我们使用useState hook来管理count状态。当用户点击按钮时，handleClick函数会被调用，count状态的值会增加1。React会先更新虚拟DOM，然后将更新后的虚拟DOM与真实DOM进行比较，发现只有count元素发生了变化，于是只更新count元素，而其他元素保持不变。

React组件：封装逻辑，复用代码

问题：React组件是什么？

解答： React组件是React应用的基本构建块。它可以将相关逻辑和数据封装在一个可复用的单元中。组件可以分为函数组件和类组件。函数组件是用函数编写的，而类组件是用ES6类编写的。组件可以嵌套使用，形成层级结构。

示例：

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>+</button>
    </div>
  );
};

在这个示例中，我们定义了一个名为MyComponent的函数组件。这个组件包含了一个状态count，一个用于增加count值的handleClick函数，以及一个用于显示count值的JSX片段。

React生命周期：管理组件生命

问题：React组件的生命周期是什么？

解答： React组件的生命周期由一系列钩子函数组成，这些钩子函数会在组件的不同阶段被调用。常见的生命周期钩子函数包括componentDidMount、componentDidUpdate、componentWillUnmount等。这些钩子函数可以让我们在组件的不同阶段执行特定的操作，例如在组件挂载时加载数据，在组件更新时更新数据，在组件卸载时清理资源等。

示例：

class MyComponent extends React.Component {
  componentDidMount() {
    // 在组件挂载后执行
    console.log('componentDidMount');
  }

  componentDidUpdate(prevProps, prevState) {
    // 在组件更新后执行
    console.log('componentDidUpdate');
  }

  componentWillUnmount() {
    // 在组件卸载前执行
    console.log('componentWillUnmount');
  }

  render() {
    return (
      <div>
        <p>Count: {this.props.count}</p>
      </div>
    );
  }
}