android 优化React中多个组件的渲染

tag5nh1u  于 2023-01-24  发布在  Android
关注(0)|答案(1)|浏览(82)

我正在为一个Android TV应用程序使用React Native。我有一个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组件只是呈现保存的imagevideo。如何优化代码,以便在每次状态更改时不重新呈现新组件?重新呈现新组件似乎性能更高我为一个先前已经渲染过的资源渲染一个已经初始化的组件,但是我不确定如何实现这一点。

w8f9ii69

w8f9ii691#

若要在每次更改状态时不呈现,可以尝试使用createRef();例如:

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

使用ref的好处是组件不会在每次ref更新时重新呈现。但是,请谨慎使用,因为这会降低组件的可重用性。
欲了解更多信息,请查看官方文档here

相关问题