React常见面试题
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的代码分割功能:
import React, { lazy, Suspense } from 'react';const MyComponent = lazy(() => import('./MyComponent'));function App() {return (<div><Suspense fallback={<div>Loading...</div>}><MyComponent /></Suspense></div>);
}
// 使用Webpack的代码分割功能:
module.exports = {// ...optimization: {splitChunks: {chunks: 'all',},},
};
三、什么是React的错误边界（Error Boundary）？如何使用错误边界处理组件中的错误？
1、什么是React的错误边界（Error Boundary）？
当React组件中发生错误时，错误边界（Error Boundary）是一种React组件，它通过实现特定的生命周期方法捕获并处理这些错误，从而防止整个组件树崩溃。
2、如何使用错误边界处理组件中的错误？
- 创建一个错误边界组件，可以是一个普通的React组件
- 在错误边界组件中实现componentDidCatch生命周期方法，该方法将在子组件抛出错误时被调用。可以通过error和info参数来获取错误信息和错误堆栈信息。可以根据需要处理错误，例如显示错误信息或发送错误报告。
创建错误边界组件：
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
使用错误边界组件包裹可能出错的组件
import ErrorBoundary from '@/components/ErrorBoundary'
import BgBox from './_Components/BgBox'
const Home = () => {return (<><ErrorBoundary><BgBox /></ErrorBoundary></>)
}
export default Home
模拟出错的组件BgBox
export default function BgBox() {throw new Error('错误信息测试')
}
四、什么是React的Fragment？它的作用是什么？
1、什么是React的Fragment？
React的Fragment是一种组件，它允许将多个子元素组合成一个组件而无需添加额外的DOM元素
2、Fragment作用：
减少不必要的包裹元素，提高代码的可读性
<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 避免额外标记： 即虚拟的顶层标签 <></>
- 避免使用内联样式属性