React Native中的渲染2列表

Question

我的React Native應用程序中有2個選項卡。 第一個呈現女性名稱，第二個呈現男性名稱。 我有一個<List names={[]} /> ，並將基於活動選項卡的名稱數組傳遞給它。 像那樣：

  render() {
    const gender = this.props.isFemaleTabActive ? 'female' : 'male';
    return <List names={this.props.names[gender]} />;
  }

<List>組件使用SectionList來顯示這些名稱，但是每次更改活動選項卡時，都會導致顯示數據和突出顯示活動選項卡的延遲。

但是如果我使用react-loadable並像這樣做的話，它就可以正常工作：

const FemaleNamesList = Loadable({
  loader: () => import('../components/List'),
  loading: () => <Text>Loading...</Text>
});

const MaleNamesList = Loadable({
  loader: () => import('../components/List'),
  loading: () => <Text>Loading...</Text>
});

render() {
    const gender = this.props.isFemaleTabActive ? 'female' : 'male';
    return isFemaleTabActive ? (
      <FemaleNamesList names={this.props.names[gender]} />
    ) : (
      <MaleNamesList names={this.props.names[gender]} />
    );
  }

您能幫助我理解為什么在這種情況下可以正常工作嗎，也許還有其他方法可以對其進行優化。

Answer 1

第一種方法僅更新現有/已安裝組件上的數據，而第二種完全替換2個不同的組件。

在第一種情況下，組件必須比較數據以檢測更改（優化物品的重新顯示）-對於較大的組件，這可能是昂貴的操作。 將組件創建為新實例時，不會對其進行檢查。

當<List />包圍在不同的（愚蠢的，只是渲染孩子的）組件中以愚弄不同的樹結構時，可能會實現（未選中）類似的效果（加速）：

render() {
    const gender = this.props.isFemaleTabActive ? 'female' : 'male';
    return isFemaleTabActive ? (
      <DumbA><List names={this.props.names[gender]} /></DumbA>
    ) : (
      <DumbB><List names={this.props.names[gender]} /></DumbB>
    );
}

強制交換組件的最簡單方法可能是使用key屬性：

render() {
  const gender = this.props.isFemaleTabActive ? 'female' : 'male';
  return <List key={gender} names={this.props.names[gender]} />;
}

當然，這不是任何優化。