优化在 React 中渲染多个组件答案

【问题标题】：Optimize rendering multiple components in React优化在 React 中渲染多个组件
【发布时间】：2022-01-25 09:38:59
【问题描述】：

我正在将 React Native 用于 Android TV 应用。我有一个 Player 组件，它基于 JSON 数组呈现 Asset 组件。 Player 组件有一个setTimeout(() => {}, 1000)，它每秒运行一次，并每秒设置currentAsset 的状态值。在我当前的渲染功能中，我正在单独渲染资产：

render() {
    return (
        <><Asset asset={this.state.currentAsset} /></>
    );
}

我的 JSON 对象包含一个资产数据数组，因此 setTimeout 仅循环通过该数组并设置 this.setState({currentAsset: jsonArray[currentLoopIndex])，这会导致 Asset 的许多渲染。我最近注意到了几个错误。第一个是java.util.concurrent.TimeoutException，后者是java.lang.OutOfMemoryError。两者都发生在应用程序运行较长时间后。 Asset 组件只是渲染一个保存的image 或video。如何优化代码，以便在每次更改状态时都不会重新渲染新组件？似乎为之前渲染过的资产重新渲染已经初始化的组件会更有效率，但我不确定如何实现这一点。

【问题讨论】：

标签： android reactjs react-native

【解决方案1】：

要在每次状态更改时不渲染，您可以尝试使用 createRef(); 例如：

  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

使用 ref 的好处是组件不会在每次更新 ref 时重新渲染。但是，请谨慎使用它们，因为它会降低组件的可重用性。

欲了解更多信息，请查看官方文档here。

【讨论】：