李家其

按照示例，在requestPullUp里面执行setData(data.concat(target))之后，列表会跳动，有没有办法在数据变化的时候页面不跳动，新的数据直接加在下面~

## 两个位置经纬度之间直线距离计算 > 需要计算两个经纬度之间的直线距离，实现类是定位打卡效果； 代码如下： ```js import MapUtils from '@/utils/mapUtils'; const calculateTwoPlaceDistance = () => { // 调用距离计算接口，注意两个坐标类型要一致，都是腾讯地图位置或者高德地图，否则需要自己转换 MapUtils.calculateDistance({ from: '24.622473,118.037944', // 起点坐标 to: '24.622154,118.039084', // 终点坐标 success: res =>...

## 基于react-multi-clamp实现的多行文本收起展开 经常有需求需要文本超过指定行数实现收起展开，该组件即可实现该需求; ### 代码实现 `MultiClamp.scss` ```scss .collapse{ color: #07b!important; cursor: pointer; display: inline; } ``` `MultiClamp.js` ```jsx import styles from './MultiClamp.scss'; import React, { useRef, useImperativeHandle, forwardRef } from...

## 状态的分层设计 ### 最底层的内置hook，不需要自己实现，官方直接提供 ### state分层 ### 简化状态更新方式的hook，更方便地进行不可变更新的目的 ahook`useSetState` 管理 object 类型 state 的 Hooks，用法与 class 组件的 `this.setState` 基本一致； ### 引入“状态 + 行为”的概念，通过声明状态结构与相应行为快速创建一个完整上下文 ### 针对通用业务场景进行封装，如分页的列表、滚动加载的列表、多选等。 ### 实际面向业务的实现。 ## react hook...

> `finally()` 方法返回一个[`Promise`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)。在promise结束时，无论结果是fulfilled或者是rejected，都会执行指定的回调函数。这为在`Promise`是否成功完成后都需要执行的代码提供了一种方式。 > > 这避免了同样的语句需要在[`then()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/then)和[`catch()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch)中各写一次的情况; `Promise.finally`存在兼容性问题，并不是所有的浏览器都支持，但是有`finally`又很方便，可以通过垫片实现； 单页应用入口`JS`引入如下代码： ```js import 'regenerator-runtime/runtime'; if (!Promise.prototype.finally) { // eslint-disable-next-line func-names Promise.prototype.finally = function (callback) { const P = this.constructor; return this.then( value =>...

图片加载异常同时显示`alt`文字说明和默认图片加载异常背景 图片默认最小高度和宽度为`48px `请务必自行根据项目设置图片高宽 使用： ```js import Img from './components/Img'; const Demo = () => { return ( ) } ``` 组件代码： ```jsx import '../styles/img.css'; import React from 'react'; export const...

## `rrweb`前端web页面录制与回放插件的使用和原理 > 可以将页面中的 DOM 以及用户操作保存为可序列化的数据，以实现远程回放; 主要模块：`rrweb-snapshot`，`rrweb-player` 运用场景： - 记录⽤户使⽤产品的⽅式并加以分析，进⼀步优化产品。 - 点击率、转换率、活动热度等来推进网站的运营和产品功能的迭代 - 采集⽤户遇到 bug 的操作路径，予以复现。 - 记录 CI 环境中的 E2E 测试的执⾏情况。 - 录制体积更⼩、清晰度⽆损的产品演⽰。 `rrweb`工作背景： - rrweb 对建立会话的页面建立一个初始的全量快照 - 并且以增量的方式记录用户的行为，包括...

`rrweb`和sentry合作，内置了这个功能； ```js #sentryConfig.js文件 import * as Sentry from '@sentry/react'; import { Integrations } from '@sentry/tracing'; import SentryRRWeb from '@sentry/rrweb'; const rrweb = require('rrweb'); Sentry.init({ dsn, integrations: [ new Integrations.BrowserTracing(), new...

sentryConfig.js ```js import * as Sentry from '@sentry/react'; import { Integrations } from '@sentry/tracing'; import SentryRRWeb from '@sentry/rrweb'; const rrweb = require('rrweb'); // 判断是不是公司环境 const checkCompanyEnvironment = () => {...

## Sentry安装使用记录 > Sentry 是一个开源的实时错误追踪系统，可以帮助开发者实时监控并修复异常问题,可以本地搭建也可以使用在线服务，为了满足上传源码，我们可以选择使用本地搭建 ### 优点 - 多平台支持 - 开源 - 实时收集、完整复现 - 为不同语言提供完整的复现上下文，方便定位 BUG；方便协同工作，可指定处理人员 - 隐私和安全 - 持续集成 ### 接入Sentry ​ 网上教程很多，这里就不在描述，记得找时间最近的教程； ​ 推荐：[Centos中安装Sentry](https://zhuanlan.zhihu.com/p/340937905) #### 配置 .env ​...