javascript - 在 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 /> 时可能(未检查)可以实现类似的效果(加速)将被包围在不同的(愚蠢的，只是渲染子级)组件中，以欺骗与不同树结构的 react ，例如:

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]} />;
}

当然，这不是任何类型的优化。