在 .map 循环中反应不必要的重新渲染答案

【问题标题】：React unnecessary rerender inside .map loop在 .map 循环中反应不必要的重新渲染
【发布时间】：2019-12-03 11:34:03
【问题描述】：

我正在尝试实现飞机座位图，并且我的 Seat 组件在循环内重新渲染，但我不知道为什么。

有代码：

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;

据我所知，React 应该只重新渲染具有类 row__seatWrapper 的 Row 和 div，但是，我看到 Seat 组件也会重新渲染，你能解释一下我错过了什么吗？

我需要添加自定义的 prev/nextProps 比较功能到 memoized Seat 组件吗？

更新

(prevProps, nextProps) => { // <-- propsAreEqual callback of Seat.tsx
    console.log(prevProps === nextProps); // <-- false ???
    for (const [prop] of Object.entries(prevProps)) {
        if (prevProps[prop] !== nextProps[prop]) {
            console.log(prop); // <-- doesn't log anything
        }
    }
}

【问题讨论】：

从技术上讲，当父对象中的键发生更改时，它将触发依赖于它的整个渲染函数的重新渲染。由于我们在循环映射中添加了键，因此重新渲染应该不会有任何延迟。
可能你已经为 onSelect 定义了内联函数，这就是你的组件每次都渲染的原因
@ShubhamKhatri 不，现在我只是传递 onSelect={null} 但是，当我 console.log(prevProps === nextProps) 的 Seat 组件时，它返回 false。

标签： reactjs react-hooks

【解决方案1】：

ThemeProvider 更改时似乎发生了不必要的重新渲染

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>;
});

因为 Seat.tsx 从上下文中获得了它的主题:(

【讨论】：