Question

我刚开始进行优化，我注意到我的一个组件需要花费约250ms的渲染时间，即使它只是一个简单的Picker。代码看起来像这样。

type PickerProps = {
  value: string;
  setValue: (value: string) => void;
  units: Realm.Results<Units & Realm.Object>;
};

const PickerWithPortion: React.FC<PickerProps> = props => {
  const { value, setValue, units } = props;
  return (
    <Picker selectedValue={value} onValueChange={value => props.setValue(value)}>
      {Object.keys(units).map((value, index) => {
        return <Picker.Item key={units[index].id.toString()} label={units[index].shortName} value={units[index].shortName} />;
      })}
    </Picker>
  );
};

我猜这与延迟加载有关。选取器仅包含〜4个项目。我该怎么办？该领域数据正在整个应用程序中使用，但稍后可能会更改。我应该将其存储在redux中并使其与领域保持同步，还是缺少某些内容？使用Realm.Results的其他组件所需的时间几乎不及此组件。

Answer 1

我刚刚发现我可以使用React.Profiler并用它包装我的Picker。如果未启用调试，则该组件仅花费约20毫秒。因此，我认为启用调试功能后，Realm只会非常缓慢。希望我可以帮助其他一些无助的傻瓜避免尝试优化按原样运行的Component。

使用Object.keys反应Realm慢速渲染

1 个答案: