优化 React 中多个组件的渲染

Question

我正在使用 React Native 来开发 Android TV 应用程序。我有一个Player组件，它基于 JSON 数组呈现Asset组件。播放器组件有一个每秒运行一次的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。如何优化代码，以免每次更改状态时都重新呈现新组件？似乎为以前渲染过的资产重新渲染已经初始化的组件会更有性能，但我不确定如何实现这一点。

Answer 1

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

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

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

有关更多信息，请在此处查看官方文档。