useCallback / useMemo在React中做什么?

docs中所述,useCallback返回一个已记忆的回调。

传递内联回调和输入数组。useCallback将返回回调的记忆版本,该回调版本仅在输入之一发生更改时才会更改。当将回调传递给依赖于引用相等性的优化子组件以防止不必要的渲染(例如,shouldComponentUpdate)时,此方法很有用。

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

但是它是如何工作的,在React中最好用在哪里?

PS:我认为带有Codepen示例的可视化将帮助每个人更好地理解它。在docs中解释