这是使用React.useMemo的用例之一吗？

问题描述

是否将返回如下所示的JSX视为昂贵的计算/计算？我读了几篇文章，包括Kent C Dodds有关何时使用useMemo和useCallback的文章。他们中的大多数人明确表示在您的应用程序运行缓慢时使用那些API。很想知道React社区对此有何看法

这是我的代码：

...few codes above
const dynamicJSX = React.useMemo(() => {
        switch(input.vitalType) {
            case 'BLOOD_PRESSURE': {
                return (
                    <Col span={24}>
                        <Row gutter={16}>
                            <Col lg={12} md={24} sm={24} xs={24}>
                                <Input
                                    type="text"
                                    name="systolic"
                                    label={t('label.systolic')}
                                    onChange={onChange}
                                    value={input.systolic}
                                    error={error.systolic}
                                    required={true}
                                    onPressEnter={onPressEnter}
                                />
                            </Col>

                            <Col lg={12} md={24} sm={24} xs={24}>
                                <Input
                                    type="text"
                                    name="diastolic"
                                    label={t('label.diastolic')}
                                    onChange={onChange}
                                    value={input.diastolic}
                                    error={error.diastolic}
                                    required={true}
                                    onPressEnter={onPressEnter}
                                />
                            </Col>
                        </Row>
                    </Col> 
                )
            } 

            case 'gluCOSE': {
                return (
                    <Col span={24}>
                        <Row gutter={16}>
                            <Col lg={12} md={24} sm={24} xs={24}>
                                <Select
                                    label={t('label.conditions')}
                                    name="conditions"
                                    required={true}
                                    onChange={(value) => onSelectChange('conditions',value)}
                                    value={input.conditions}
                                    error={error.conditions}
                                    placeholder={t('opt.select_one')}
                                    dropOptions={[
                                        { label: t('opt.fasting'),value: 'FASTING' },{ label: t('opt.after_meal'),value: 'AFTER_MEAL' },{ label: t('opt.hours_after_meal'),value: '2_TO_3_HOURS_AFTER_MEAL' }
                                    ]}
                                />
                            </Col>
                                    
                            <Col lg={12} md={24} sm={24} xs={24}>
                                <Input
                                    type="text"
                                    name="value"
                                    label={t('label.value')}
                                    onChange={onChange}
                                    value={input.value}
                                    error={error.value}
                                    required={true}
                                    onPressEnter={onPressEnter}
                                />
                            </Col>
                        </Row>
                    </Col>
                )
            }

            default:
                return (
                    <Col lg={12} md={24} sm={24} xs={24}>
                        <Input
                            type="text"
                            name="value"
                            label={t('label.value')}
                            value={input.value}
                            error={error.value}
                            required={true}
                            onPressEnter={onPressEnter}
                            onChange={onChange}
                        />
                    </Col>
                )
        }
    },[input.vitalType]);
    
return (
   <div>
      /// few codes here
     {dynamicJSX}
   </div>
)

解决方法

首先，您需要在useMemo中为所使用的道具指定依赖项，例如onChange，onPressEnter等。现在，在这种情况下，性能不会有太大变化，因为组件无论如何都会重新渲染prop更改，useMemo也是如此。

useMemo的主要用例有副作用，当我们进行一些计算（如异步任务的结果）时，最好记住结果而不是在每个渲染器上重新计算。