面试题：React复杂条件下的State渲染优化

Question

假设在一个电商应用的React组件中，有一个state`productType`，其值可能为'electronics'、'clothing'、'food'。根据不同的`productType`，需要渲染不同的产品展示组件（例如`ElectronicsComponent`、`ClothingComponent`、`FoodComponent`），并且要求在每次`productType`变化时，尽量减少不必要的渲染。请阐述实现思路并写出关键代码。

Answer 1

实现思路

1. 使用React的useState钩子来管理productType状态。
2. 通过React.memo来包装展示组件（ElectronicsComponent、ClothingComponent、FoodComponent），这样当组件的props没有变化时，组件不会重新渲染。
3. 在主组件中，根据productType的值，使用switch语句或if - else语句来决定渲染哪个展示组件。

关键代码

import React, { useState } from 'react';

// 假设这是三个展示组件，使用React.memo包装
const ElectronicsComponent = React.memo(() => {
    return <div>电子产品展示组件</div>;
});
const ClothingComponent = React.memo(() => {
    return <div>服装展示组件</div>;
});
const FoodComponent = React.memo(() => {
    return <div>食品展示组件</div>;
});

const ProductShowcase = () => {
    const [productType, setProductType] = useState('electronics');

    let ComponentToRender;
    switch (productType) {
        case 'electronics':
            ComponentToRender = ElectronicsComponent;
            break;
        case 'clothing':
            ComponentToRender = ClothingComponent;
            break;
        case 'food':
            ComponentToRender = FoodComponent;
            break;
        default:
            ComponentToRender = ElectronicsComponent;
    }

    return (
        <div>
            <select onChange={(e) => setProductType(e.target.value)}>
                <option value="electronics">电子产品</option>
                <option value="clothing">服装</option>
                <option value="food">食品</option>
            </select>
            <ComponentToRender />
        </div>
    );
};

export default ProductShowcase;