场景相对简单：我们在远程服务器上进行了长时间运行的按需计算。我们想记住结果。即使我们从远程资源异步获取，这也不是副作用，因为我们只是希望将此计算的结果显示给用户，我们绝对不想在每次渲染时都这样做。
问题：React.useMemo 似乎不直接支持 Typescript 的 async/await，会返回一个 promise：
//returns a promise:
let myMemoizedResult = React.useMemo(() => myLongAsyncFunction(args), [args])
//also returns a promise:
let myMemoizedResult = React.useMemo(() => (async () => await myLongAsyncFunction(args)), [args])
等待异步函数的结果并使用 React.useMemo 记住结果的正确方法是什么？我已经使用普通 JS 的常规Promise，但在这些类型的情况下仍然与它们斗争。
我尝试过其他方法，例如 memoize-one，但问题似乎是this由于 React 函数组件的工作方式导致上下文发生了变化，从而破坏了 memoization，这就是我尝试使用 React.useMemo 的原因。
也许我想在这里的一个圆孔中安装一个方钉——如果是这样的话，也知道这一点会很好。现在我可能只是要推出我自己的记忆功能。
编辑：我认为部分原因是我在 memoize-one 上犯了一个不同的愚蠢错误，但我仍然有兴趣知道这里的答案是 React.memo。
这是一个片段 - 这个想法不是直接在渲染方法中使用记忆化的结果，而是作为以事件驱动的方式引用的东西，即在计算按钮点击上。
export const MyComponent: React.FC = () => {
let [arg, setArg] = React.useState('100');
let [result, setResult] = React.useState('Not yet calculated');
//My hang up at the moment is that myExpensiveResultObject is
//Promise<T> rather than T
let myExpensiveResultObject = React.useMemo(
async () => await SomeLongRunningApi(arg),
[arg]
);
const getResult = () => {
setResult(myExpensiveResultObject.interestingProperty);
}
return (
<div>
<p>Get your result:</p>
<input value={arg} onChange={e => setArg(e.target.value)}></input>
<button onClick={getResult}>Calculate</button>
<p>{`Result is ${result}`}</p>
</div>);
}