首页 > 其他分享 >React进阶篇——十三、注意事项

React进阶篇——十三、注意事项

时间:2022-10-31 17:57:11浏览次数:278  
标签:逻辑 静态方法 包装 ref React 进阶篇 注意事项 组件 高阶

十三、注意事项

  • 为了在开发和调试阶段更好的区别包装了不同组件的高阶组件,需要对高阶组件的显示名称做自定义处理。常用的处理方法是,把被包装组件的显示名称也包到高阶组件的显示名称中。
  • 不要在组件的render方法中使用高阶组件,尽量也不要在组件的其他生命周期方法中使用高阶组件。因为调用高阶组件,每次都会返回一个新组件,于是每次render,前一次高阶组件创建的组件都会被卸载,然后又重新挂载本次创建的新组件,既影响效率,又丢失组件及其子组件的状态。所以,高阶组件最适合使用的地方是在组件定义的外部,这样就不会受到组件生命周期的影响。
  • 如果需要使用被包装组件的静态方法,那么必须手动复制这些静态方法。因为高阶组件返回的新组件不包含被包装组件的静态方法。
  • refs不会被传递给被包装组件。尽管在定义高阶组件时,我们会把所有的属性都传递给被包装组件,但是ref并不会传递给被包装组件。如果在高阶组件的返回组件中定义了ref,那么它指向的是这个返回的新组件,而不是内部被包装的组件。如果希望获取被包装组件的引用,那么可以自定义一个属性,属性的值是一个函数,传递给被包装组件的ref。
  • 与父组件的区别。高阶组件是一个函数,关注的是逻辑,父组件是一个组件,关注的是UI/DOM。如果逻辑是与DOM直接相关的,那么这部分逻辑适合放到父组件中;如果不直接相关,那么这部分逻辑适合使用高阶组件抽象,如数据请求。请求发送等。

 

标签:逻辑,静态方法,包装,ref,React,进阶篇,注意事项,组件,高阶
From: https://www.cnblogs.com/sxww-zyt/p/16845202.html

相关文章

  • React进阶篇——十二、继承方式实现高阶组件
    十二、继承方式实现高阶组件前面介绍的高阶组件的实现方式都是由高阶组件处理通用逻辑,然后将相关属性传递给被包装组件,我们称这种实现方式为属性代理。除了属性代理,还可以......
  • java进阶篇——Stream流编程
    Stream流函数式接口1.消费型接口——Consumer@FunctionalInterfacepublicinterfaceConsumer<T>{/***对给定的参数执行此操作。**@param......
  • React Native(windows)--项目环境相关问题
    (一)、命令行一:查看连接的虚拟机或真机:执行命令:adbdevices二:在虚拟机或真机上打包项目执行命令:yarnreact-nativerun-android三:真机或虚拟机调出调试执行命令:adbshe......
  • js/react方法学习
    前言:最近看一个react工程,发现好多预发都不会,看代码如同雾里看花。 conststr='hello'constnewstr=str.split('').reduce(function(prev,current){const......
  • React
    来点前端1.介绍React是一个用于构建用户界面的JavaScript库空模板展示<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>HelloWorl......
  • SpringBoot集成Redisson报错RedissonReactiveRedisConnection.close()
    SpringBoot集成redisson-spring-boot-starter报错:点击查看代码2022-10-3109:30:10.255WARN92312---[isson-netty-2-4]io.netty.util.concurrent.DefaultPromise......
  • 面试官:说说React-SSR的原理
    前言所谓同构,简而言之就是,第一次访问后台服务时,后台直接把前端要显示的界面全部返回,而不是像SPA项目只渲染一个<divid="root"></div>剩下的都是靠JavaScript脚本去......
  • 面试官:你是怎样进行react组件代码复用的
    mixinMixin设计模式Mixin(混入)是一种通过扩展收集功能的方式,它本质上是将一个对象的属性拷贝到另一个对象上面去,可以拷贝多个属性到一个对象上,为了解决代码复用问题。常......
  • react框架下GSAP动画插件-ScrollTrigger的使用介绍
    ScrollTrigger插件这个插件是基于GSAP使用的,ScrollTrigger仅仅是用来控制触发动画,而GSAP才是用来操作元素。react框架使用ScrollTrigge,首先是引入ScrollTriggerimport......
  • vue3 reactive函数
    reactive的用法与的用法相似,也是将数据变成响应式数据,当数据发生变化时也会自动更新。不同的是用于基本数据类型,而是用于复杂数据类型,比如对象和数组例如:定义一个对象类型......