React render方法的原理,在什么时候会触发?

在React中,类组件的render涉及的是render方法,而函数组件本身即为render过程。jsx在render函数内被转为JS代码,React通过比较新旧render结果并应用diff算法来更新DOM。setState在类组件中会导致render,但useState在函数组件中会检查状态变化才决定是否render。props改变不一定会触发render,除非来自有状态的父组件。
摘要由CSDN通过智能技术生成

在类组件和函数组件中,render函数的形式是不同的。

在类组件中render函数指的就是render方法;而在函数组件中,指的就是整个函数组件。

在render函数中的jsx语句会被编译成我们熟悉的js代码

在render过程中,React 将新调用的 render函数返回的树与旧版本的树进行比较,这一步是决定如何更新 DOM 的必要步骤,然后进行 diff 比较,更新 DOM树

触发机制:

类组件调用 setState 修改状态 函数组件通过useState hook修改状态。函数组件通过useState这种形式更新数据,当数组的值不发生改变了,就不会触发render

总结:

render函数里面可以编写JSX,转化成createElement这种形式,用于生成虚拟DOM,最终转化成真实DOM

在React 中,类组件只要执行了 setState 方法,就一定会触发 render 函数执行,函数组件使用useState更改状态不一定导致重新render

组件的props 改变了,不一定触发 render 函数的执行,但是如果 props 的值来自于父组件或者祖先组件的 state

在这种情况下,父组件或者祖先组件的 state 发生了改变,就会导致子组件的重新渲染

所以,一旦执行了setState就会执行render方法,useState 会判断当前值有无发生改变确定是否执行render方法,一旦父组件发生渲染,子组件也会渲染

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值