微信小程序条件渲染-- wx:if 与 hidden区别

条件渲染 顾名思义所谓的条件渲染,就是通过条件来判断是否需要渲染该代码块。

条件渲染主要是用到wx:if 和 block wx:if 这两个,

第一个相信好理解,第二个是在block里面进行条件渲染,这里我们特别说明一下< block/>并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。和我们以前的逻辑编程类似,既然有了wx:if ,那么我们也会有wx:elseif和wx.else,这几个组合起来,可以使条件渲染更加灵活。 在这里官方文档中提到了一个wx:if和hidden的对比,通过合理的运用这两种方法可以使你的程序更优。

下面我们就是说说他们俩的区别:

因为wx:if之中也可能包含数据绑定,所以当wx:if的条件值切换时,框架有一个局部渲染的过程,他会确保条件在切换是销毁或者重新渲染。同时wx:if也是有惰性的,如果初始渲染条件为false,框架什么也不会做,只有在条件第一次变为真的时候才会开始渲染。相比之下hidden就简单的多,组件始终都会被渲染,只是简单的控制显示和隐藏,一般来说,wx:if 有更高的切换消耗,而hidden有更高的初始渲染消耗,你可以根据自己的需求来调用。 wx:if 与 hidden 都可以控制微信小程序中元素的显示与否。 wx:if 是遇 true 显示,hidden 是遇 false 显示。

他们还有一层细微的区别: wx:if 在隐藏的时候不渲染,而 hidden 在隐藏时仍然渲染,只是不呈现。 所以如果频繁切换的话,用 wx:if 将会消耗更多资源,因为每次呈现的时候他都会渲染,每次隐藏的时候,他都会销毁。 如果切换并不频繁的话,用 wx:if 相对来说较好些,因为它会避免初始就一下渲染那么多。

总结 频繁切换:用 hidden。 偶尔切换:用 wx:if。

转载地址:https://blog.csdn.net/yelin042/article/details/72519081

猜你喜欢

转载自blog.csdn.net/Bright2017/article/details/82818093