AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

React 16.x折腾记 - (7) 基于React+Antd封装聊天记录(用到React的memo,lazy, Suspense这些)

2022-05-11 316
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
对象存储 OSS，20GB 3个月
推荐场景：
基于PAI-EAS挂载OSS部署AIGC服务 ossutil工具管理OSS
对象存储 OSS，恶意文件检测 1000次 1年
对象存储 OSS，内容安全 1000次 1年
简介： 在重构的路上,总能写点什么东西出来 , 这组件并不复杂,放出来的总觉得有点用处一方面当做笔记,一方面可以给有需要的人; 有兴趣的小伙伴可以瞅瞅。


前言

在重构的路上,总能写点什么东西出来 , 这组件并不复杂,放出来的总觉得有点用处

一方面当做笔记,一方面可以给有需要的人; 有兴趣的小伙伴可以瞅瞅。


效果图



实现的功能

  • 渲染支持图片,文字,图文
  • 支持删除条目(并给予父回调)


用到技术点:


  • css module: 包括内置的继承特性,类似less的嵌套写法那种
  • 用到的react 16.6特性
  • lazy, Suspense来实现子组件的懒加载
  • memo让函数式组件有PureComponent的特性(浅比较)
  • flexbox来布局
  • 用了lodash的isEqual来深度比较对象,用于getDerivedStateFromProps(避免每次都更新state)


代码实现

index.js : 组件的主入口


import React, { PureComponent, lazy, Suspense } from 'react';
import { Avatar, Icon, Popover } from 'antd';
import style from './index.css';
// lodash 深比较
import isEqual from 'lodash/isEqual';
// 渲染不同内容的组件
const LazyComponent = lazy(() => import('./RenderContent'));
export default class index extends PureComponent {
  state = {
    deleteBtnSpin: false,
    loading: true,
    list: [
      {
        time: '2018-11-12 15:35:15',
        avatar:
          'https://sx-stag.oss-cn-shenzhen.aliyuncs.com/user-avatar/3_avatar.jpg?x-oss-process=image/resize,m_fixed,w_90,h_90/quality,q_90',
        nickname: '用户甲',
        pos: 1,
        voice:
          'https://sx-stag.oss-cn-shenzhen.aliyuncs.com/user-chat/3_508340417_c84f79407f5bc16b9e7ee0373631cf35.aac',
        text: '',
      },
      {
        time: '2018-11-12 15:36:15',
        avatar:
          'https://sx-stag.oss-cn-shenzhen.aliyuncs.com/user-avatar/3_avatar.jpg?x-oss-process=image/resize,m_fixed,w_90,h_90/quality,q_90',
        nickname: '用户甲',
        pos: 1,
        voice:
          'https://sx-stag.oss-cn-shenzhen.aliyuncs.com/user-chat/3_508340417_c84f79407f5bc16b9e7ee0373631cf35.aac',
        text: '',
      },
      {
        time: '2018-11-12 15:37:15',
        avatar:
          'https://sx-stag.oss-cn-shenzhen.aliyuncs.com/user-avatar/3_avatar.jpg?x-oss-process=image/resize,m_fixed,w_90,h_90/quality,q_90',
        nickname: '卡布奇诺',
        pos: 2,
        voice: '',
        text:
          '该词语多用于讽刺和揶揄调侃。也有送快递、查水电气、社区送温暖等引申说法。例如：（1）有人在网络上发表了不合乎相关法律法规或者破坏社会稳定和谐等消息而被警方捕；（2）在贴吧或论坛里拥有删帖权限的大小吧主，检查贴吧里是否存在灌水的帖子或跟帖，遇到就进行删除的行为。',
      },
      {
        time: '2018-11-12 15:38:15',
        avatar:
          'https://sx-stag.oss-cn-shenzhen.aliyuncs.com/user-avatar/3_avatar.jpg?x-oss-process=image/resize,m_fixed,w_90,h_90/quality,q_90',
        nickname: '卡布奇诺',
        pos: 2,
        voice: '',
        img:
          'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3040115650,4147729993&fm=26&gp=0.jpg',
        text:
          '该词语多用于讽刺和揶揄调侃。也有送快递、查水电气、社区送温暖等引申说法。例如：（1）有人在网络上发表了不合乎相关法律法规或者破坏社会稳定和谐等消息而被警方捕；（2）在贴吧或论坛里拥有删帖权限的大小吧主，检查贴吧里是否存在灌水的帖子或跟帖，遇到就进行删除的行为。',
      },
      {
        time: '2018-11-12 15:39:15',
        avatar:
          'https://sx-stag.oss-cn-shenzhen.aliyuncs.com/user-avatar/3_avatar.jpg?x-oss-process=image/resize,m_fixed,w_90,h_90/quality,q_90',
        nickname: '卡布奇诺',
        pos: 2,
        voice: '',
        img:
          'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3040115650,4147729993&fm=26&gp=0.jpg',
      },
    ],
  };
  static getDerivedStateFromProps(nextProps, prevState) {
    const { data } = nextProps;
    // 若是props和缓存state一致,则不更新state
    if (isEqual(prevState.prevData, nextProps.data)) {
      return null;
    }
    // 若是没有传入props也是
    if (!data || !Array.isArray(data) || data.length <= 0) {
      return null;
    }
    return {
      list: data,
      prevData: nextProps.data,
    };
  }
  // 唤醒子组件的回调过程
  wakeUpLazyComponent = () => {
    return <div>loading.....</div>;
  };
  // 悬浮条目显示删除按钮
  showOperatBtn = index => {
    let tmpList = [...this.state.list];
    tmpList = tmpList.map((item, innerIndex) => {
      if (index === innerIndex) {
        item.operatBtn = true;
      } else {
        item.operatBtn = false;
      }
      return item;
    });
    this.setState({ list: tmpList });
  };
  // 关闭操作按钮
  hideOperatBtn = index => {
    let tmpList = [...this.state.list];
    tmpList = tmpList.map((item, innerIndex) => {
      item.operatBtn = false;
      return item;
    });
    this.setState({ list: tmpList });
  };
  // 删除这条回复
  deleteCurrentReplay = (index, itemInfo) => {
    let tmpList = [...this.state.list];
    tmpList.splice(index, 1);
    this.setState({ list: tmpList });
    // 给父的回调,把该item的所有信息返回,外部再去执行接口操作什么的
    if (this.props.deleteItem) {
      this.props.deleteItem(itemInfo);
    }
  };
  render() {
    const { list, deleteBtnSpin } = this.state;
    // 是否显示操作区域
    const { operate } = this.props;
    // 渲染组件的前置条件
    const isRender = list && list.length > 0;
    return (
      <ul className={style['list-wrapper']}>
        {isRender &&
          list.map((item, listIndex) => {
            return (
              <Suspense fallback={this.wakeUpLazyComponent()} key={listIndex}>
                <li
                  className={style['list-item']}
                  onMouseOver={() => this.showOperatBtn(listIndex)}
                  onMouseLeave={() => this.hideOperatBtn(listIndex)}
                >
                  <span className={style['time']}>{item.time ? item.time : '时间占位符'}</span>
                  <div
                    className={
                      item.pos === 1
                        ? style['list-item-horizontal']
                        : style['list-item-horizontal-reverse']
                    }
                  >
                    <Avatar
                      shape="square"
                      src={
                        item.avatar
                          ? item.avatar
                          : 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'
                      }
                    />
                    <div
                      className={
                        item.pos === 1 ? style['content-wrapper-flex'] : style['content-wrapper']
                      }
                    >
                      <p className={item.pos === 1 ? style.nickname : style['nickname-right']}>
                        {item.nickname ? item.nickname : '用户昵称占位符'}
                      </p>
                      <div className={style.content}>
                        <LazyComponent {...item} />
                      </div>
                    </div>
                    {!!operate && item.operatBtn ? (
                      <Popover
                        content={'此操作会删除该记录'}
                        title="谨慎操作!"
                        onMouseEnter={() => {
                          this.setState({ deleteBtnSpin: true });
                        }}
                        onMouseLeave={() => {
                          this.setState({ deleteBtnSpin: false });
                        }}
                      >
                        <Icon
                          type="delete"
                          spin={deleteBtnSpin}
                          style={{
                            fontSize: 24,
                            alignSelf: 'flex-end',
                            color: `${this.state.deleteBtnSpin ? '#ec1414' : '#1890ff'}`,
                          }}
                          onClick={() => this.deleteCurrentReplay(listIndex, item)}
                        />
                      </Popover>
                    ) : null}
                  </div>
                </li>
              </Suspense>
            );
          })}
      </ul>
    );
  }
}


RenderContent.js:渲染对话条目


import React, { memo } from 'react';
import style from './index.css';
// antd 图文组件
import { Card } from 'antd';
const { Meta } = Card;
const RenderContent = memo(props => {
  if (props.img && props.text) {
    return (
      <Card
        hoverable
        style={{ width: 300 }}
        cover={<img alt="example" src={props.img ? props.img : ''} />}
      >
        <Meta description={props.text ? props.text : ''} />
      </Card>
    );
  }
  if (props.img) {
    return (
      <div className={style['img-wrapper']}>
        <img className={style['img-preview']} src={props.img ? props.img : ''} alt="photos" />
      </div>
    );
  }
  if (props.text) {
    return <div className={style['bubble']}>{props.text}</div>;
  }
  if (props.voice) {
    return <audio src={props.voice ? props.voice : ''} controls />;
  }
  return null;
});
export default RenderContent;


index.css : 样式


composes是css module能识别的特殊字段,用于继承其他样式的


/* 列表全局样式 */
.list-wrapper {
  list-style-type: none;
  list-style: none;
  padding-left: 0;
}
/* 列表基本样式 */
.list-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
  margin: 15px 0;
}
/* 水平展开 */
.list-item-horizontal {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
/* 右对齐方式变化 */
.list-item-horizontal-reverse {
  composes: list-item-horizontal;
  flex-direction: row-reverse;
}
/* 用户名 */
.nickname {
  font-size: 12px;
  padding:0 10px;
  color: #8a8484;
  margin-bottom: 5px;
}
/* 用户名右对齐 */
.nickname-right {
  composes: nickname;
  text-align: right;
}
/* 时间样式 */
.time {
  text-align: center;
  background-color: #cecece;
  color: #fff;
  border-radius: 3px;
  align-self: center;
  font-size: 12px;
  padding: 5px;
  margin:5px;
}
/* 内容区域 */
.content-wrapper {
  margin: 0 15px;
}
/* 弹性伸缩 */
.content-wrapper-responsive {
  flex: 1;
}
/* 气泡文字 */
.bubble {
  padding: 8px;
  color: #333;
  max-width: 300px;
  line-height: 1.5;
  background-color: #a7e544;
  border-radius: 3px;
  text-align: left;
  text-indent: 10px;
  margin:0 3px;
}
/* 图片预览 */
.img-wrapper {
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 2px 1px -1px rgba(0, 0, 0, 0.12);
  border-radius: 3px;
  padding: 5px;
}
.img-preview {
  max-width: 200px;
}


使用姿势

接受的props


  • data, 格式是[Obj](数组对象);
  • operate : 布尔值(是否显示操作区域)


列表条目字段解释


  • time: 时间
  • avatar: 用户头像
  • nickname:用户昵称
  • pos: 1 (1在左侧渲染,2在右侧渲染)
  • voice(音频)/text(文本内容)/ img(图片内容) => voice(唯一)/text + img / text(唯一)


{
    time: '2018-11-12 15:35:15',
    avatar:
      'https://sx-stag.oss-cn-shenzhen.aliyuncs.com/user-avatar/3_avatar.jpg?x-oss-process=image/resize,m_fixed,w_90,h_90/quality,q_90',
    nickname: '用户甲',
    pos: 1,
    voice:
      'https://sx-stag.oss-cn-shenzhen.aliyuncs.com/user-chat/3_508340417_c84f79407f5bc16b9e7ee0373631cf35.aac',
    text: '',
    img:
          'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3040115650,4147729993&fm=26&gp=0.jpg'
  },
文章标签：
对象存储
前端开发
关键词：
React Native lazy
React Native suspense
React Native memo
React Native封装
React Native antd
相关实践学习
借助OSS搭建在线教育视频课程分享网站
本教程介绍如何基于云服务器ECS和对象存储OSS，搭建一个在线教育视频课程分享网站。
crperx
目录
相关文章
六卿
|
3月前
|
前端开发 JavaScript
React项目路由懒加载lazy、Suspense，使第一次打开项目页面变快
本文介绍了在React项目中实现路由懒加载的方法，使用React提供的`lazy`和`Suspense`来优化项目首次加载的速度。通过将路由组件改为懒加载的方式，可以显著减少初始包的大小，从而加快首次加载速度。文章还展示了如何使用`Suspense`组件包裹`Switch`来实现懒加载过程中的fallback效果，并提供了使用前后的加载时间对比，说明了懒加载对性能的提升作用。
六卿
243 2
React项目路由懒加载lazy、Suspense，使第一次打开项目页面变快
夏天49597
|
1月前
|
前端开发 API UED
React 懒加载图片 Lazy Image
懒加载是一种优化技术，通过延迟加载不在视口内的图片，减少初始页面加载时间，提升用户体验。本文从基础概念入手，逐步探讨 React 中实现图片懒加载的常见问题、易错点及解决方案，并通过代码案例详细解释。
夏天49597
43 3
夏天49597
|
1月前
|
前端开发 API UED
React 按需加载 Lazy Loading
随着 Web 应用复杂度增加，页面加载速度成为影响用户体验的关键因素。React 提供了按需加载（Lazy Loading）功能，通过 `React.lazy` 和 `Suspense` 实现动态加载组件，减少初始加载时间，提升性能。本文从基础概念入手，探讨常见问题、易错点及解决方案，并通过代码示例详细说明。
夏天49597
36 0
夏天49597
|
2月前
|
缓存 前端开发 UED
React Suspense 懒加载详解
【10月更文挑战第18天】React Suspense 是 React 16.6 引入的新特性，主要用于处理异步数据获取和组件懒加载。本文从 Suspense 的基本概念出发，介绍了其在代码分割和数据获取中的应用，通过具体代码示例展示了如何使用 `React.lazy` 和 `Suspense` 实现组件的懒加载，并探讨了实践中常见的问题及解决方法，帮助开发者提升应用性能和用户体验。
夏天49597
108 1
听白
|
2月前
|
前端开发
React Memo
10月更文挑战第11天
听白
38 6
六卿
|
3月前
|
缓存 前端开发
React中函数式Hooks之memo、useCallback的使用以及useMemo、useCallback的区别
React中的`memo`是高阶组件，类似于类组件的`PureComponent`，用于避免不必要的渲染。`useCallback` Hook 用于缓存函数，避免在每次渲染时都创建新的函数实例。`memo`可以接收一个比较函数作为第二个参数，以确定是否需要重新渲染组件。`useMemo`用于缓存计算结果，避免重复计算。两者都可以用来优化性能，但适用场景不同：`memo`用于组件，`useMemo`和`useCallback`用于值和函数的缓存。
六卿
104 1
天涯学馆
|
4月前
|
资源调度 前端开发 API
React Suspense与Concurrent Mode：异步渲染的未来
React的Suspense与Concurrent Mode是16.8版后引入的功能，旨在改善用户体验与性能。Suspense组件作为异步边界，允许子组件在数据加载完成前显示占位符，结合React.lazy实现懒加载，优化资源调度。Concurrent Mode则通过并发渲染与智能调度提升应用响应性，支持时间分片和优先级调度，确保即使处理复杂任务时UI仍流畅。二者结合使用，能显著提高应用效率与交互体验，尤其适用于数据驱动的应用场景。
天涯学馆
78 20
土木林森
|
4月前
|
前端开发 UED
React Suspense 大揭秘！异步加载与优雅降级的神奇黑科技，让你的 React 应用更出色！
【8月更文挑战第31天】React Suspense 是 React 提供的一种处理异步数据加载和优雅降级的特性。它通过 `React.lazy` 和 `Suspense` 组件实现异步加载，在加载过程中显示提示信息，并通过错误边界组件 `Error Boundary` 捕获错误，避免应用崩溃，从而提升用户体验。
土木林森
102 0
土木林森
|
4月前
|
前端开发 UED 开发者
React.lazy()与Suspense：实现按需加载的动态组件——深入理解代码分割、提升首屏速度和优化用户体验的关键技术
【8月更文挑战第31天】在现代Web应用中，性能优化至关重要，特别是减少首屏加载时间和提升用户交互体验。React.lazy()和Suspense组件提供了一种优雅的解决方案，允许按需加载组件，仅在需要渲染时加载相应代码块，从而加快页面展示速度。Suspense组件在组件加载期间显示备选内容，确保了平滑的加载过渡。
土木林森
168 0
1313310884104708
|
4月前
|
前端开发 API
[译] 实战 React 18 中的 Suspense
[译] 实战 React 18 中的 Suspense
1313310884104708
104 0