[英]React using forwardRef always update child component even using memo
所以我有一个 DatePicker ChildComponent ,我需要通过Parent的forwardRef
访问它的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
来优化回调记忆,但仍然没有运气。
下面是我的代码:
日期选择器.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 的 props 和 refs。
// Memoized Callback Function
const handleBirthdayChange = useCallback(
(newDate: string) => setFieldValue('birthday', newDate),
[setFieldValue],
);
const datePickerRef = createRef<DatePicker>();
const datePickerRefOnPress = () => datePickerRef.current!.onPressDate();
我错过了什么吗? 谢谢你的帮助。
您正在使用createRef
创建一个 ref,它在每次重新渲染时都会返回一个新的 ref 实例,因此会导致使用React.memo
优化子重新渲染失败。
您应该改为使用useRef
钩子作为功能组件来创建 ref
const datePickerRef = useRef<DatePicker>();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.