产品：查看此页面，我想在此处，在这里显示您的化身，在这里您必须在这里显示用户名。这里的头像是一个小组。必须显示多个化身。
发展：仍然有。
产品：尚未加载头像，或者加载失败，或者如果没有化身，请改用用户名。文字化身的规则就是这样...
发展：还有吗？
产品：好吧，如果可以的话，添加超纤维化风格的头像？
发展：嗯，我尝试。
开发：嘿，哥们，您如何给我这个化身的数据，原始数据中没有这样的字段。
服务器：这不容易处理，^（＆^*＆）％&&（**＆）^）％＆，我可以向您打开接口，您可以通过用户ID获取AVATAR数据
发展：嗯，做到。我接受需求
（半小时后）
产品：（喜欢）
这就是我期望的，卷起袖子，开始干燥
主意：
实施代码基于ANTD的头像组件。
尽管有许多功能，但某些功能已经实现了头像组件。例如，数据包/气泡提示/圆形/方形/文本图标和其他功能。
主要问题是阿凡达的数据获取。我们可以设置对象来缓存阿凡达数据。设置队列以收集要获得的阿凡达数据请求。如果没有后续请求或其他请求或其他请求或其他请求，则设置与稳定相似的时钟间隔300ms间隔。获得数据后，写入缓存并返回到组件。
有一个大概的主意。实现它。
让我们首先解决超纤维化的问题。尝试很多解决方案。目前，可以使用该解决方案，但并不完美。
让我们意识到一般的逻辑
图片将异步加载。如果图片仍在请求中，则应使用文本化身来替换它。这将是更滑的。
让我们意识到通过UserId获得化身的逻辑
相应地修改组件部分
这是什么用？因为获得获得的组件是异步，因此将有一个数据仍在请求中。目前，我们破坏了组件，但该请求并未共同销毁。请求结束后，调整了回调，并调整了回调。它仍将执行，但此时组件已消失，并且控制台将报告警告。如果回调中有一些副作用，则影响会更大。
因此，任何组件都涉及异步，您必须注意是否存在副作用，并且要及时清除。
最后，还有另一个问题是，该组件涉及与业务相关的代码，即该界面，我不希望我使用该组件：事实：情况：
所以
您可能不会遇到我遇到的场景，但是仍然可以参考某些想法：
这些技术很熟悉，并且通常用于将来的组件。
期待下面的 - up -up React组件开发共享。
原始：https：//juejin.cn/post/709831596075302920