是否有任何方法可以使React组件仍然保留来自上一次渲染的值？[副本]

Question

我有一个父组件，它多次呈现一个子组件。此子组件用于许多不同的组件。我需要在这个子组件中有一个数组，它保留该组件的所有先前呈现，然后访问传递给它的最大文本。

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中存储一个值，则来自不同位置的其他渲染仍然可以访问该值

Answer 1

编辑：您在注释中阐明了多个组件使用“全局”值的要求。这是使用内置上下文API或状态管理库（如反冲或效应器）的情况。

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

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>

Answer 2

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

Answer 3

如果您的ParentComponent未重新渲染。您可以使用useState，条件是调用设置状态时，实际状态小于将要接收的新文本。