现状
当改变 column 时，除了顶部面包屑导航部分，整个界面都会重新渲染，即使不相关的页脚功能区的 ”x 个项目“文案也会触发重新渲染。
这是由于将 column 与 readdir 的数据放在了同一个 context 内，当修改 readdir 或 column 都会导致所有使用该 context value 的都会触发渲染。即使只使用其中一项，例如单用 readdir，没有使用 column。
解决方案
- 将 column 与 readdir 分离至不同的 context 内
- 使用更高级的状态管理工具，例如 redux 等
由于界面比较简单，这里就使用方案 1 将 context 分离。稍微封装下，方便之后需要分离 context 的地方使用。
纯读取的 readdir 改造
文件路径：explorer/src/lib/create-ctx.tsx
import React, { createContext, Dispatch, SetStateAction, useContext, useState } from 'react'
const createCtx = <T extends any>(initial_value?: T) => {
const storeContext = createContext<T>(null!)
const dispatchContext = createContext<Dispatch<SetStateAction<T>>>(null!)
const useStore = () => {
const context = useContext(storeContext)
if (context === undefined) {
throw new Error('useStore：context undefined')
}
return context
}
const useDispatch = () => {
const context = useContext(dispatchContext)
if (context === undefined) {
throw new Error('useDispatch：context undefined')
}
return context
}
const ContextProvider: React.FC<React.ProviderProps<T>> = ({ value, children }) => {
const [state, dispatch] = useState<T>(initial_value || value)
return (
<dispatchContext.Provider value={dispatch}>
<storeContext.Provider value={state}>{children}</storeContext.Provider>
</dispatchContext.Provider>
)
}
return { ContextProvider, useStore, useDispatch }
}
export default createCtx
文件路径：explorer/src/app/path/readdir-context.tsx
创建 readdir-context 上下文。
'use client'
import createCtx from '@/lib/create-ctx'
import { ReaddirListType } from '@/explorer-manager/src/type'
import React from 'react'
const ReaddirContext = createCtx<ReaddirListType>()
export const useReaddirContext = () => {
return ReaddirContext.useStore()
}
export const ReaddirProvider: React.FC<React.ProviderProps<ReaddirListType>> = ({ value, children }) => {
return <ReaddirContext.ContextProvider value={value}>{children}</ReaddirContext.ContextProvider>
}
文件路径：explorer/src/app/path/context.tsx
将 ReaddirProvider 插入。将 readdir 从 PathContext 剔除。将 readdir 赋值给 ReaddirProvider 组件。
...
import { ReaddirProvider } from '@/app/path/readdir-context'
type PathContextType = {
display_type: 'card' | 'table'
changeDisplayType: React.Dispatch<React.SetStateAction<PathContextType['display_type']>>
column: number
changeColumn: React.Dispatch<React.SetStateAction<number>>
}
...
export const PathContextProvider: React.FC<React.ProviderProps<ReaddirListType>> = ({ value, children }) => {
...
return (
<PathContext.Provider
value={{
display_type: display_type,
changeDisplayType: changeDisplayType,
column: column || def_column,
changeColumn: changeColumn,
}}
>
<ReaddirProvider value={value}>{children}</ReaddirProvider>
</PathContext.Provider>
)
}
文件路径：explorer/src/components/readdir-count.tsx
将从 const { readdir } = usePathContext() 读取值修改为 const readdir = useReaddirContext() 读取
'use client'
import React from 'react'
import { Space } from 'antd'
import { useReaddirContext } from '@/app/path/readdir-context'
const ReaddirCount: React.FC = () => {
const readdir = useReaddirContext()
return (
<Space>
<span>{readdir.length}</span>
<span>个项目</span>
</Space>
)
}
export default ReaddirCount
效果
可以看到页脚功能区的 ”x 个项目“文案不会触发重新渲染。
读写的 column
上面的 readdir 仅涉及了读取，column 则涉及了读写
文件路径：explorer/src/app/path/card-colunm-context.tsx
创建 card column context 上下文文件
'use client'
import createCtx from '@/lib/create-ctx'
import React, { useEffect, useState } from 'react'
import { useViewport } from '@/components/viewport/context'
import { useMount, useSessionStorageState } from 'ahooks'
const CardColumnContext = createCtx<number>()
export const useCardColumnContext = () => {
return CardColumnContext.useStore()
}
export const useCardColumnContextDispatch = () => {
return CardColumnContext.useDispatch()
}
export const CardColumnProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
const { width } = useViewport()
const def_column = Math.ceil(width / 280)
const [column, changeColumn] = useState<number>(def_column)
const [session_column, changeSessionColumn] = useSessionStorageState('card-column')
useEffect(() => {
changeSessionColumn(column)
}, [column])
useMount(() => {
changeColumn(Number(session_column))
})
return <CardColumnContext.ContextProvider value={column || def_column}>{children}</CardColumnContext.ContextProvider>
}
将之前的内容迁移过来，
导出的 useCardColumnContext 为读取方法。useCardColumnContextDispatch 为改变方法。
文件路径：explorer/src/app/path/context.tsx
将 CardColumnProvider 插入
...
import { CardColumnProvider } from '@/app/path/card-colunm-context'
...
return (
<PathContext.Provider
value={{
display_type: display_type,
changeDisplayType: changeDisplayType,
}}
>
<ReaddirProvider value={value}>
<CardColumnProvider>{children}</CardColumnProvider>
</ReaddirProvider>
</PathContext.Provider>
)
}
文件路径：explorer/src/app/path/[[...path]]/card-display.tsx
将之前读的 const { readdir, column } = usePathContext() 修改为 const readdir = useReaddirContext() 与 const column = useCardColumnContext()
...
import { useReaddirContext } from '@/app/path/readdir-context'
import { useCardColumnContext } from '@/app/path/card-colunm-context'
const CardDisplay: React.FC = () => {
const pathname = usePathname()
const readdir = useReaddirContext()
const column = useCardColumnContext()
...
最后
整体改动还是挺简单，就是将各个 context 分离。createCtx 方法内部实现了读写分离。在消费数据，修改数据时使用了 useStore 与 useDispatch 方法。
当内部消费的层级不对，useContext 调用是会返回 undefined。所以内部通过判断是否为 undefined 是抛出错误。
if (context === undefined) {
throw new Error('useDispatch：context undefined')
}
ContextProvider 内是使用 useState 进行状态管理，可以对应的替换为 useReduce 或 ahooks 的其他状态管理 hooks，对应的修改 useDispatch 的方法即可。
由于目前仅涉及简单的状态操作，坐等后续需要涉及到复杂状态管理。
文件路径：explorer/src/app/path/context.tsx
最后贴上 PathContextProvider 代码。第一版的上下文状态管理正式下线，后续仅将作为组合各个独立 context 的组件。
import React from 'react'
import { ReaddirListType } from '@/explorer-manager/src/type'
import { ReaddirProvider } from '@/app/path/readdir-context'
import { CardColumnProvider } from '@/app/path/card-colunm-context'
import { DisplayTypeProvider } from '@/app/path/display-type-context'
export const PathContextProvider: React.FC<React.ProviderProps<ReaddirListType>> = ({ value, children }) => {
return (
<>
<ReaddirProvider value={value}>
<CardColumnProvider>
<DisplayTypeProvider>{children}</DisplayTypeProvider>
</CardColumnProvider>
</ReaddirProvider>
</>
)
}
