Leanote's Blog

组件

// ElevatorScroll.vue
<template>
  <div
    class="elevator-container"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
    ref="elevatorContainerRef"
  >
    <div
      class="section"
      v-for="(item, index) in items"
      :key="item.id"
      :ref="`section-${index}`"
    >
      <slot :item="item.list" :index="index"></slot>
    </div>
    <div v-if="showHint && consistentDirection" :class="['scroll-hint', hintPosition]"
         :style="{ opacity: hintOpacity }">{{ hintMessage }}
    </div>
  </div>
</template>
<script>
export default {
  props: {
    items: {
      type: Array,
      required: true,
    },
    activeSectionDate: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      startY: 0,
      currentY: 0,
      hasMoved: false, // 用于记录是否发生了有效滑动
      hintOpacity: 0,
      showHint: false,
      hintMessage: '',
      hintPosition: 'hint-bottom',
      initialDirection: n

组件

// CurrentWeekMenu.vue
<template>
  <div class="CurrentWeekMenu_root">
    <div class="week_box">
      <div v-for="(item, index) in weekList" :key="item.id" class="week-item_box"
           :class="activeSectionDate === index ? 'active' : ''" @click="scrollToSection(index)">
        <div class="week-item_name">{{ item.name }}</div>
        <div class="week-item_date">{{ item.date }}</div>
      </div>
    </div>
    <div class="food-menu_box" ref="foodMenuBoxRef">
      <div class="food-menu-group_box" v-for="(weekItem, weekIndex) in thisWeek" :key="weekIndex"
           :id="'food-menu-group_' + weekIndex">
        <div class="food-menu-item_box" v-for="item in weekItem" :key="item.id" :id="item.id"
             @click="checked = !checked">
          <div class="food-menu-item_img">
            <van-image
              width="2.13333rem"
              height="1.52rem"
              fit="cover"
              :src="item.imgUrl"
            >

const ForwardTable = React.forwardRef(InternalTable) as <RecordType extends object = any>(
  props: React.PropsWithChildren<TableProps<RecordType>> & { ref?: React.Ref<HTMLDivElement> },
) => React.ReactElement;
// so u can use
<Table<{id: string, b: number}>  />

type InputRefType<T> = T extends React.Ref<infer ElementType> ? ElementType : never;
const inputRef = useRef<HTMLInputElement>(null)
type MyInputRefType = InputRefType<typeof inputRef>
const a: React.MutableRefObject<MyInputRefType> = inputRef
a.current?.focus()

在 React 中，React.Ref，React.RefObject 和 React.MutableRefObject 是三个不同的类型。

• React.Ref 是一个泛型接口，它定义了 React 元素的类型，用于表示该元素所引用的对象的类型，例如 DOM 元素和自定义组件。

• React.RefObject<T> 是一个泛型类型，它是 React.Ref 的具体实现，用于引用可变的对象。它表示一个引用，该引用可以包含对某个具体对象的引用，并且可以通过 current 属性访问引用对象。在大多数情况下，当我们需要引用 DOM 元素时，我们使用 React.RefObject。

• React.MutableRefObject<T> 也是一个泛型类型，它是 React.RefObject 的子类型，它提供了一种访问当前引用的可变版本。current 属性是一个可变的对象，可以通过它来更改当前引用指向的对象。在某些情况下，例如使用 useRef 创建引用对象时，可能需要使用 React.MutableRefObject。

综上所述，React.Ref 是一个泛型接口，React.RefObject 是它的具体实现，并且用于引用不可变对象，而 React.MutableRefObject 是 React.RefObject 的子类型，它提供了访问该引用的可变版本。通常情况下，我们使用 React.RefObject 来引用 DOM 元素，在某些情况下，可能需要使用 React.MutableRefObject。

1. 图片地址没带任何图片标识(如.png或者http://xxx?id=11)后缀
2. 刚刚上传的图片回显不出来
   上传图片后图片的status属性一直是uploading状态，图片上传成功，却一直是进度条状态。
   解决方法是在 onCancel={this.handleCancel}回调方法开头加setFileList([…data.fileList]);
3. 其他官网未显示可用配置
   可配置 onSuccess={e => onSuccess(e)}获取请求返回结果

测试网站

• jsperf
• jsfiddle
• JSBench
  执行并比较不同 JavaScript 代码片段的执行速度。 通过简单而简短的 URL 与他人在线共享和协作。

合并

性能测试结论

在循环比较多或者操作的数组长度比较大的情况下：

1. Object.assign 多数情况下性能比 展开运算符(...) 的性能高
2. 数组自带的方法 connat、push 性能比 展开运算符(...) 的性能高

小结

在 Chrome版本94.0.4606.81 、 Firefox版本93.0 (64 位) 的浏览器下

• 对象合并，数组合并，Object.assign、connat 的性能会比 展开运算符“...” 的性能高
• Object.assign 会触发 Proxy/Object.definedProperty 的 set 方法，展开运算符“...” 不会触发
• Object.assign 和 展开运算符 都是浅拷贝
• 合并对象、数组的时候，展开运算符放在前面的性能比放在后面的性能高
• 不定参数(function (a, ...b) {})的时候，有自己的使用方式
• 在拷贝的情况下, 展开运算符“...” 比 Object.assign 性能高

getBoundingClientRect方法简介

getBoundingClientRect 返回的是一个 DOMRect 对象，是一组矩形集合，我们这次所使用的返回值主要是left、top、bottom和right。其余的返回值width、height、x、y这次用不到,就不再讨论。
使用方法如下：

let domToTop = dom.getBoundingClientRect().top  // dom 的顶边到视口顶部的距离
let domToLeft = dom.getBoundingClientRect().left // dom 的左边到视口左边的距离
let domToBottom = dom.getBoundingClientRect().bottom // dom 的底边到视口顶部的距离
let domToRight = dom.getBoundingClientRect().right // dom 的右边到视口左边的距离

注意事项：

1. 得到的值是相对于视口而言的，即如果页面的滚动位置发生变化，那么得到的top、left也会发生变化；如果需要计算到body边框的距离，需要再加上网页滚动条的长度。下面会给出完整例子。
   这个方法返回的四个值都是相对于当前视口的左上角而言的。即top和bottom是dom的顶边和底边到视口的顶部的距离，同理left和right是相对于视口左边的距离。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 110%;
            height: 200%;
            position: absolute;
            top: 0;
            left: 0;
            border: 1px solid red;
        }
        .content {
            width: 20%;
   

推荐以下两种手动保存状态的方式

1. 将需要保存状态组件的state提升至父组件中保存。
2. 使用 css visible 属性(display还是content-visibility ? )来控制需要保存状态组件的渲染，而不是使用 if/else ，避免React将其卸载。

目前市面上自动状态保存库主要从两方面下手：

1. 改变路由机制，通常基于 React-Router 二次开发。React-Router 在路由切换时默认卸载非活动组件，因此这些库通过重写 React-Router 中的部分功能或者将其拓展的方式使得在路由切换时相关组件不被直接卸载，而是缓存下来。这种实现方式决定了状态保存的粒度只能具体到SPA的页面级别。
2. 改变React组件被移除的方式。React在组件被移除时默认是被卸载的，这些库通过某些方式阻止或欺骗React使相关组件在移除时不被直接卸载，而是缓存下来。通过这种实现方式，状态保存的粒度可以精细到组件级别。
3. React官方在一些关于 strict mode 的回复中提到了其正在开发的 <Offscreen> 组件，并且预计其在 react@18.X（非18早期版本）中可能会出现，其功能与vue <keep-alive> 类似。

根据对目前市场上存在的相关解决方案的调研，这里给出以下几点建议：

• 如果项目中需要状态缓存处理的数据量较小，那最好还是按照React官方的建议，手动解决状态缓存问题。
• 如果处理数据量较大，且缓存粒度为页面级别，那么推荐使用 react-router-cache-route。
• 如果处理数据量较大，且缓存粒度为组件级别，或者你的项目框架采用了umi（无法直接触及react-router），或者干脆没有使用react-router路由，那么推荐使用 react-activation 。此外umi中使用 react-activation 可以直接使用其封装插件 umi-plugin-keep-alive。