Reactjs 在内部反应不必要的重新加载。映射循环

我正在尝试实现飞机座椅地图和我的座椅组件内部的循环重排器，但我不明白为什么

代码如下：

export interface Props {
    passengers: PassengerState[];
    row: RowWithParts;
    nextRow: RowWithParts;
    rowIndex: number;
    lastRow: number;
    onSelect: (seat: SeatType) => void;
    highlightedService: string; // <- Seats rerenders when i change this prop, I'm try to avoid this
    setHighlightedService: (serviceId: string) => void;
    passengerId: string;
    segmentId: string;
}

const Row: React.FunctionComponent<Props> = React.memo(({ row, ...props }) => {

    return (
        <React.Fragment>
            {props.rowIndex === 0 && (
                <div className={cn(theme.row, theme.row_serviceClass)}>
                    {t(`${firstSeatService ? firstSeatService.serviceClass : 'Economy'} class`)}
                </div>
            )}

            {!isLastRow && row.exitRow && <ExitRow />}
            <div
                className={cn(theme.row, {
                    [theme.row_otherClass]: props.rowIndex === 0,
                    [theme.row_nextRowHasOtherClass]: nextRowHasOtherServiceClass(row, props.nextRow)
                })}
                with-wings={row.wing ? 'true' : 'false'}
            >
                {row &&
                    row.parts &&
                    row.parts.map((part, partIndex) => {
                        // omit some logic here

                        return (
                            <div
                                key={partIndex}
                                onMouseEnter={() => {
                                    // returns null for free seats and service for paid
                                    // in other cases like aisles returns boolean
                                    props.setHighlightedService(currentPartService) <-- change highlightedService prop here;
                                }}
                                onMouseLeave={() => props.setHighlightedService('')}
                            >
                                <div
                                    className={cn(theme.row__seatWrapper)} // <-- here is we highlight sibling div, I'm omit some code here
                                />

                                {part.map((seat, seatIndex) => {
                                    // some Seat logic ( calculate availability etc. )


                                    return (
                                        <Seat // <-- React.memo ( this component doesn't need to rerender when highlightedService changes)
                                            key={seatIndex}
                                            seat={seat}
                                            isOccupied={isOccupied}
                                            isAvailable={isAvailable}
                                            occupiedBy={occupiedBy}
                                            isOccupiedByOtherPassenger={isOccupiedByOtherPassenger}
                                            onSelect={props.onSelect}
                                        />
                                    );
                                })}
                            </div>
                        );
                    })}
            </div>
            {isLastRow && row.exitRow && <ExitRow />}
        </React.Fragment>
    );
});

export default Row;

导出接口道具{
乘客：乘客国[]；
row：RowWithParts；
下一步：与零件一起划船；
行索引：编号；
最后一行：数字；
onSelect：（座椅：座椅类型）=>无效；
highlightedService:字符串；//
{零件图（（座椅，座椅索引）=>{
//一些座椅逻辑（计算可用性等）
返回(
当提供程序更改时，似乎会出现不必要的重新加载

export const ThemeProvider: React.FC<ThemeProviderProps> = React.memo(({ value, children }) => {
    const theme: EngineTheme = useContext(ThemeContext);

    return <ThemeContext.Provider value={mergeCSS(theme, value)}>{children}</ThemeContext.Provider>;
});

export const ThemeProvider:React.FC=React.memo（{value，children}）=>{
常量主题：EngineTheme=useContext（ThemeSecontext）；
返回{children}；
});

因为Seat.tsx的主题来自该上下文：（
从技术上讲，当父对象中的某个键发生更改时，它将触发依赖于该键的整个渲染函数的重新渲染。由于我们在循环映射中添加了键，因此重新渲染时不应有任何延迟。可能您已为onSelect定义了内联函数，这就是组件渲染的原因everytime@ShubhamKhatri不，现在我是just pass onSelect={null}但是，当我调用Seat组件的console.log（prevProps===nextrops）时，它返回false。
export const ThemeProvider: React.FC<ThemeProviderProps> = React.memo(({ value, children }) => {
    const theme: EngineTheme = useContext(ThemeContext);

    return <ThemeContext.Provider value={mergeCSS(theme, value)}>{children}</ThemeContext.Provider>;
});