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

Question

返回像下面这样的 JSX 是否被认为是昂贵的 computation/calculation？我读了几篇文章，包括 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>
)

Answer 1

首先，您需要在 useMemo 中为您正在使用的道具指定依赖项，例如 onChange、onPressEnter 等等。现在在这种情况下它不会产生太大的性能差异，因为组件将 re-render 无论如何 prop 变化，useMemo.

也是如此

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