巴中微信开发 做网站,郑州app推广,wordpress本地备份,大数据获客React常见面试题
一、React中的样式管理有哪些方法
内联样式#xff1a;对象#xff0c;作用于当前组件普通样式表#xff1a; 作用于全局#xff0c;文件名是#xff1a;xxx.scssCSS模块#xff1a;类似Vue的scoped#xff0c; 文件名需是#xff1a;xxx.module.scs…React常见面试题
一、React中的样式管理有哪些方法
内联样式对象作用于当前组件普通样式表 作用于全局文件名是xxx.scssCSS模块类似Vue的scoped 文件名需是xxx.module.scss作用于当前组件CSS-in-JS库具有一定的学习成本。例如 styled-componentsstar最多emotion: 体积最小JSSradium…
二、什么是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 (divSuspense fallback{divLoading.../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 reactclass 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 (ErrorBoundaryBgBox //ErrorBoundary/)
}
export default Home模拟出错的组件BgBox
export default function BgBox() {throw new Error(错误信息测试)
}四、什么是React的Fragment它的作用是什么
1、什么是React的Fragment React的Fragment是一种组件它允许将多个子元素组合成一个组件而无需添加额外的DOM元素 2、Fragment作用 减少不必要的包裹元素提高代码的可读性 React.FragmentpHello/ppWorld/p
/React.Fragment// 简写
pHello/ppWorld/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 避免额外标记 即虚拟的顶层标签 /避免使用内联样式属性
