React组件如何保留历史渲染值？跨实例共享存储获取最长传入文本

方案1：模块作用域变量（纯客户端渲染场景最优） #

直接在TextComponent所在的JS模块顶层定义共享数组即可，模块级别的变量不会随组件渲染、实例销毁重置，所有导入该组件的实例都会共享同一个数组：

// text.js 文件内容
import { useEffect } from 'react'

// 模块顶层定义共享变量，全实例通用
const allReceivedTexts = []

const TextComponent = ({ text }) => {
  // 每次接收到新text参数时存入数组，可按需加去重逻辑
  useEffect(() => {
    if (text) {
      allReceivedTexts.push(text)
    }
  }, [text])

  // 对外暴露获取最长文本的静态方法
  TextComponent.getLongestText = () => {
    if (!allReceivedTexts.length) return ''
    return allReceivedTexts.reduce((longest, cur) => 
      cur.length > longest.length ? cur : longest, ''
    )
  }

  // 组件原有渲染逻辑
  return <span>{text}</span>
}

export default TextComponent

你可以在任意位置通过TextComponent.getLongestText()获取到目前所有实例传入过的最长文本。

注意：该方案在SSR环境下会出现跨请求数据污染问题，仅适合纯客户端渲染的项目使用。

方案2：Context全局状态（适配SSR/需要响应式更新场景） #

如果你的项目有服务端渲染需求，或者需要最长文本变化时自动触发依赖它的组件重新渲染，可以用React内置的Context实现共享状态管理：

1. 首先创建全局Context

// textHistoryContext.js
import { createContext, useContext, useState, useCallback } from 'react'

const TextHistoryContext = createContext()

export const TextHistoryProvider = ({ children }) => {
  const [textList, setTextList] = useState([])

  const addText = useCallback((text) => {
    setTextList(prev => [...prev, text])
  }, [])

  const getLongestText = useCallback(() => {
    if (!textList.length) return ''
    return textList.reduce((longest, cur) => 
      cur.length > longest.length ? cur : longest, ''
    )
  }, [textList])

  return (
    <TextHistoryContext.Provider value={{ addText, getLongestText }}>
      {children}
    </TextHistoryContext.Provider>
  )
}

export const useTextHistory = () => useContext(TextHistoryContext)

2. 在应用根节点包裹Provider

// 根组件文件
import { TextHistoryProvider } from './textHistoryContext'

const App = () => {
  return (
    <TextHistoryProvider>
      {/* 原有应用代码 */}
    </TextHistoryProvider>
  )
}

3. 改造TextComponent

// text.js
import { useEffect } from 'react'
import { useTextHistory } from './textHistoryContext'

const TextComponent = ({ text }) => {
  const { addText } = useTextHistory()

  useEffect(() => {
    if (text) addText(text)
  }, [text, addText])

  return <span>{text}</span>
}

export default TextComponent

你可以在任意子组件内通过useTextHistory().getLongestText()获取最长文本，文本列表更新时会自动触发组件重新渲染。

内容的提问来源于stack exchange，提问作者Beekman