✨ feat(购物页面): 已完成页面逻辑，等待对接接口

2022-09-16 19:06:00 +08:00
parent c2fa0766aa
commit ad32aa5773
13 changed files with 424 additions and 184 deletions
@@ -1,5 +1,3 @@
-import { SubscriptionMessageApi } from '@/api/user'
-import Taro from '@tarojs/taro'
 import dayjs from 'dayjs'
 import { useEffect, useRef, useState } from 'react'

@@ -88,3 +86,83 @@ export const useTimeCountDown = () => {
 //     openSubscriptionMessage,
 //   }
 // }
+
+type NormalPropsType = Record<string | symbol | number, any>
+type Options = {
+  deep?: boolean
+}
+
+const defaultOptions = {
+  deep: false
+}
+/**
+ * 适用于 memo 第二个入参 手动触发渲染
+ * 目前是判断 引用地址 是否相同 TODO： 判断值是否相同
+ * @param options 配置
+ * @returns {(prevProps: NormalPropsType, nextProps: NormalPropsType) => boolean} 回调函数
+ */
+export const useNeedMemoCallback = (options: Options = defaultOptions) => {
+  return (prevProps: NormalPropsType, nextProps: NormalPropsType) => {
+    // console.log(options)
+    console.log('memo==>', prevProps, nextProps)
+    let needMemoized = true
+    // 引用类型
+    // function array object   
+    // 基本类型
+    // number boolean string number symbol null undefined
+  
+    // 循环props对象
+    const handleDiff = () => {
+      for (let [key, value] of Object.entries(prevProps)){
+        if (!Object.is(value, nextProps[key])) {
+          console.log('函数不相等',value === nextProps[key])
+          console.log('asdfasdf',value)
+          needMemoized = false
+          break
+        }
+      }
+        // Object.entries(prevProps).forEach(([key, value]) => {
+        //   if (!nextProps.hasOwnProperty(key)) {
+        //     needMemoized = false
+        //     // 新增的属性
+        //     if (Object.prototype.toString.call(value) === '[object Object]') {
+        //       parent[key] = {}
+        //     } else if (Object.prototype.toString.call(value) === '[object Array]') {
+        //       parent[key] = []
+        //     }
+        //   }
+        //   if (typeof data[key] === 'object') {
+        //     o[key] = internalSetData(parent[key], data[key])
+        //   } else {
+        //     // 核心处理逻辑
+        //     // key == data第一层  如果要做到data第二层呢？所以需要递归
+        //     if (parent[key] != data[key]) {
+        //       o[key] = data[key]
+        //       changed = true
+        //     }
+        //   }
+        // })
+    }
+    handleDiff()
+    return needMemoized
+  }
+}
+
+const needMemo = useNeedMemoCallback()
+const hobby = {
+      play1: 1,
+      play2: 2
+    }
+const bool = needMemo(
+  {
+    name: '小明',
+    age: 18,
+    hobby: hobby,
+  },
+  {
+    name: '小明',
+    age: 18,
+    hobby: hobby,
+  },
+)
+console.log('bool==>', bool)