首页 > 其他分享 >React面试题: 我是否可以在项目中不断使用React.Component来优化项目

React面试题: 我是否可以在项目中不断使用React.Component来优化项目

时间:2023-11-02 17:26:18浏览次数:27  
标签:面试题 渲染 项目 Component React 组件 PureComponent

React.PureComponent 是 React 的一个组件,主要用于性能优化,可以避免不必要的渲染。它的主要特点是:

  • 如果组件的 props 和 state 没有发生变化,则不会重新渲染(此处原理类似React.memo)
  • 可以自动检查对象和数组,判断其是否需要重新渲染(是浅比较)

但是,React.PureComponent 的缺点也很明显:

  • 不支持嵌套的 React.PureComponent 和 PureComponent (纯组件)不兼容,只能应用于顶层组件,这是他不能滥用的原因
  • 不支持副作用,比如数据获取, 所以他功能有限,特殊前端开发场景中需要我们支持副作用的情况,他是不能用的
  • 对象引用发生变化时,需要重新渲染,因为是浅层对比 prop 和 state 的方式来实现了该函数。 所以一旦对象引用变化它就变化,一旦业务变化,一发而牵其身的效果(很美妙)。

综上所述,React.PureComponent 可以提高 React 应用的性能,但是也存在一些限制,需要谨慎使用

Pitfall: 目前React 18 官方已经不推荐使用,并且有了更好的代替方案,但是老项目中的使用 尤其是业务逻辑复杂的类组件中式需要了解的。

 

标签:面试题,渲染,项目,Component,React,组件,PureComponent
From: https://www.cnblogs.com/lelouchulu/p/17805838.html

相关文章

  • 面试题: 前端处理滚动穿透这个顽疾
    诚如你所知:滚动穿透是指在移动端滑动页面的过程中,页面滚动受到了触摸事件的干扰,导致无法流畅地滚动,这主要是由于事件冒泡造成的。解决方法如下:监听touchmove事件,阻止默认行为监听touchmove事件,阻止事件的默认行为,防止事件冒泡到父元素上。禁止滚动可以通过over......
  • React面试题: useCallBack()与React.memo的区别与使用常见场景
    React.usecallback与React.memo的区别:React.useCallback和React.memo是两种不同的优化方式:主要功能:它们都可以避免不必要的渲染,提高React应用的性能。React.useCallback是Hoc(高阶组件)的解决方案,可以用于优化函数组件和Class组件,注意这里适用于React高阶组件的渲染解......
  • bash脚本面试题
    (20231102)面试题:三剑客专题|cnblogs|ZhangHefind找出/test.dir目录下的文件名中包含test关键字的文件并将其全部删除方法一:使用find命令和通配符配合删除文件find/test.dir-typef-name'*test*'-execrm{}+解释:find/test.dir:在/test.dir目录下进行查找......
  • 直播小程序源码,react-native自定义文本输入框
    直播小程序源码,react-native自定义文本输入框Examplesfromprops: ... _onChange=(label,value)=>{  this.setState({[label]:value}); }; render(){  return(   <Viewstyle={styles.container}>    <Text>     {this.stat......
  • React Native在非组件的地方使用页面跳转(interceptors拦截器处跳转页面)
    官方文档:https://reactnavigation.org/docs/navigating-without-navigation-prop/修改APP.jsimport{NavigationContainer}from'@react-navigation/native';import{navigationRef}from'./RootNavigation';exportdefaultfunctionApp(){r......
  • 无涯教程-React Native - 运行IOS
    如果您想在IOS模拟器中测试您的应用程序,则只需在终端中打开应用程序的根文件夹并运行-react-nativerun-ios上面的命令将启动模拟器并运行该应用程序。我们还可以指定我们要使用的设备。react-nativerun-ios--simulator"iPhone5s在模拟器中打开应用程序后,可以在IOS上按......
  • 无涯教程-React Native - 路由
    在本章中,我们将了解ReactNative中的导航。步骤1-安装路由首先,我们需要安装Router路由,我们将在本章中使用ReactNativeRouterFlux,您可以在终端的项目文件夹中运行以下命令。npmireact-native-router-flux--save步骤2-应用代码由于我们希望Router处理整个应用程序......
  • 无涯教程-React Native - 调试
    Reactnative提供了两种方法来帮助调试代码。在AppDeveloper菜单中您可以通过按command+D在IOS模拟器上打开开发人员菜单。在Android模拟器上,您需要按command+M。Reload                - 用于重新加载模拟器。您可以使用快捷键......
  • #yyds干货盘点#react-native 设置环境变量- react-native-dotenv
    实现方式1.安装react-native-dotenvnpminstallreact-native-dotenv--save//或者yarnaddreact-native-dotenv2.在你的.babelrc(如果没有新建一个)文件中配置一下设置简单配置,都使用默认参数{"plugins":[["module:react-native-dotenv"]]}定制配置,自定义{"pl......
  • 无涯教程-React Native - 环境设置
    您需要安装几件事来为ReactNative设置环境。我们将使用OSX作为构建平台。步骤1-安装create-react-native-app在系统中成功安装NodeJS和NPM之后,您可以继续安装create-react-native-app(全局显示如下)。C:\Users\Learnfk>npminstall-gcreate-react-native-app步骤2-创......