WIP: 歌曲封面使用 Image 组件，删除歌曲行数据时使用一个动画效果来过渡一下 #14

houkunlin · 2023-05-16T08:50:27Z

houkunlin commented

2023-05-16 08:50:27 +00:00

First-time contributor

使用 Image 组件来展示歌曲的封面，当封面不存在时，可以展示一个占位符图片（fallbackSrc）

<Image
  boxSize='160px'
  objectFit='cover'
  src={file.metadata.cover}
  alt={file.metadata.album}
  fallbackSrc='https://via.placeholder.com/160'
/>

当删除行数据时，增加动画效果

- 使用 `Image` 组件来展示歌曲的封面，当封面不存在时，可以展示一个占位符图片（`fallbackSrc`） ``` <Image boxSize='160px' objectFit='cover' src={file.metadata.cover} alt={file.metadata.album} fallbackSrc='https://via.placeholder.com/160' /> ``` - 当删除行数据时，增加动画效果

houkunlin added 1 commit 2023-05-16 08:50:28 +00:00

b8c3a51756 feat: 歌曲封面使用 Image 组件，删除歌曲行数据时使用一个动画效果来过渡一下

jixunmoe reviewed 2023-05-16 21:23:01 +00:00

src/features/file-listing/FileRow.tsx Outdated

						
				@ -53,3 +57,1 @@

				        <Grid

				          templateAreas={{

				            base: `

				    <Collapse in={isOpen} animateOpacity unmountOnExit startingHeight={0} style={{ width: '100%' }}>

jixunmoe commented

2023-05-16 21:23:01 +00:00

库应该可以直接用 w="full" 缩写

库应该可以直接用 `w="full"` 缩写

houkunlin commented

2023-05-17 00:54:26 +00:00

First-time contributor

因为我对这个UI库不熟悉，所以这里我就按照了以前用 AntDesign 时的写法来设置了，~~刚刚看了一下文档，确实是可以使用 w="full" 来操作的~~

文档没看全。。。。试了一下 w="full" 不行，我的 WebStorm 直接提示错误了，Collapse 组件没有这个 props 属性

因为我对这个UI库不熟悉，所以这里我就按照了以前用 AntDesign 时的写法来设置了，~~刚刚看了一下文档，确实是可以使用 `w="full"` 来操作的~~ 文档没看全。。。。试了一下 `w="full"` 不行，我的 WebStorm 直接提示错误了，`Collapse` 组件没有这个 props 属性

jixunmoe marked this conversation as resolved

jixunmoe reviewed 2023-05-16 21:24:03 +00:00

src/features/file-listing/FileRow.tsx Outdated

						
				@ -31,3 +34,3 @@

				  const audioPlayerRef = useRef<HTMLAudioElement>(null);

				  const togglePlay = () => {

				  const togglePlay = useCallback(() => {

jixunmoe commented

2023-05-16 21:24:03 +00:00

这个组件内的函数感觉没必要缓存，因为没有进行什么复杂的计算来取值。

参考文章：
https://jancat.github.io/post/2019/translation-usememo-and-usecallback/

这个组件内的函数感觉没必要缓存，因为没有进行什么复杂的计算来取值。参考文章： https://jancat.github.io/post/2019/translation-usememo-and-usecallback/

houkunlin commented

2023-05-17 01:06:43 +00:00

First-time contributor

这是为了参考文章提到的引用相等，我不确定 Button 是否会因为 onClick 引用变化而重新渲染组件内容，在我以往的使用习惯中，我的函数定义通常都用 useCallback 来处理，在这里我不确定它是否是必须的

这是为了参考文章提到的**引用相等**，我不确定 `Button` 是否会因为 `onClick` 引用变化而重新渲染组件内容，在我以往的使用习惯中，我的函数定义通常都用 `useCallback` 来处理，在这里我不确定它是否是必须的

jixunmoe commented

2023-05-17 01:19:52 +00:00

会再渲染，但我的看法是没必要这样优化，因为一般情况下缓存这些东西（简短的函数，基本不涉及复杂计算）的开销比不缓存更大。

这个项目的前端展示没有复杂数据处理的需要（计算负载都通过 web worker 扔到另外一个线程异步处理了）。

不用缓存，代码也更简单理解，不需要依赖数组了。

简单的情况下，react 需要缓存：

当前的值
依赖数组

渲染时，缓存的值和新的值都会被建立（用于对比），然后选择返回缓存的值或新的值（双倍内存占用？！），然后看 gc 心情来回收。

会再渲染，但我的看法是没必要这样优化，因为一般情况下缓存这些东西（简短的函数，基本不涉及复杂计算）的开销比不缓存更大。这个项目的前端展示没有复杂数据处理的需要（计算负载都通过 web worker 扔到另外一个线程异步处理了）。不用缓存，代码也更简单理解，不需要依赖数组了。简单的情况下，react 需要缓存： - 当前的值 - 依赖数组渲染时，缓存的值和新的值都会被建立（用于对比），然后选择返回缓存的值或新的值（双倍内存占用？！），然后看 gc 心情来回收。

houkunlin commented

2023-05-17 01:27:56 +00:00

First-time contributor

最新提交已取消 useCallback 的使用

🚀 1

jixunmoe marked this conversation as resolved

jixunmoe reviewed 2023-05-16 21:33:00 +00:00

src/features/file-listing/FileRow.tsx Outdated

						
				@ -93,0 +87,4 @@

				                  objectFit='cover'

				                  src={file.metadata.cover}

				                  alt={file.metadata.album}

				                  fallbackSrc='https://via.placeholder.com/160'

jixunmoe commented

2023-05-16 21:33:00 +00:00

虽然很方便，但是建议手写一个 svg 导入，尽量避免动态加载第三方网站资源。

<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160">
  <rect fill="#ddd" width="160" height="160"/>
  <text fill="#0007" font-family="sans-serif" font-size="24" dy="9.45" font-weight="bold" x="50%" y="50%" text-anchor="middle" letter-spacing="6">暂无封面</text>
</svg>

(而且比第三方网站生成的 png 还要小，vite 编译时应该能直接内嵌)

~~或者直接把这一串内容声明为 React 组件来用也可以。~~ Image 应该不能 fallback 到组件，也就想想了 hhh

虽然很方便，但是建议手写一个 svg 导入，尽量避免动态加载第三方网站资源。 ```svg <svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"> <rect fill="#ddd" width="160" height="160"/> <text fill="#0007" font-family="sans-serif" font-size="24" dy="9.45" font-weight="bold" x="50%" y="50%" text-anchor="middle" letter-spacing="6">暂无封面</text> </svg> ``` (而且比第三方网站生成的 png 还要小，vite 编译时应该能直接内嵌) ~~或者直接把这一串内容声明为 React 组件来用也可以。~~ Image 应该不能 fallback 到组件，也就想想了 hhh

houkunlin commented

2023-05-17 00:58:57 +00:00

First-time contributor

我不知道该用一个什么样的默认图片来展示，所以那个错误图片的地址就沿用了案例里面的地址，我稍后改一下，改成你提供的 svg 图片

houkunlin commented

2023-05-17 01:25:18 +00:00

First-time contributor

我刚刚合并了主分支的修改，发现按照主分支的代码，这个 svg 图片无法展示

jixunmoe commented

2023-05-17 01:27:49 +00:00

我刚刚合并了主分支的修改，发现按照主分支的代码，这个 svg 图片无法展示

如果你有兴趣，可以尝试修复下… 我在主分支的提交只确定了测试环境下可以引入 svg 文件而不报错

如果你希望将时间用在 pr 上，可以跳过这个图片显示的修正，我之后看看怎么修。

这两个选项都可以。

> 我刚刚合并了主分支的修改，发现按照主分支的代码，这个 svg 图片无法展示如果你有兴趣，可以尝试修复下… 我在主分支的提交只确定了测试环境下可以引入 svg 文件而不报错如果你希望将时间用在 pr 上，可以跳过这个图片显示的修正，我之后看看怎么修。这两个选项都可以。

houkunlin commented

2023-05-17 01:36:47 +00:00

First-time contributor

我尝试修复一下这个问题

houkunlin commented

2023-05-17 01:41:34 +00:00

First-time contributor

这个图片已经处理好了，可以展示了，之前不展示问题，发现是因为 metadata 这个变量没有内容，直接导致了整个 Image 组件没有渲染出来

这个图片已经处理好了，可以展示了，之前不展示问题，发现是因为 `metadata` 这个变量没有内容，直接导致了整个 `Image` 组件没有渲染出来

jixunmoe marked this conversation as resolved

jixunmoe commented

2023-05-17 00:47:39 +00:00

主分支为了方便测试增加了一些更改，会与该 PR 的更改产生冲突。

主分支已手动集成了 "使用 Image 组件" 来展示封面部分。

主分支为了方便测试增加了一些更改，会与该 PR 的更改产生冲突。主分支已手动集成了 "使用 Image 组件" 来展示封面部分。

jixunmoe reviewed 2023-05-17 00:51:48 +00:00

src/features/file-listing/FileRow.tsx Outdated

						
				@ -48,1 +49,3 @@

				  };

				  const handleDeleteRow = useCallback(() => {

				    onToggle();

				    setTimeout(() => {

jixunmoe commented

2023-05-17 00:51:48 +00:00

如果我快速点两次，视觉上是不是会收起然后马上又展开，然后突然消失…？

这里直接用 onClose 方法可能更合适：https://chakra-ui.com/docs/hooks/use-disclosure#return-value

如果我快速点两次，视觉上是不是会收起然后马上又展开，然后突然消失…？这里直接用 `onClose` 方法可能更合适：https://chakra-ui.com/docs/hooks/use-disclosure#return-value

houkunlin commented

2023-05-17 00:57:09 +00:00

First-time contributor

看了一下你提供的文档说明，确实是使用 onClose 更为合适

看了一下你提供的文档说明，确实是使用 `onClose` 更为合适

jixunmoe marked this conversation as resolved

houkunlin added 1 commit 2023-05-17 01:13:00 +00:00

eaf05d8cbb feat: 删除歌曲行数据时改用 onClose 来处理

houkunlin added 1 commit 2023-05-17 01:21:31 +00:00

4b67542799 Merge remote-tracking branch 'origin/main' into feat/file-row

# Conflicts:
#	src/features/file-listing/FileRow.tsx

houkunlin commented

2023-05-17 01:24:49 +00:00

First-time contributor

主分支为了方便测试增加了一些更改，会与该 PR 的更改产生冲突。

主分支已手动集成了 "使用 Image 组件" 来展示封面部分。

最近提交已经合并了主分支的更改内容，解决了冲突问题

> 主分支为了方便测试增加了一些更改，会与该 PR 的更改产生冲突。 > > 主分支已手动集成了 "使用 Image 组件" 来展示封面部分。最近提交已经合并了主分支的更改内容，解决了冲突问题

👍 1

houkunlin added 1 commit 2023-05-17 01:27:26 +00:00

33a6abab7f feat: togglePlay 方法取消使用 useCallback

houkunlin added 1 commit 2023-05-17 01:39:44 +00:00

76cb2a154b feat: 即使不存在歌曲元数据，也展示默认的“暂无封面”占位图片

jixunmoe reviewed 2023-05-17 23:22:18 +00:00

src/features/file-listing/FileRow.tsx

						
				@ -18,2 +19,3 @@

				import { useCallback, useRef } from 'react';

				import { useAppDispatch } from '~/hooks';

				import coverFallback from '~/assets/no-cover.svg';

				import coverSvgUrl from '~/assets/no-cover.svg';

jixunmoe commented

2023-05-17 23:22:18 +00:00

变量名可以考虑 noCoverFallbackImageURL

变量名可以考虑 `noCoverFallbackImageURL`

jixunmoe marked this conversation as resolved

jixunmoe reviewed 2023-05-17 23:23:18 +00:00

src/features/file-listing/FileRow.tsx

						
				@ -85,1 +89,3 @@

				                  fallbackSrc={coverFallback}

				                  src={metadata?.cover}

				                  alt={`${metadata?.album} 的专辑封面`}

				                  fallbackSrc={coverSvgUrl}