Javascript 如何防止在附加更多项时React渲染整个数组

我有一个包含30个唯一选项的数组，用于渲染30个SVG

有一个按钮，可在每次单击阵列时向其添加30个以上的唯一选项。添加30个新选项后，React将重新渲染所有60个SVG，而不是仅渲染30个新SVG

这是一个问题，因为它会导致帧速率下降，并使浏览器结巴。随着阵列中SVG的增加，问题变得越来越严重

我想知道如何才能让React只渲染新添加的30个SVG，而不重新渲染阵列中的所有内容

我甚至为每个SVG添加了一个唯一的键

这是我的密码：

import generateRandomSVG from "../randomGenerator";
import SVGElement from "./SVGElement";
import Button from "./button";

const getSVGs = (num) => {
  let avatarArray = [];
  for (let i = 0; i < num; i++) {
    avatarArray.push(generateRandomSVG());
  }

  return avatarArray;
};

class Home extends React.Component {
  state = {
    svgs: []
  };

  componentDidMount() {
    //render 30 SVGs when the component first loads
    this.setState({
      svgs: getSVGs(30)
    });

    console.log(this.state.avatars);
  }

  handleClick = () => {
    //when user clicks on button, add 30 more SVGs
    const moreSVGs = getSVGs(30);
    this.setState({
      svgs: this.state.svgs.concat(moreSVGs)
    });
  };

  render() {
    return (
      <div>
        <Button onClick={this.handleClick}>Add 30 more SVGs </Button>

        {this.state.svgs.map((SVGObject) => {
          const key = SVGObject.uniqueKey;
          return (
            <div key={key}>
              <SVGElement {...SVGObject.options} />
            </div>
          );
        })}

      </div>
    );
  }
}

从“./randomGenerator”导入GeneratorDomainSVG；
从“/SVGElement”导入SVGElement；
从“/”按钮导入按钮；
const getSVGs=（num）=>{
让rarray=[]；
for（设i=0；i{
//当用户单击按钮时，再添加30个SVG
const moreSVGs=getSVGs（30）；
这是我的国家({
svgs:this.state.svgs.concat（moreSVGs）
});
};
render（）{
返回(
增加30个SVG
{this.state.svgs.map（（SVGObject）=>{
const key=SVGObject.uniqueKey；
返回(
);
})}
);
}
}

不要将所有SVG放在一个数组中，而是将SVG数组放在每个数组可以容纳30个SVG的数组中

componentDidMount() {
  this.setState({
    svgs: svgs.push(getSVGs(30))
  });
}

handleClick = () => {
  const moreSVGs = getSVGs(30);
  const updatedSVGs = this.state.svgs.push(moreSVGs)
  this.setState({
    svgs: updatedSVGs
  });
};

render() {
  return (
    <div>
      <Button onClick={this.handleClick}>Add 30 more SVGs </Button>

      {this.state.svgs.forEach((svgBatch) => {
         svgBatch.map((SVGObject) => {
           const key = SVGObject.uniqueKey;
           return (
             <div key={key}>
               <SVGElement {...SVGObject.options} />
             </div>
           );
        })}
      })

    </div>
  );
}

---

只是想澄清一下，你渲染的SVG的最大数量是多少，还是每次点击按钮都会添加30个SVG？为什么不跟踪渲染项目的开始和结束位置，然后映射到这些位置？@entresudonym没有最大值。实际上，我希望最终允许无限滚动。这个按钮只是为了简单起见。我无法复制这个。。。你能在上面创建一个简单的问题演示吗？

shouldComponentUpdate(nextProps, nextState) {
 //I don't know what your SVGObject.options contain so you will have to change
 //the check a liitle but I think you get the idea
  if (JSON.stringify(this.props.options.svgArray) === JSON.stringify(nextProps.options.svgArray)) {
    return false;
  }
}