Reactjs 为什么clear React应用程序上的浏览器选项卡和JS内存泄漏？

我创建了一个简单的React应用程序来测试内存泄漏。它是三个具有相同形式的选项卡，其中包含一些计数（1000-2000）生成的输入字段。 浏览器是基于chromium引擎的Edge，内存报告提供浏览器任务监控。 注：铬具有相同的结果

我递归地做了两个简单的动作来重现它：

在任何输入字段中输入文本

单击其他非活动选项卡

5分钟后，浏览器选项卡的内存大小从70mb增加到>500mb，js从7mb增加到>120mb，并永远保持不变。 如果有人告诉我为什么会这样，我会非常感激的？ 我的测试应用程序代码和我附加在下面的记忆屏幕

import React from "react";

const COUNT_OF_INPUTS = 2000;

const btn = {
  padding: '10px 20px',
  fontWeight: 600,
}

const active = {
  ...btn,
  border: '2px solid black',
  outside: 'none',
  borderRadius: 4,
  color: 'green',
}

export default function App() {
  const [ view, setView ] = React.useState( 'home' );
  return (
    <div>
      <nav>
        <Button isActive={view === 'home'} view="home" onClick={setView} >Home</Button>
        <Button isActive={view === 'about'} view="about" onClick={setView} >About</Button>
        <Button isActive={view === 'users'} view="users" onClick={setView} >Users</Button>
      </nav>
      <div>
        { view === 'home' && <Home/> }
        { view === 'about' && <About/> }
        { view === 'users' && <Users/> }
      </div>
    </div>
  );
}

function Button({ isActive, view, children, onClick }) {
  return <button
      style={ isActive? active : btn }
      onClick={ () => onClick(view) }
  >
    {children}
  </button> ;
}

function Form() {
  const [ values, setValue ] = React.useState(new Array(COUNT_OF_INPUTS).fill( '' ));

  const changeValue = ( key, value ) => {
    setValue( ( currentValues ) => {
      return currentValues.map( ( v, k ) => k === key ? value : v  )
    } );
  }

  return  <form>
    { values.map( ( value, key )  => {
      return <input
        size={30}
        key={`key-${key}`}
        value={ value }
        name={`name-${key}`}
        onChange={e=>changeValue( key, e.currentTarget.value )}
        placeholder="type here and click inactive button"
    />
    }) }
  </form>
}

function Home() {
  return <div>
    <h2>Home</h2>
    <Form />
  </div> ;
}

function About() {
  return <div>
    <h2>About</h2>
    <Form />
  </div> ;
}

function Users() {
  return <div>
    <h2>Users</h2>
    <Form />
  </div>;
}

从“React”导入React；
输入的常数计数=2000；
常数btn={
填充：“10px 20px”，
重量：600，
}
常量活动={
…btn，
边框：“2件纯黑”，
外面：“没有”，
边界半径：4，
颜色：“绿色”，
}
导出默认函数App（）{
const[view，setView]=React.useState（'home'）；
返回(
家
关于
使用者
{view==='home'&&}
{view=='about'&&

5分钟后

回购与测试应用程序