problem: 记一次聊天框的表情包弹框不显示的找问题过程

左边是列表，包含了群和成员，右侧是聊天窗口。点击群列表，右侧显示群聊窗口，点击学员，右侧显示私聊窗口。

群聊窗口和私聊窗口是不同的组件，但是窗口中的子组件，例如窗口的头部、中间内容部分、输入框都是复用的同一个组件。

一个花了很长时间才定位到问题的bug：

群聊窗口的表情包弹窗怎么也不显示，但是私聊窗口的表情包弹窗总是可以正常显示，复用的都是同一个组件，而且本地都是正常的，到线上就出现这个问题。

起初完全没有入口定位，最初猜测是数据渲染问题，输入框组件中加载表情包的逻辑代码在组件没有渲染之前就执行了，然后给这段逻辑代码加了定时器延时。

仍然无效。

这个bug停滞了几天，感觉自己的思维力不够，不知道怎么去定位这个bug，花时间去看了《思维力》这本书，然后再来看这个bug。

首先界定问题：

这里适合思维力里面说的界定问题中的第三条，探究问题本质。

问题本质是什么呢？本地是可以的，线上的不可以，那么就应该对比一下线上和本地有什么不同。线上的数据扒下来在本地运行一下，也不行，和线上表现一致；那么对比一下线上的数据和本地有什么不同，发现线上的和本地的字段格式不同在于多了一个id字段；已经找到了问题的苗头，利用思维力中的5w来探究问题的根本，为什么这个id字段会导致群聊和私聊的表情包显示有差异？公用的组件中拿这个id字段有做什么逻辑处理？去看下组件，发现给组件用id绑定了key。去掉key，问题解决了！！解决这个问题的关键其实是发现当从私聊切换到群聊时，表情包中的内容元素不见了，display为none，让我意识到有一种在代码中添加了控制元素显示与隐藏的逻辑，所以是代码中有写什么影响元素显示的逻辑。如果掌握了找问题的方法论，完全可以不依靠经验去找问题本质。

回到问题本身：

vue中为了快速渲染元素会复用已有元素，复用就意味着会保留上一次的状态，如果不希望元素复用，可以给元素绑定一个唯一的key。

那为什么这里给聊天框中的子组件——输入框组件绑定了一个key，会导致群聊窗口表情包不能正常渲染呢？

这个问题涉及到 Vue的虚拟DOM算法，这里就不总结了。

总结：

这个问题虽然是自己给自己挖了一个坑，但是在解决这个问题的过程中，我真正的意识到真正解决问题的高手，不是在于他有多了解这个问题，对这个问题相关的知识积累了多少经验（就像《思维力》这本书中说的一样），而在于他具备解决问题的模式，利用解决问题的逻辑去推断出问题的本质原因。

当我最后用理性的逻辑推出这个问题的根本的时候，我真的感受到了一阵成就感，这种把一个自己当初完全没办法解决的问题，最后靠逻辑解决的成就感真的太让人兴奋了。希望2019年能有更多这样的体验。

转载于:https://www.cnblogs.com/yy95/p/10300982.html

problem: 记一次聊天框的表情包弹框不显示的找问题过程相关推荐

python 微信机器人自动聊天+回怼表情包+Adidas公众号自动抽签四、获取表情包中的文字并进行同类型回怼
前言在前文自动回怼表情包中, 只是做到爬取表情包存放在本地 ,然后当微信好友发送表情包给你的时候,随机抓取本地一个表情包进行回复.太不灵活识别表情包中的文字 from __future__ imp ...
Flutter 吐司弹框的使用 showToast弹框（插件）
Flutter 简单好用的 showToast 弹框先贴依赖版本可根据最新变页面代码实现效果 #flutter 中会用到一些fultter 实现起来麻烦的组件,而flutter的插件很多简单 ...
【微信聊天发的表情看不到，显示错误】
今天新遇到了一个问题,微信聊天的时候,别人发的表情看不到,加载不出来,我请教了一下度娘,终于解决了. 打开网络和Internet,关掉你的代理,就好了.
弹框点击弹框以外的地方弹框隐藏
$(function(){$('.screen-nav li').on('click',function(e){$('.screen-box').show();$(document).one('cli ...
表情包组件(vue)
其实很早都想在博客的留言和评论处使用表情包,奈何博客需要完善的地方太多.于是一直推到了这几天,具体实现效果在博客上可以看到. 在网上查了下,发现微信官方的表情包对外开放.具体规则想如下,于是就有了思路 ...
Qt Quick实现局域网聊天V4版本（支持GIF动图表情包、消息聊天、拖动缩放窗口、支持Linux编译）
Qt Quick实现局域网聊天V4版本(支持GIF动图表情包.消息聊天.拖动缩放窗口.支持Linux编译) 随着社交网络的普及,人们的聊天方式也变得更加高效和便捷.在这里,我们将利用Qt Quick构 ...
JavaFX+NIO聊天室第四篇表情包
设计思路表情包是我们聊天中经常使用的功能,他的实现有两种办法.一种是使用Unicode中编码的700多种的表情字符.另外一种是使用图片来充当表情包. 1.从2010年开始,unicode对emoji ...
同事说聊天没有表情，我在内网搭了一个表情包网站
起因公司大部分同事电脑没有外网权限,很多小伙伴跟我抱怨聊天木得表情包. 思路来了:下载表情包到本地,ssm快速搭一个简单网站在我的本机服务器上,表情包get. 结果爬表情这里参考(Ctrl+c) ...
GitHub 总星 4w+！删库？女装？表情包？这些沙雕中文项目真是我每天快乐的源泉！...
点击上方"AI遇见机器学习",选择"星标"公众号重磅干货,第一时间送达作者 | Rocky0429 来源 | Python空间大家好,我是 Rocky ...

problem: 记一次聊天框的表情包弹框不显示的找问题过程

problem: 记一次聊天框的表情包弹框不显示的找问题过程相关推荐

最新文章

热门文章