微信小程序hidden属性，你真的用对了吗？

我刚入行那会儿，带我的老组长最爱在code review时问一句话：“你这hidden属性，真的非用不可吗？”当时我不服气，觉得他就是事儿多。后来踩了无数坑，才明白他问的其实是：你到底懂不懂小程序渲染原理。今天咱们就把这个看似简单的hidden属性掰开揉碎了聊聊，看完你可能会发现，自己以前写的不少hidden，其实都用错了地方。

先搞明白一件事：hidden到底是怎么工作的。微信小程序的WXML最终会被编译成原生组件树，而hidden属性本质上是给元素加了一个`display: none`的样式。注意，是样式，不是移除节点。这意味着元素还在DOM树里躺着，只是看不见了。这和`wx:if`有本质区别——`wx:if`是直接不渲染这个节点，条件为假时连DOM都不会创建。很多新手分不清这俩，结果就是该用hidden的地方用了wx:if，导致频繁创建销毁组件，性能白白损耗；该用wx:if的地方用了hidden，结果一堆隐藏节点占着内存，页面越来越卡。

举个例子，你做一个商品列表，每个商品有个展开详情的按钮。如果用wx:if控制详情区域，每次点击展开都要重新创建组件实例，如果详情里还有图片、视频，那个卡顿感简直酸爽。但如果你用hidden，详情区域从一开始就渲染好了，只是隐藏，点击时切换display即可，流畅得多。反过来，如果一个弹窗你只在特定条件下才显示，平时根本不需要，那你用hidden就是浪费——弹窗内部如果有定时器、地图组件、视频播放器，这些玩意儿即使hidden了，也照样在后台运行，耗电耗内存，这时候就该用wx:if彻底销毁。

再往深一层说，hidden还有个容易被忽略的特性：它不触发组件的生命周期。你用`wx:if`控制组件显示时，组件会走`attached`、`ready`这些生命周期函数；用hidden切换时，组件从头到尾就初始化一次，后续只是样式变化。这个特性在某些场景下是好事，但在另一些场景下就是坑。比如你的组件需要在每次显示时重置状态、重新拉数据，那用hidden就麻烦了——组件不会重新走生命周期，数据还是旧的。你得自己监听显示事件，手动处理逻辑，稍不注意就出bug。

我见过最典型的错误，是有人在自定义组件里用hidden控制内部某个区块的显隐。结果发现组件外部怎么切换hidden，内部样式都不生效。为啥？因为hidden属性在自定义组件上有特殊的样式隔离规则。组件外的hidden样式根本穿不透组件边界，你得在组件内部自己定义hidden的样式覆盖，或者干脆用`wx:if`。这种问题排查起来特别费劲，有时候你折腾一晚上，发现就是少写了一行`!important`。

还有性能上的账，很多人算不明白。hidden元素虽然不显示，但它的布局信息还在计算。如果一个hidden的容器里嵌套了深层的列表，列表数据特别长，那渲染引擎照样得为这些看不见的节点计算布局，这就是为什么有些页面明明隐藏了大部分内容，滚动起来还是卡。这时候你就得考虑，是不是该把隐藏内容拆出来，用`wx:if`按需渲染。但注意，频繁切换`wx:if`也有代价，所以正确做法是分层：首屏必须显示的用hidden控制显隐切换，非首屏的懒加载内容用wx:if。

另外，hidden在动画场景下也有坑。你想做一个淡入淡出的效果，用hidden先隐藏，然后通过过渡动画显示。结果发现动画根本不执行——因为hidden直接改的是`display`属性，而`display: none`过渡到`display: block`是无法触发CSS过渡动画的。你得先让元素显示，再改变透明度，或者用`visibility`配合`opacity`。很多人在这个问题上卡半天，只能绕道用`wx:if`加动画库，其实理解了hidden的原理，就能找到更优雅的解法。

咱们再说个实际场景。小程序里有个搜索页，输入框下面有个历史搜索记录区域。用户没输入时，这个区域应该隐藏；一输入就显示。这个场景用hidden就很合适，因为历史记录区域不涉及复杂组件，就是几个标签，而且用户可能频繁切换输入状态，用hidden避免反复渲染，体验更顺滑。但如果你这个历史记录区域用了`scroll-view`，里面还有长列表，那就要掂量了——hidden状态下scroll-view照样会计算滚动高度，列表长的话还是会有性能损耗，这时候可能就得考虑用`wx:if`了。

还有个细节，hidden在真机上的表现和开发者工具里不完全一致。工具里一切正常，手机上就是显示不出来，或者隐藏不掉。这通常和基础库版本、自定义组件的样式隔离都有关系。所以写完hidden逻辑，一定要在真机上多测几个机型，别偷懒只跑模拟器。

回到标题那个问题：hidden你真的用对了吗？我的答案是，大部分人都没完全用对。这东西看着简单，但牵扯到渲染机制、生命周期、样式隔离、动画表现，每个层面都有讲究。我的建议是，下次写hidden之前，先问自己三个问题：这个元素需要频繁切换显隐吗？它内部有复杂组件或长列表吗？它在自定义组件里吗？想清楚这三个问题，你自然就知道该用hidden还是wx:if了。工具没有好坏，用对了地方才见功力。