从零开始-文件资源管理器-07-处理 context 重复渲染

现状

当改变 column 时,除了顶部面包屑导航部分,整个界面都会重新渲染,即使不相关的页脚功能区的 "x 个项目"文案也会触发重新渲染。

这是由于将 column 与 readdir 的数据放在了同一个 context 内,当修改 readdir 或 column 都会导致所有使用该 context value 的都会触发渲染。即使只使用其中一项,例如单用 readdir,没有使用 column。

解决方案

  1. 将 column 与 readdir 分离至不同的 context 内
  2. 使用更高级的状态管理工具,例如 redux 等

由于界面比较简单,这里就使用方案 1 将 context 分离。稍微封装下,方便之后需要分离 context 的地方使用。

纯读取的 readdir 改造

文件路径:explorer/src/lib/create-ctx.tsx

typescript 复制代码
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 上下文。

javascript 复制代码
'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 组件。

typescript 复制代码
...
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() 读取

javascript 复制代码
'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 上下文文件

typescript 复制代码
'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 插入

javascript 复制代码
...
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()

javascript 复制代码
...
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 方法内部实现了读写分离。在消费数据,修改数据时使用了 useStoreuseDispatch 方法。

当内部消费的层级不对,useContext 调用是会返回 undefined。所以内部通过判断是否为 undefined 是抛出错误。

javascript 复制代码
if (context === undefined) {
  throw new Error('useDispatch:context undefined')
}

ContextProvider 内是使用 useState 进行状态管理,可以对应的替换为 useReduce 或 ahooks 的其他状态管理 hooks,对应的修改 useDispatch 的方法即可。

由于目前仅涉及简单的状态操作,坐等后续需要涉及到复杂状态管理。

文件路径:explorer/src/app/path/context.tsx

最后贴上 PathContextProvider 代码。第一版的上下文状态管理正式下线,后续仅将作为组合各个独立 context 的组件。

javascript 复制代码
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>
    </>
  )
}

git-repo

yangWs29/share-explorer

相关推荐
霍先生的虚拟宇宙网络22 分钟前
webp 网页如何录屏?
开发语言·前端·javascript
jessezappy42 分钟前
jQuery-Word-Export 使用记录及完整修正文件下载 jquery.wordexport.js
前端·word·jquery·filesaver·word-export
旧林8431 小时前
第八章 利用CSS制作导航菜单
前端·css
yngsqq1 小时前
c#使用高版本8.0步骤
java·前端·c#
Myli_ing2 小时前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风2 小时前
前端 vue 如何区分开发环境
前端·javascript·vue.js
软件小伟2 小时前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾2 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧3 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm3 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j