javascript - 使用 forwardRef 反应总是更新子组件,即使使用备忘录
问题描述
所以我有一个 DatePicker ChildComponent我需要ref
从Parent访问它forwardRef
。基本上一切正常。
但是有一个问题。
每次我在 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();
我错过了什么吗?谢谢你的帮助。
解决方案
您正在创建一个 ref using createRef
,在每次重新渲染时都会返回一个新的 ref 实例,因此将导致使用React.memo
.
您应该改为使用useRef
钩子作为功能组件来创建 ref
const datePickerRef = useRef<DatePicker>();
推荐阅读
- sql - 查询以列出同一表下引用同一列的所有索引
- excel - 当我在 Visual Basic 中创建一个空列表时,我收到一条语法错误消息
- asp.net - 将授权与策略应用于 asp.net 核心中命名空间内的所有控制器
- javascript - 如何使用在方法之外的方法中找到的这个变量?
- ms-access - 来自 MS Access 表单的电子邮件
- flutter - 按自定义属性排序列表,然后按 DateTime 属性
- linux - 将时间戳分配给文件名的命令
- python - Python:具有多个返回/输入值的流水线函数,还是使用 OOP?最佳实践?
- python - 用于图像分类问题的网格搜索 cv 中的内存问题
- r - 使用 metafor 的多级元分析 - 多级预测器