使用 require() 加载功能组件答案

【问题标题】：Using require() to load functional component使用 require() 加载功能组件
【发布时间】：2021-04-11 09:00:46
【问题描述】：

我的应用程序需要很长时间（15 秒 2GB RAM/10 秒 3GB RAM/5 秒 4GB RAM）进行冷启动，我正在尝试减少此时间。受Inline Requires 和this 的启发，我正在尝试按需加载一些功能组件。所以我这样做 -

日期选择器.tsx

import React from 'react';
import DateTimePicker, { DateTimePickerProps } from 'react-native-modal-datetime-picker';

...

export const DatePicker: React.FC<DatePickerProps> = (props) => {

return (
  <DateTimePicker
   date={props.date}
   isVisible={props.isDateTimePickerVisible}
   ...
  />
);

};

AddRecord.tsx

 //Intentionally commented import 
 //import { DatePicker } from '@aph/mobile-patients/src/components/ui/DatePicker';
 
 ...

 let DatePicker: any = null;

 export const AddRecord: React.FC<AddRecordProps> = (props) => {
    const [isDateTimePickerVisible, setIsDateTimePickerVisible] = useState<boolean>(false);

    return(
      <View>
        <Text  onPress={() => {
            setIsDateTimePickerVisible(true);

            if (DatePicker == null) {
              DatePicker = require('@aph/mobile-patients/src/components/ui/DatePicker');
            }

            Alert.alert('Clicked');

            console.log('check DatePicker ', DatePicker);
          }}> Click Me </Text>

          {isDateTimePickerVisible ? (
            <DatePicker
               isDateTimePickerVisible={isDateTimePickerVisible}
                ...
             />
          ) : null}
      </View>
    );
 }

但是模拟器报错

记录 DatePicker 对象 -

【问题讨论】：

标签： javascript android ios reactjs react-native

【解决方案1】：

setIsDateTimePickerVisible 在 DatePicker 加载之前设置为 true。

我不确定，但我想可能是：

<Text  onPress={() => {
            if (DatePicker == null) {
              DatePicker = require('@aph/mobile-patients/src/components/ui/DatePicker');
            }

            Alert.alert('Clicked');
 
            console.log('check DatePicker ', DatePicker);
            setIsDateTimePickerVisible(true); // <- update the state after


          }}> Click Me </Text>

【讨论】：