Question

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

有代码：

class ChildComponent {
  @Prop
  public parentObject: object;

  @Prop
  public onChange: Function;

  public render() {
     <div>
        {
          this.parentObject.keys.map((key) => {
            return <div>
                     <span> {{key}}</span>
                     // calls parent method to change the immutable object
                     <input value={{this.parentObject[key]}} onChange=(val) => 
                            this.onChange(key, val) />
                   </div>
          })
        }
     </div>


  }
}

据我所知，React应该只用Row__seatWrapper类来重新渲染Row和div，但是，我也看到Seat组件也可以渲染，您能解释一下我错过的内容吗？

我是否需要向自定义的Seat组件添加自定义的prev / nextProps比较功能？

更新

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;

Answer 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从该上下文获得主题：（

在.map循环内进行不必要的重新渲染

1 个答案: