review

src/Photo.tsx

@@ -45,10 +45,11 @@ export default class Photo extends React.PureComponent<
   }
 
   componentDidMount() {
+    const { src } = this.props;
     const currPhoto = new Image();
-    currPhoto.src = this.props.src;
     currPhoto.onload = this.handleImageLoaded;
     currPhoto.onerror = this.handleImageBroken;
+    currPhoto.src = src;
 
     window.addEventListener('resize', this.handleResize);
   }
@@ -81,9 +82,10 @@ export default class Photo extends React.PureComponent<
   handleResize = () => {
     const { loaded, naturalWidth, naturalHeight } = this.state;
     if (loaded && this.isMount) {
+      const { onPhotoResize } = this.props;
       this.setState(
         getSuitableImageSize(naturalWidth, naturalHeight),
-        this.props.onPhotoResize,
+        onPhotoResize,
       );
     }
   };

src/PhotoView.tsx

@@ -284,29 +284,19 @@ export default class PhotoView extends React.Component<
   };
 
   handleTouchStart = (e) => {
-    if (e.touches.length >= 2) {
-      const { clientX, clientY, touchLength } = getMultipleTouchPosition(e);
-      this.handleStart(clientX, clientY, touchLength);
-    } else {
-      const { clientX, clientY } = e.touches[0];
-      this.handleStart(clientX, clientY);
-    }
+    const { clientX, clientY, touchLength } = getMultipleTouchPosition(e);
+    this.handleStart(clientX, clientY, touchLength);
   };
 
   handleMouseDown = (e) => {
     e.preventDefault();
-    this.handleStart(e.clientX, e.clientY);
+    this.handleStart(e.clientX, e.clientY, 0);
   };
 
   handleTouchMove = (e) => {
     e.preventDefault();
-    if (e.touches.length >= 2) {
-      const { clientX, clientY, touchLength } = getMultipleTouchPosition(e);
-      this.onMove(clientX, clientY, touchLength);
-    } else {
-      const { clientX, clientY } = e.touches[0];
-      this.onMove(clientX, clientY);
-    }
+    const { clientX, clientY, touchLength } = getMultipleTouchPosition(e);
+    this.onMove(clientX, clientY, touchLength);
   };
 
   handleMouseMove = (e) => {

src/utils/getMultipleTouchPosition.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 
 /**
- * 从 Touch 事件中获取多个触控中心位置
+ * 从 Touch 事件中获取两个触控中心位置
  */
 const getMultipleTouchPosition = (
   evt: React.TouchEvent,
@@ -11,14 +11,17 @@ const getMultipleTouchPosition = (
   touchLength: number;
 } => {
   const { clientX, clientY } = evt.touches[0];
-  const { clientX: nextClientX, clientY: nextClientY } = evt.touches[1];
-  return {
-    clientX: (clientX + nextClientX) / 2,
-    clientY: (clientY + nextClientY) / 2,
-    touchLength: Math.sqrt(
-      Math.pow(nextClientX - clientX, 2) + Math.pow(nextClientY - clientY, 2),
-    ),
-  };
+  if (evt.touches.length >= 2) {
+    const { clientX: nextClientX, clientY: nextClientY } = evt.touches[1];
+    return {
+      clientX: (clientX + nextClientX) / 2,
+      clientY: (clientY + nextClientY) / 2,
+      touchLength: Math.sqrt(
+        Math.pow(nextClientX - clientX, 2) + Math.pow(nextClientY - clientY, 2),
+      ),
+    };
+  }
+  return { clientX, clientY, touchLength: 0 };
 };
 
 export default getMultipleTouchPosition;