> For the complete documentation index, see [llms.txt](https://onenesss-organization.gitbook.io/jj-xiaoce/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://onenesss-organization.gitbook.io/jj-xiaoce/next.js-kai-fa-zhi-nan/38.-shi-zhan-pian-react-notes-ce-bian-lan-bi-ji-lie-biao.md).
# 38. 实战篇 ❘ React Notes ❘ 侧边栏笔记列表
### 前言
本篇我们来实现 React Notes 的左侧侧边栏部分。
### SidebarNoteList
现在我们接着完善笔记列表，毕竟笔记列表这里还要实现展开和收回功能：
修改 `components/SidebarNoteList.js`代码：
```jsx
import SidebarNoteItem from '@/components/SidebarNoteItem';
export default async function NoteList({ notes }) {
const arr = Object.entries(notes);
if (arr.length == 0) {
return
{'No notes created yet!'}
}
return
{arr.map(([noteId, note]) => {
return
})}
}
```
这里我们将具体的每条笔记抽离成单独的 `SidebarNoteItem` 组件，`components/SidebarNoteItem.js`代码如下：
```jsx
import dayjs from 'dayjs';
import SidebarNoteItemContent from '@/components/SidebarNoteItemContent';
export default function SidebarNoteItem({ noteId, note}) {
const { title, content = '', updateTime } = note;
return (
{content.substring(0, 20) || (No content) }
}>
{title}
{dayjs(updateTime).format('YYYY-MM-DD hh:mm:ss')}
);
}
```
这里我们又抽离了一个 `SidebarNoteItemContent` 组件，用来实现展开和收回功能，我们将笔记的标题和时间的 JSX 作为 children 传递给了 `SidebarNoteItemContent`，`components/SidebarNoteItemContent.js`代码如下：
```jsx
'use client';
import { useState, useRef, useEffect, useTransition } from 'react';
import { useRouter, usePathname } from 'next/navigation'
export default function SidebarNoteContent({
id,
title,
children,
expandedChildren,
}) {
const router = useRouter()
const pathname = usePathname()
const selectedId = pathname?.split('/')[1] || null
const [isPending] = useTransition()
const [isExpanded, setIsExpanded] = useState(false)
const isActive = id === selectedId
// Animate after title is edited.
const itemRef = useRef(null);
const prevTitleRef = useRef(title);
useEffect(() => {
if (title !== prevTitleRef.current) {
prevTitleRef.current = title;
itemRef.current.classList.add('flash');
}
}, [title]);
return (
{
itemRef.current.classList.remove('flash');
}}
className={[
'sidebar-note-list-item',
isExpanded ? 'note-expanded' : '',
].join(' ')}>
{children}
{
const sidebarToggle = document.getElementById('sidebar-toggle')
if (sidebarToggle) {
sidebarToggle.checked = true
}
router.push(`/note/${id}`)
}}>
Open note for preview
{
e.stopPropagation();
setIsExpanded(!isExpanded);
}}>
{isExpanded ? (
{isExpanded && expandedChildren}
{}}
expandedChildren={
{content.substring(0, 20) || (No content) }
}>
{title}
{dayjs(updateTime).format('YYYY-MM-DD hh:mm:ss')}
);
}
```
所谓可序列化，简单的理解就是 JSON.stringify() 这段数据不会出现错误，如果我们在这里传递一个函数 `fun={() => {}}`，就会出现错误提示：
但 JSX 对象是可以正常传递的，正如这个例子中展示的那样。
3. **但你可以将服务端组件以 props 的形式传给客户端组件**，其实刚才的实现里就展现了两种传递服务端组件的形式：
```jsx
// components/SidebarNoteItem.js
export default function SidebarNoteItem({ noteId, note}) {
const { title, content = '', updateTime } = note;
return (
{content.substring(0, 20) || (No content) }
}>
// 第二种方式
{title}
{dayjs(updateTime).format('YYYY-MM-DD hh:mm:ss')}
);
}
```
#### 服务端组件特性
现在让我们重新审视一下 SidebarNoteItem 的代码：
```jsx
// components/SidebarNoteItem.js
import dayjs from 'dayjs';
import SidebarNoteItemContent from '@/components/SidebarNoteItemContent';
export default function SidebarNoteItem({ noteId, note}) {
const { title, content = '', updateTime } = note;
return (
{content.substring(0, 20) || (No content) }
}>
{title}
{dayjs(updateTime).format('YYYY-MM-DD hh:mm:ss')}
);
}
```
考验你是否认真学习了之前的知识到了！
在这段代码中，`SidebarNoteItem` 是一个服务端组件，在这个组件中我们引入了 dayjs 这个库，然而我们却是在 `SidebarNoteItemContent` 这个客户端组件中使用的 dayjs。请问最终客户端的 bundle 中是否会打包 dayjs 这个库？
关于这个结果，反正效果我们都实现了，直接去查看一下就知道了：
所以答案是不会。**在服务端组件中使用 JSX 作为传递给客户端组件的 prop，JSX 会先进行服务端组件渲染，再发送到客户端组件中**。也就是说，发送给客户端组件的并不是：
```html
{title}
{dayjs(updateTime).format('YYYY-MM-DD hh:mm:ss')}
```
而是编译后的如：
```html
```
其实这里我们也完全可以把 header 抽离成一个 `SidebarNoteItemHeader` 服务端组件，这样效果会更明显：
新建 `/components/SidebarNoteItemHeader.js`，代码如下：
```javascript
import dayjs from 'dayjs';
export default function SidebarNoteItemHeader({title, updateTime}) {
return (
{title}
{dayjs(updateTime).format('YYYY-MM-DD hh:mm:ss')}
);
}
```
修改 `SidebarNoteItem.js`文件代码为：
```jsx
import SidebarNoteItemContent from '@/components/SidebarNoteItemContent';
import SidebarNoteItemHeader from '@/components/SidebarNoteItemHeader';
export default function SidebarNoteItem({ noteId, note}) {
const { title, content = '', updateTime } = note;
return (
{content.substring(0, 20) || (No content) }
}>
);
}
```
现在我们查看下开发者工具中的的 Source 选项：
你会发现 `components` 下并没有我们刚建立的 `SidebarNoteItemHeader` 组件，只有一个客户端组件 `SidebarNoteItemContent`，node\_modules 下也没有 dayjs（如果你把 `SidebarNoteItemHeader` 声明为客户端组件就有了）。
最后让我们查看下 localhost 这个文件的 HTML：
传给客户端组件的 JSX 这些内容也会直接渲染到 HTML 中，当然这里跟客户端组件还是服务端组件无关，是客户端组件也会预渲染，只是提一下而已。
#### 最佳实践：客户端组件下移
我们在 [《渲染篇 | 服务端组件和客户端组件》](https://juejin.cn/book/7307859898316881957/section/7309076661532622885#heading-29)中讲到 **“尽可能将客户端组件在组件树中下移”**，这里就是一个很好的例子。我们本可以直接把 `SidebarNoteItem` 声明为客户端组件，然后直接在这个组件里全部实现，但是却抽离了一个名为 `SidebarNoteItemContent` 的客户端组件用于实现展开和收回功能。
`SidebarNoteItemContent` 的内容原本是 `SidebarNoteList` 的子组件，现在却是 `SidebarNoteItem` 的子组件。虽然在组件树中的位置下移了，但我们却因此避免了 dayjs 这个库被打包到客户端 bundle 中。在开发的时候，应该尽可能缩减客户端组件的范围。
### EditButton
`New` 和 `Edit` 按钮考虑到复用，我们单独抽离成一个 `EditButton`组件：
```javascript
// components/EditButton.js
import Link from 'next/link'
export default function EditButton({noteId, children}) {
const isDraft = noteId == null;
return (
{children}
);
}
```
Sidebar 组件引入一下：
```javascript
// ...
import EditButton from '@/components/EditButton';
export default async function Sidebar() {
const notes = await getAllNotes()
return (
<>
// ...
)
}
```
### Suspense
原 Demo 中当笔记列表加载的时候是有骨架图的效果的：
这说明肯定用了 `Suspense`。因为我们现在将笔记列表数据的获取放在了顶层，所以直接为 `SidebarNoteList` 添加 `Suspense` 是没有效果的，我们需要将数据获取改为在 `SidebarNoteList` 组件内部。
修改`Sidebar.js` 代码如下：
```jsx
import React, { Suspense } from 'react'
import Link from 'next/link'
import SidebarNoteList from '@/components/SidebarNoteList';
import EditButton from '@/components/EditButton';
import NoteListSkeleton from '@/components/NoteListSkeleton';
// // 移除数据请求部分，为 SidebarNoteList 添加 Suspense 以及 fallback UI NoteListSkeleton
export default async function Sidebar() {
return (
<>
React Notes
)
}
```
添加 `/components/NoteListSkeleton.js`，代码如下：
```jsx
export default function NoteListSkeleton() {
return (
);
}
```
`/components/SidebarNoteList.js`代码如下，为了让效果更加明显，我们添加了一个 sleep 函数：
```javascript
import SidebarNoteItem from '@/components/SidebarNoteItem';
import { getAllNotes } from '@/lib/redis';
export default async function NoteList() {
const sleep = ms => new Promise(r => setTimeout(r, ms));
await sleep(10000);
const notes = await getAllNotes()
const arr = Object.entries(notes);
if (arr.length == 0) {
return
{'No notes created yet!'}
}
return
{arr.map(([noteId, note]) => {
return
})}
}
```
此时页面效果如下：
我们成功实现了骨架图效果！
那么问题来了，`SidebarNoteList` 用 `Suspense` 和不用 `Suspense`，具体有什么改变呢？比如，使用 `Suspense` 会带来新的请求吗？
我们可以自己测试一下，**答案是不会。** 之前是那 10 个请求，使用后还是那 10 个请求。
那么使用 `Suspense` 和不使用 `Suspense`，到底有什么差别呢？其实我们看下用和不用的效果就知道了。
我们把 sleep 的时间设置为 5s。这是不使用 Suspense 的效果，我们从掘金页面输入地址 `http://localhost:3000/`：
输入地址后，我们等待了大概 5s 后，页面突然完全展现。
这是使用 Suspense 的效果，我们还是从掘金页面输入地址 `http://localhost:3000/`：
输入地址后，我们立刻就跳转到了页面，笔记列表部分等待了 5s 后，开始展现。除此之外，使用 Suspense，数据加载不会阻塞页面，也就是说在笔记列表还在加载的时候，用户依然可以与页面其他部分进行交互，比如点击 New 按钮新建笔记。
那么问题又来了，页面请求数没有变化，也没有新的请求，这些又都是服务端组件，数据请求都在服务端，到底谁等待了那 5s 呢，然后把数据返回的呢？
答案在于 `localhost` 这个 HTML 页面，查看网络请求，刚开始页面加载的时候，localhost 的 Time 为 126ms：
加载完成后，localhost 的 Time 变成了 5s：
之所以这样，正如[《渲染篇 | Streaming 和 Edge Runtime》](https://juejin.cn/book/7307859898316881957/section/7309076865732640818)中介绍的那样，答案在于 HTML 是通过 stream 格式进行传输的，查看 HTML 文件的响应头：
其 `Transfer-Encoding` 标头的值为 `chunked`，表示数据将以一系列分块的形式进行发送。HTML 首先收到骨架图的 HTML 进行渲染，再收到渲染完成的笔记列表 HTML 进行渲染，查看一下 localhost HTML 文件的返回：
```html
// ...
```
因为代码比较多，所以做了一点精简，你会发现在这个 HTML 里，骨架图的 HTML 和笔记列表的 HTML 都返回了，所以使用 Suspense 和 Streaming 不用担心会对 SEO 造成影响。
#### 最佳实践：使用 Suspense
Suspense 的效果就是允许你推迟渲染某些内容，直到满足某些条件（例如数据加载完毕）。在开发 Next.js 项目的时候，有数据加载的地方多考虑是否可以使用 `Suspense` 或者 `loading.js`带来更好的体验。
### 总结
那么今天的内容就结束了，本篇我们完善了侧边栏笔记列表的效果，了解了在 Next.js 中使用服务端组件和客户端组件的注意事项，学习到了两个最佳实践：
1. 客户端组件下移
2. 使用 Suspense
本篇的代码我已经上传到[代码仓库](https://github.com/mqyqingfeng/next-react-notes-demo/tree/main)的 Day2 分支：，直接使用的时候不要忘记在本地开启 Redis。
React Notes