useMemo
与使用useEffect
和useState
的组合,是否有任何好处(例如用于密集函数调用)?这里有两个自定义钩子,在第一眼看起来完全相同,除了在第一次渲染时useMemo
返回值为null
:
useEffect & useState
import { expensiveCalculation } from "foo";
function useCalculate(someNumber: number): number | null {
const [result, setResult] = useState<number | null>(null);
useEffect(() => {
setResult(expensiveCalculation(someNumber));
}, [someNumber]);
return result;
}
useMemo
import { expensiveCalculation } from "foo";
function useCalculateWithMemo(someNumber: number): number {
return useMemo(() => {
return expensiveCalculation(someNumber);
}, [someNumber]);
};
每当它们的参数someNumber
更改时,两者都会计算结果,那么useMemo
的记忆化何时开始发挥作用?
null
,而第二个则不会? - Jonas Wilms