React 组件运行正常，但尝试使用 useMemo() 会导致错误
我有一个包含会议预订的表单。其中一部分是日历组件，具有相当复杂的用户界面。
<Calendar fullName={fullName} email={email} onEventScheduled={onEventScheduled} />
这很好用。
正如 React 用户所知，当任何输入发生变化时，React 都会重新渲染表单。由于日历仅依赖于某些输入（
fullName
、
email
和
onEventScheduled
），而不依赖于其他输入，并且绘制速度很慢，因此我想使用
useMemo()
来停止日历重新渲染：
（根据 @dmitryguzeev 评论更新为使用 JSX）
const MemoizedCalendar = useMemo(() => {
return <Calendar fullName={fullName} email={email} onEventScheduled={onEventScheduled} />;
}, [email, fullName, onEventScheduled]);
然后
<MemoizedCalendar fullName={fullName} email={email} onEventScheduled={onEventScheduled} />
但是交换到 MemoizedCalendar 会出现以下错误：
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of `Formik`.
（我碰巧使用的是 Formik，但是该组件可以很好地与上述
Calendar
配合使用，只是
MemoizedCalendar
失败）
编辑
：我也尝试过
阅读有关 UseMemo() 的文章
后，
useCallback()
It is worth saying that if a component receives a function as a prop, you need to use the useCallback hook, so that it only declares the function again when necessary. Otherwise props will be different every render, since the function prop will always have a new reference.
const MemoizedCalendar = useCallback(() => {
return Calendar(email, fullName, onEventScheduled);
}, [email, fullName, onEventScheduled]);
此方法可修复错误，但在修改
email
、
fullName
和
onEventScheduled
之外的项目时，仍会不必要地重新渲染。
如何记住这个钩子组件？
要使用
useMemo
记忆组件 JSX 树的各个部分，您需要先在
useMemo
内单独渲染它：
// I usually prefix the name of this variable with rendered* so
// that the user below knows how to use it properly
const renderedCalendar = useMemo(() => {
// This code below tells react to render Calendar with given props.
// This JSX will be transformed into a function call and it will
// happen only after the dependency array given to useMemo changes.
return <Calendar fullName={fullName} email={email} onEventScheduled={onEventScheduled} />
}, [fullName, email, onEventScheduled]);
然后将其用作值，而不是 JSX 树中的组件：
return (
<div>
...
{renderedCalendar}
</div>
);