使用 forwardRef 的 React 总是更新子组件，即使使用 memo

Question

所以我有一个 DatePicker ChildComponent，我需要通过 forwardRef 从 Parent[=42= 访问它的 ref ].基本上一切正常。

但是有一个问题。

每次我在 Parent Other ChildComponents 上更新一些没有任何关系的东西使用 DatePickerChild，DatePicker 仍在呈现，即使它不应该呈现。

我试图删除 ref 从父级到子级的传递，这样每次我对其他我想解决的组件进行更新时，组件就不再重新渲染。

<NativeDatePicker
  ref={datePickerRef} // <-- When I comment this component is not rendering anymore.
  currentDate={values.birthday}
  onDateChange={handleBirthdayChange}
/>

我已经开始通过使用 useCallback 来优化回调记忆，但仍然没有成功。

下面是我的代码：

DatePicker.tsx

type Props = {
  // ref: RefObject<DatePicker>;
  currentDate: string | Date | undefined;
  onDateChange: (newDate: string) => void;
};

const NativeDatePicker = forwardRef(
  ({ currentDate, onDateChange }: Props, ref: any) => {
    console.log('tadah!');
    return (
      <DatePicker
        ref={ref}
        style={wrapperStyle.wrapper}
        date={currentDate}
        mode="date"
        placeholder="select date"
        format="YYYY-MM-DD"
        // minDate="2016-05-01"
        // maxDate={Date.now()}
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        customStyles={styles}
        onDateChange={onDateChange}
      />
    );
  },
);

const MemoizedNativeDatePicker = memo(NativeDatePicker);

我不会在我的 ParentComponent 中显示所有代码，只显示我传递给 DatePicker 的道具和引用。

 // Memoized Callback Function
 const handleBirthdayChange = useCallback(
    (newDate: string) => setFieldValue('birthday', newDate),
    [setFieldValue],
  );

 const datePickerRef = createRef<DatePicker>();
 const datePickerRefOnPress = () => datePickerRef.current!.onPressDate();

我错过了什么吗？感谢您的帮助。

Answer 1

您正在使用 createRef 创建一个 ref，它在每次重新渲染时都会 return 您一个新的 ref 实例，因此将导致使用 [= 优化子重新渲染失败12=]。

您应该使用useRef 挂钩功能组件来创建 ref

const datePickerRef = useRef<DatePicker>();