React常见面试题

一、React中的样式管理有哪些方法

内联样式：对象，作用于当前组件
普通样式表：作用于全局，文件名是：xxx.scss
CSS模块：类似Vue的scoped，文件名需是：xxx.module.scss，作用于当前组件
CSS-in-JS库：具有一定的学习成本。例如：
- styled-components：star最多
- emotion: 体积最小
- JSS
- radium
- ...

二、什么是React的代码分割（Code Splitting）？如何实现代码分割？

React的代码分割（Code Splitting）

是一种将应用程序代码分割成多个较小文件的技术，以实现按需加载和优化应用程序性能的目的。

如何实现代码分割：
- 使用动态import：通过将需要分割的组件或模块包装在import()函数中
- 使用React.lazy和Suspense组件: React.lazy函数可以接受一个函数，该函数返回一个Promise，该Promise解析为一个React组件。。而Suspense组件可以用来在组件加载完成之前显示一个加载中的界面
- 使用Webpack的代码分割功能:

ts 复制代码

import React, { lazy, Suspense } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </div>
  );
}

ts 复制代码

// 使用Webpack的代码分割功能: 
module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

三、什么是React的错误边界（Error Boundary）？如何使用错误边界处理组件中的错误？

1、什么是React的错误边界（Error Boundary）？

当React组件中发生错误时，错误边界（Error Boundary）是一种React组件，它通过实现特定的生命周期方法捕获并处理这些错误，从而防止整个组件树崩溃。

2、如何使用错误边界处理组件中的错误？

创建一个错误边界组件，可以是一个普通的React组件
在错误边界组件中实现componentDidCatch生命周期方法，该方法将在子组件抛出错误时被调用。可以通过error和info参数来获取错误信息和错误堆栈信息。可以根据需要处理错误，例如显示错误信息或发送错误报告。

创建错误边界组件：

ts 复制代码

import React from 'react'

class ErrorBoundary extends React.Component {
  constructor(props: any) {
    super(props)
    this.state = { hasError: false }
  }
  static getDerivedStateFromError(error: any) {
    return { hasError: true, error }
  }
  componentDidCatch(error: any, errorInfo: any) {
    // 可以在这里记录错误信息或发送错误报告
    console.error(error, errorInfo, '错误信息')
  }
  render() {
    if (this.state.hasError) {
      return <h1>出现错误！</h1>
    }
    return this.props.children
  }
}

export default ErrorBoundary

使用错误边界组件包裹可能出错的组件

ts 复制代码

import ErrorBoundary from '@/components/ErrorBoundary'
import BgBox from './_Components/BgBox'
const Home = () => {
  return (
    <>
      <ErrorBoundary>
        <BgBox />
      </ErrorBoundary>
    </>
  )
}
export default Home

模拟出错的组件BgBox

ts 复制代码

export default function BgBox() {
  throw new Error('错误信息测试')
}

四、什么是React的Fragment？它的作用是什么？

1、什么是React的Fragment？

React的Fragment是一种组件，它允许将多个子元素组合成一个组件而无需添加额外的DOM元素

2、Fragment作用：

减少不必要的包裹元素，提高代码的可读性

ts 复制代码

<React.Fragment>
  <p>Hello</p>
  <p>World</p>
</React.Fragment>

// 简写：
<>
  <p>Hello</p>
  <p>World</p>
</>

五、React的上下文（context）是一种在组件树中共享数据的方式

React性能优化

使用shouldComponentUpdate生命周期方法：控制组件是否进行更新，可以避免不必要的更新
使用React.memo和React.PureComponent： React.memo是一个高阶组件，用于对函数组件进行记忆化，只有在组件的props发生变化时才会重新渲染。React.PureComponent是一个基于浅比较的Pure组件，只有在props或state发生变化时才会重新渲染
使用React.lazy和React.Suspense： React.lazy和React.Suspense可以实现组件的懒加载
使用memoization：通过使用memoization技术，可以将一些计算结果缓存起来，避免重复计算
useMemo() 可以缓存计算结果
避免在render方法中进行复杂的计算或操作： render方法会在组件更新时被调用，如果在render方法中进行复杂的计算或操作，会导致性能下降
使用 React Fragments 避免额外标记：即虚拟的顶层标签 <></>
避免使用内联样式属性