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

栏目: 服务器 · 发布时间: 7年前

内容简介：在重构的路上,总能写点什么东西出来这东西不复杂,丢出来,一方面当做笔记,一方面可以给有需要的人;用到技术点:

在重构的路上,总能写点什么东西出来

这东西不复杂,丢出来,一方面当做笔记,一方面可以给有需要的人;

用到技术点:

  • css module : 包括内置的继承特性,类似 less 的嵌套写法那种
  • 用到的 react 16.6 特性
    • lazy, Suspense 来实现子组件的懒加载
    • memo 让函数式组件有 PureComponent 的特性(浅比较)
  • flexbox 来布局

效果图

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

代码实现

index.js : 组件的主入口 

import React, { PureComponent, lazy, Suspense } from 'react';
import { Avatar } from 'antd';
import style from './index.css';

// 渲染不同内容的组件
const LazyComponent = lazy(() => import('./RenderContent'));

export default class index extends PureComponent {
  state = {
    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;
    if (!data || !Array.isArray(data) || data.length <= 0) {
      return null;
    }
    return {
      list: data,
    };
  }

  // 唤醒子组件的回调过程
  wakeUpLazyComponent = () => {
    return <div>loading.....</div>;
  };
  render() {
    const { list, loading } = this.state;
    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']}>
                  <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>
                  </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] (数组对象);

条目字段解释

  • 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'
  },

复制代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
禅与摩托车维修艺术

禅与摩托车维修艺术

(美)罗伯特·M.波西格 / 张国辰 / 重庆出版社 / 2011-9 / 36.00元

在一个炎热的夏天，父子两人和约翰夫妇骑摩托车从明尼苏达到加州，跨越美国大陆，旅行的过程与一个青年斐德洛研修科学技术与西方经典，寻求自我的解脱，以及探寻生命的意义的过程相互穿插。一路上父亲以一场哲学肖陶扩的形式，将见到的自然景色，野外露营的经历，夜晚旅店的谈话，机车修护技术等等日常生活与西方从苏格拉底以来的理性哲学的深入浅出的阐述与评论相结合，进行了对形而上学传统的主客体二元论的反思，以及对科学与艺......一起来看看 《禅与摩托车维修艺术》 这本书的介绍吧!

码农工具
JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2026 码农网 粤ICP备17054400号-3