Question

我的一个组件有一个key道具，可以在满足某些条件时触发渲染：

<MyComponent key={ key }>
  <NestedComponent />
</MyComponent>

NestedComponent实施shouldComponentUpdate。我观察到，由于<{em> MyComponent道具更新而重新呈现 key时，shouldComponentUpdate NestedComponent方法未被调用。

我是否认为由于key道具更新，React会跳过整个子树的对帐过程，因此从头开始挂载NestedComponent？如果不是我错过了什么？

如果它有用，可能还有一点关于我的用例。

我想在react-native上实现无限ViewPager：无限的任何给定页面都有后继者和前任，而不是意义循环。我当然不能立即渲染所有页面，而且我不想保留所有以前渲染的页面，因为它们可能非常昂贵。

我当前的方法是一个可以实例化的组件：

<InfiniteViewPager checksum={ myChecksum } bufferSize={ 2 } renderPageAtIndex={ myRenderPageFunction } onPageSelected={ onPageSelectedCallback } />

InfiniteViewPager组件基本上是这样实现的：

<ViewPagerAndroid key={ this.props.checksum } initialPage={ this.props.bufferSize } onPageSelected={ this.props.onPageSelected } > { range(bufferSize * -1, bufferSize).map( i => this.props.renderPageAtIndex(i) ) } </ViewPagerAndroid>

当用户导航时，我需要将下一个项目设为当前项目，以便可以导航无限序列（这是onPageSelected回调的工作）。因此key道具：如果我没有设置它，页面就不会在导航时重新渲染。

该组件工作正常，但我想重新渲染每个页面的组件，因为它非常昂贵。有什么想法吗？

非常感谢你的帮助!!

Answer 1

使用密钥ID。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="color-button" id="green"></div> <div class="color-button" id="red"></div> <div class="color-button" id="yellow"></div> <div class="color-button" id="blue"></div> <audio id="greenSound" preload="auto" src="#" type="audio/wav"></audio> <audio id="redSound" preload="auto" src="#" type="audio/wav"></audio> <audio id="yellowSound" preload="auto" src="#" type="audio/wav"></audio> <audio id="blueSound" preload="auto" src="#" type="audio/wav"></audio>对于每个组件应该是唯一的。你永远不会使用迭代器中的数字（如key）作为forEach()，除非你完全知道列表永远不会改变（如静态表）。

我可以在其祖先中具有关键道具的组件中使用shouldComponentUpdate吗？

1 个答案: