首页 > 其他分享 >上述代码传递一个对象的化,是否容易造成子组件的多次重复渲染

上述代码传递一个对象的化,是否容易造成子组件的多次重复渲染

时间:2024-03-19 09:24:14浏览次数:19  
标签:渲染 多次重复 useCallback compProps record props 组件

const renderStartTime = useCallback((text, record, idx, changeTableData) => {
	return (
		<CacheRender
			dataIndex="startTime"
			controlRules={() => startTimeRules(record, idx, measTableRef.current)}
			compType="input"
			type="number"
			compProps={{
				min: 1,
				max: 9999,
				hasAuto: true,
				precision: 2,
			}}
			step={0.01}
			controls
			placeholder="1-9999"
			text={text}
			record={record}
			changeTableData={changeTableData}
		/>
	)
}, [])

在React中,useCallback Hook 有助于优化性能,通过缓存回调函数来避免在父组件每次渲染时生成新的引用,进而避免不必要的子组件重新渲染。

在你给出的代码片段中,renderStartTime 是一个使用 useCallback 缓存的函数,它的依赖数组是空数组 []
这意味着除非在组件生命周期中有其他因素导致其闭包变量发生变化,否则 renderStartTime 回调函数的引用不会在每次父组件渲染时更改。

compProps 是作为 CacheRender 组件的一部分传递的一个对象。
只要这个对象的内容在每次渲染时保持不变,即使它是一个新创建的对象,也不会引起 CacheRender 组件的不必要的重新渲染。
这是因为React在进行浅比较时,会对比前后两个props对象的每个键值对是否相同,而不是比较它们的引用。

然而,如果有以下情况之一,CacheRender 组件可能会因 compProps 内部值的改变而重新渲染:

  • startTimeRules 函数内部有任何依赖于外部状态或props的值发生了变化,尽管在当前代码中并未体现出来。
  • compProps 中的 minmaxprecisionstep 等值在父组件的状态或props中变动。

综合来看,只要你确保 compProps 对象的属性值在每次渲染时保持一致,就不会因为 compProps 的传递而导致 CacheRender 组件的不必要的重复渲染。
但如果其内部值依赖于不断变化的状态或props,就需要考虑是否有必要将其加入到 useCallback 的依赖数组中,或者优化那些会导致 compProps 内部值频繁变化的状态管理。

标签:渲染,多次重复,useCallback,compProps,record,props,组件
From: https://www.cnblogs.com/longmo666/p/18082005

相关文章

  • 【20.2】Django框架Form组件之渲染HTML代码
    【一】引入forms组件只会帮我们渲染用户输入的标签(input/select...)【二】书写forms组件forms.pyfromdjangoimportforms#定义form类classMyForm(forms.Form):#username:字符串类型最小三位,最大八位username=forms.CharField(max_length=8,min......
  • 【20.1】Django框架Form组件之常用字段及插件
    【零】引入创建Form类时主要涉及到【字段】和【插件】字段用于对用户请求数据的验证插件用于自动生成HTML;【一】Field.clean(value)注意:这里说的是字段Field的clearn方法,不是表单Form的clean方法。虽然表单字段的Field类主要使用在Form类中,但也可以直接实例化它们来......
  • 【20.4】Django框架Form组件之钩子函数(Hook)
    【一】什么是钩子函数在forms组件中钩子函数(Hooks)是用来在特定事件发生时执行自定义逻辑的函数。它们提供了一种创建交互性和动态行为的方式,并可以用于处理表单的各种状态和数据。【二】常见的钩子函数【1】onInputChange当输入框的值发生变化时触发。你可以通过这个......
  • 【20.3】Django框架Form组件之渲染错误信息
    【一】定义form组件forms.py#定义form类classMyForm(forms.Form):#username:字符串类型最小三位,最大八位username=forms.CharField(max_length=8,min_length=3,label="用户名",error_messages={......
  • 【20.6】Django框架Form组件之模型表单ModelForm
    【一】引入如果你正在构建一个数据库驱动的应用,那么你可能会有与Django的模型紧密映射的表单。比如,你有个BlogComment模型,并且你还想创建一个表单让大家提交评论到这个模型中。在这种情况下,写一个forms.Form类,然后在表单类中定义字段,这种一般创建表单的做法是冗余的,因为你已经......
  • 【20.5】Django框架Form组件之源码
    【一】切入点切入点form_obj.is_valid()defis_valid(self):"""ReturnTrueiftheformhasnoerrors,orFalseotherwise."""returnself.is_boundandnotself.errors如果is_valid要想返回True那么self.is_bound要为Trueself.errors......
  • 【20.0】Django框架之Form组件
    【一】Django的表单系统【1】使用表单(1)原始表单我们之前在HTML页面中利用form表单向后端提交数据时都会写一些获取用户输入的标签并且用form标签把它们包起来。与此同时我们在好多场景下都需要对用户的输入做校验比如校验用户是否输入输入的长度和格式等正不正确。......
  • 前端学习-vue视频学习009-defineProps(子组件接收父组件的数据)
    尚硅谷视频链接defineProps-只接收父:要有数据letpersonList=reactive<personArr>([{id:'qqq1',name:'aaa',age:10,gender:'F'},{id:'qqq2',name:'vvv',age:30,gender:'F'},{id:'qq......
  • HarmonyOS-基础之内置组件学习
    1、Image图片组件鸿蒙内置组件Image的4种写法//鸿蒙内置Image图片组件案例@Entry@ComponentstructImagePage{build(){Column({space:20}){//1、图片的第一种写法media文件夹下Image($r('app.media.pig')).width(200).height(200);//2......
  • 微信小程序自定义组件
    微信小程序中的自定义组件是指在微信小程序中创建的可重用的、可复用的组件,它可以被多个页面使用。自定义组件可以帮助我们提高开发效率,提高代码的可维护性和可重用性。以下是微信小程序中自定义组件的使用方法:一.创建自定义组件首先,我们需要在微信小程序中创建一个自定......