React 组件有啥方法可以保持之前渲染的值吗？ [复制]

Posted 2023-02-22

【中文标题】React 组件有啥方法可以保持之前渲染的值吗？ [复制]

【英文标题】：Is there any way that React component still keep the value from previous render? [duplicate]React 组件有什么方法可以保持之前渲染的值吗？ [复制]

【发布时间】：2022-01-12 10:57:07

【问题描述】：

我有一个父组件，它会多次渲染一个子组件。此子组件用于许多不同的组件。我需要在这个子组件中有一个数组来保存组件之前的所有渲染，然后访问传递给它的最大文本。

import TextComponent from '../../text'
const ParentComponent = ()=>
  // ... some code here and get some data from API
 const text = getTextFromAPI()
  return (
   <>
    <ARandomComponent/>
    <AnotherRandomComponent/>
    <TextComponent text=text/>
  </>)

在TextComponent 中我需要知道每个元素接收到什么文本，并返回最大的文本。我想也许我可以在 TextComponent 内有一个数组，但当然，每次渲染时，组件都有新数据，我知道这是设计使然。

有没有办法激活它？在TextComponent 中存储一个值，使来自不同地方的其他渲染仍然可以访问该值

【问题讨论】：

如果我理解正确，您想在TextComponent 的所有实例之间共享一些状态？在这种情况下，将数组作为状态存储在父组件中。

问题是有几个父母。这个TextComponent 被用于 15 个不同的父组件中，我不想在每个父组件中重复逻辑，这就是为什么我正在寻找一种在 TextComponent @zhulien 中实现它的方法

@Jax-p 我认为您没有正确理解我的意思。 TextComponent 在 15 个不同的地方呈现，我不想将逻辑放在父组件中。但我需要 TextComponent 本身跟踪它的其他实例

在每个使用 TextComponent 的组件中将使用该组件的不同实例。它不像任何组件都可以引用的全局组件。您可以做的是使用每个 TextComponent 将通过挂钩连接到的上下文，这样您就可以与所有 TextComponent 组件进行通信。但是话又说回来，我不确定我是否理解正确。

@Beekman 在这种情况下，您应该将共享状态存储在上下文中（查看reactjs.org/docs/context.html）或自定义服务，然后从那里获取TextComponents 中的数据。跨度>

【参考方案1】：

如果您的 ParentComponent 没有重新渲染。您可以使用 useState 并在调用 setState 时使用条件，即实际状态小于您将收到的新文本。

【讨论】：

不，实际上问题不仅仅是重新渲染。这是关于 TextComponent 在 15 个不同的父组件中呈现。它是一个共享组件，我希望它是独立的，可以独立工作，并且知道传递给它的最长文本，而无需在多个父组件中重复逻辑

然后在 TextComponent 中使用 useState 来保存数据，并在依赖数组中使用 useEffect 和 text 属性。在这里做你的逻辑，看看你是否得到了最大的字符串并更新状态

【参考方案2】：

您需要使用redux 之类的状态管理工具，它可以让您的状态在应用范围内可用。 获取数据并将数组存储在 redux 状态。 然后可以从整个应用程序的任何组件访问它。

【讨论】：

为这种微不足道的任务推广繁重的状态管理工具是个坏主意。

如果不是状态管理，那么将阵列钻到孩子身上。

【参考方案3】：

编辑：您在评论中阐明了多个组件使用“全局”值的要求。这是使用内置 Context API 或 Recoil 或 Effector 等状态管理库的情况。

---

您可以使用这样的钩子来存储在使用它的组件的生命周期内看到的最长字符串：

function useLongestString (text = '') 
  const [str, setStr] = useState(text);
  if (text.length > str.length) setStr(text);
  return str;

演示：

<div id="root"></div><script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone@7.16.4/babel.min.js"></script>
<script type="text/babel" data-type="module" data-presets="react">

const useState = React;

function useLongestString (text = '') 
  const [str, setStr] = useState(text);
  if (text.length > str.length) setStr(text);
  return str;


function DisplayLongestString (props) 
  const longest = useLongestString(props.text);
  return <div>longest</div>;


function Example (): ReactElement 
  const [value, setValue] = useState('Keep typing');
  return (
    <div>
      <h2>Longest string:</h2>
      <DisplayLongestString text=value />
      <input
        onChange=ev => setValue(ev.target.value)
        placeholder="Type a longer string"
        value=value
      />
    </div>
  );


ReactDOM.render(<Example />, document.getElementById('root'));

</script>

【讨论】：

这行不通，因为他需要使用钩子任意次数，并且每次使用都会创建自己的全新状态，该状态独立于其他使用。

@zhulien 感谢您让我意识到问题中未写的内容。