React的面试题

1. 什么是React中的JSX？它与普通JavaScript有什么区别？

答：

• JSX（JavaScript XML）： JSX是一种类似XML的语法扩展，用于在JavaScript代码中描述UI组件结构。它允许我们在JavaScript中编写类似HTML的代码，提高了组件的可读性和开发效率。

• 区别： JSX最终会被转译为普通的JavaScript对象，因此它与普通JavaScript并无本质区别。不过，JSX使得在React中描述UI更加直观和易于理解。

---

2. 什么是React中的单向数据流？为什么推荐使用单向数据流？

答：

• 单向数据流： 在React中，数据流动是单向的，即数据从父组件通过属性传递给子组件，子组件无法直接修改父组件的数据。任何数据变化都需要通过回调函数或状态管理工具来实现。

• 推荐使用单向数据流的原因： 单向数据流使得数据流动更加可控和可预测，降低了组件间的耦合度，便于程序的维护和调试。同时也符合React组件化开发的思想，有利于组件的复用和独立性。

---

3. 什么是React中的高阶组件（HOC）？它的作用是什么？举例说明。

答：

高阶组件是一个函数，接受一个组件作为参数，并返回一个新的增强过的组件。它用于组件之间的代码复用，可以在不改变原始组件的情况下添加额外的功能。

举例：比如一个withLoading高阶组件，可以接收一个组件作为参数，并在组件加载时显示loading状态，示例代码如下：

const withLoading = (WrappedComponent) => {
  return function WithLoading(props) {
    if (props.isLoading) {
      return <div>Loading...</div>;
    } else {
      return <WrappedComponent {...props} />;
    }
  };
};

const EnhancedComponent = withLoading(MyComponent);

---

4. 什么是React中的context？它的作用是什么？何时应该使用context？

答：

• context： Context提供了一种在组件之间共享数据的方法，避免通过props层层传递数据。它包括Provider和Consumer两部分，Provider用于提供数据，Consumer用于消费数据。

• 作用： context可以方便地在组件树中共享数据，特别适合跨多层次的组件之间共享数据，例如主题、用户身份信息等。

• 何时使用： 应该谨慎使用context，通常在数据需要在组件树中的多个层级传递且不经常变化时使用，避免滥用context导致组件之间的耦合度增加。

---

5. 什么是React中的错误边界（Error Boundary）？它的作用是什么？如何创建一个错误边界？

答：

• 错误边界： 错误边界是一种React组件，用于捕获并处理其子组件树中任何地方的JavaScript错误，防止整个应用崩溃。

• 作用： 错误边界可以提高应用的稳定性和用户体验，使得应用可以优雅地处理错误，显示备用UI或错误信息。

• 创建方法： 创建一个错误边界很简单，只需定义一个自定义组件并实现componentDidCatch(error, info)生命周期方法来捕获错误，示例代码如下：

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  componentDidCatch(error, info) {
    this.setState({ hasError: true });
    // 可以在这里记录错误信息或发送错误报告
  }

  render() {
    if (this.state.hasError) {
      return <div>Something went wrong.</div>;
    }
    return this.props.children;
  }
}