React
文章平均质量分 87
狮子大大
这个作者很懒,什么都没留下…
展开
-
React 实践 - 获取历史聊天消息
分页加载原因在一个系统数据很大,在接口数据交互,海量数据查询,服务器接口返回的数据不可能一次性返回。数据量大,从数据库一次性查询,再到网络传输是要花费更多的时间客户端才能响应拿到数据进行 UI 界面渲染。从接口拿到大量数据渲染,Web 端会造成界面卡顿,移动端处理大量数据,会出现 OOM。所以获取数据可以通过分页加载的方式处理数据和UI交互。这样解决性能问题,让 UED 效果更好一点。通常前端可以通过上拉刷新、下拉加载更多等方式。解决当前聊天问题在单聊,会获取聊天历史记录,分页拉取获取原创 2021-03-20 18:32:12 · 850 阅读 · 0 评论 -
React 实践 - 集成 Socket 实现消息接收
回顾React 构建聊天界面SpringBoot 聊天消息持久化SpringBoot 集成 netty-socketioWebsocketWebSocket 协议在 2008 年诞生,2011 年成为国际标准。所有浏览器都已经支持了。它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一种。参考:WebSocket 教程 http://www.ruanyifeng.com/blog/2017/05/websocket原创 2021-03-20 18:31:32 · 1119 阅读 · 0 评论 -
React 实践 - 存储、刷新令牌
上一篇:React 网络请求 对接登录 API前端存储localstoragelocalStorage 方法存储的数据没有时间限制存储方式:以键值对(Key-Value)方式存储,永久存储,永不失效,除非手动删除常用 API:getItem // 获取记录setIten// 保存记录removeItem //移除记录clear // 清除记录sessionstorageHTML5 本地存储 API 中 localStorage 与 sessionStorage 在使用方原创 2021-03-20 18:29:33 · 361 阅读 · 0 评论 -
React 实践 - 构建聊天界面
上一篇: React 体验开箱即用实现步骤 - 目录定义基于 antd.design-pro 脚手架在 layouts 添加聊天界面布局在 pages 目录添加聊天界面文件结构├── src│ ├── layouts│ │ ├── layouts│ │ ├── ChatLayout.jsx # 聊天布局│ │ ├── ChatLayout.less # 聊天布局样式│ ├── pages│ │ ├── Im│ │ │ ├─原创 2021-03-20 18:27:20 · 2263 阅读 · 1 评论 -
React 实践 - 网络请求 对接登录 API
上一篇 React 体验开箱即用任何一个系统,提供交互能力的前提,需要通过网络进行数据传递到落地。最原始的网络请求,浏览器进行可以通过 XMLHttpRequest 对象发起请求。现在有很多网络请求模块,对 XMLHttpRequest 进行了封装,最常用的 Axios前端常用请求框架 AxiosAxios 使用于前端浏览器和 Node.js 服务端请求。浏览器端发起请求是封装了 XMLHttpRequest, Node 端发起请求使用 Node.js 原生 http/https 模块。网络请求方原创 2021-03-20 18:25:16 · 664 阅读 · 0 评论 -
React 实践 - 体验开箱即用
插件化的企业级前端应用框架 UmijsUmi,中文可发音为乌米,是可扩展的企业级前端应用框架。Umi 以路由为基础的,同时支持配置式路由和约定式路由,保证路由的功能完备,并以此进行功能扩展。然后配以生命周期完善的插件体系,覆盖从源码到构建产物的每个生命周期,支持各种功能扩展和业务需求。深度整合 antd、dva,比如国际化、权限、数据流、配置式路由、补丁方案、自动化 external 方面等等一线开发者才会遇到的问题。约定式路由:不需要手写配置,文件系统即路由,通过目录和文件及其命名分析出路由配原创 2021-03-20 18:23:10 · 646 阅读 · 1 评论 -
React 实践 - 开发常用框架
使用 React,实际开发中常用框架UI 框架 antd.design路由管理 (SPA ) react-router-dom状态管理 redux,mobx,dvaUI 框架 antd.designnpm install antd // (不带版本,安装最新版本)npm install react-app-rewired customize-cra // 默认配置进行自定义/* package.json */"scripts": {- "start": "react-scr原创 2021-03-20 18:22:16 · 297 阅读 · 0 评论 -
React 实践 - 快速上手
React 简介React 起源于 Facebook 内部项目,用来架设 Instagram 网站,并于 2013 年 5 月开源。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。React 主要的原理Virtual DOM 虚拟 DOM; 传统的 web 应用,操作 DOM 一般是直接更新操作的,DOM 更新通常是比较昂贵的。而 React 为了尽可能减少对 DOM 的操作,提供了一种不同的而又强大的方式来更新 DOM,代替直接的 DOM 操作。就是 Virtual原创 2021-03-20 18:20:29 · 179 阅读 · 0 评论