Reactjs 在react组件中动态生成svg def可能会导致内存泄漏

我正在制作一个svg动画，它需要在动画运行时在元素中动态生成svg渐变

但是，浏览器似乎即使在运行之后也无法释放内存 已由React使用或从dom中删除

经过数小时的研究，我发现如果梯度元素的id为无限范围（例如数学随机），就会发生这种情况

现在我的问题是如何在不重新加载浏览器的情况下释放内存

谢谢

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
);
}
}
类Tt扩展了React.Component{
建造师（道具）{
超级（道具）；
this.timer=null；
此.state={
身份证号码：0
};
}
componentDidMount（）{
让循环=（）=>{
这是我的国家({
id:this.state.id+1
}, () => {
window.requestAnimationFrame（循环）；
});
};
loop（）；
}
render（）{
设arr=[]；
for（设i=0；i{
//使用随机id定义defs渐变
返回(
)
//-----如果使用i作为id，则问题已解决---
//返回(
//   
//     
//     
//   
// )
})
}
{
arr.map（（randomnum，i）=>{
//使用带有随机id的渐变
返回
//-----如果使用i作为id，则问题已解决---
//返回
})
}
}
}
ReactDOM.render(
那是哪种浏览器？Mac上的Chrome 59那么你应该看看Chrome的bugtracker，如果没有其他浏览器的话，你应该提出这个问题。谢谢你的建议@RobertLongson。但是我是svg的新手，我不确定这是Chrome的bug还是我的代码。嘿，你找到解决问题的方法了吗？
class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="App">
        <svg width="1000" height="500">
          <Tt></Tt>
        </svg>
      </div>
    );
  }
}


class Tt extends React.Component {
  constructor(props) {
    super(props);
    this.timer = null;
    this.state = {
      id: 0
    };
  }

  componentDidMount() {
    let loop = () => {
      this.setState({
        id: this.state.id + 1
      }, () => {
        window.requestAnimationFrame(loop);        
      });
    };

    loop();
  }

  render() {
    let arr = [];

    for(let i = 0; i <= 1000; i++){
      arr.push(Math.random());
    }

    return <g>
      <defs>
        {
          arr.map((randomnum, i) => {
            // define defs gradient with random id
            return (
              <linearGradient id={`r${randomnum}`}>
                <stop offset="20%" stopColor="#39F" />
                <stop offset="90%" stopColor="#F3F" />
              </linearGradient>
            )
            // -----problem solved if use i as id---
            // return (
            //   <linearGradient id={`r${i}`}>
            //     <stop offset="20%" stopColor="#39F" />
            //     <stop offset="90%" stopColor="#F3F" />
            //   </linearGradient>
            // )
          })
        }
      </defs>
      <g>
      {
        arr.map((randomnum, i) => {
          // use gradient with random id
          return <rect x={Math.random()*1000} y={Math.random()*500} width="100" height="100" fill={`url(#r${randomnum})`}></rect>
          // -----problem solved if use i as id---
          // return <rect x={Math.random()*1000} y={Math.random()*500} width="100" height="100" fill={`url(#r${i})`}></rect>

        })
      }
      </g>
    </g>
  }
}
ReactDOM.render(
  <App /> ,
  document.getElementById('root')
);