【React小白】useMemo和useEffect和useCallback 有什么不同吗？

[jrenc2002]

【React小白】useMemo和useEffect和useCallback 有什么不同吗？
React的Hook哪些是比较常用的？都有哪些坑？

[0xorz]

useMemo、useEffect 和 useCallback 是三个常用的Hooks：

useMemo

useMemo 用于对复杂运算的结果进行缓存。当有成本较高的计算且依赖特定变量时，可以使用useMemo来避免在每次渲染时都重新计算。此Hook接收一个函数和一个依赖项数组，只有当依赖项改变时，才会重新计算memoizedValue。例如：

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useEffect

useEffect 用于处理副作用，也就是说和UI不相关的内容，例如获取数据，修改DOM元素等。它接受一个函数和一个依赖项。若依赖项为空数组（[]），副作用仅执行一次（例如用于页面初次刷新）；若依赖项为其他变量，则仅当依赖项变化时执行。例如：

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    subscription.unsubscribe();
  };
}, [props.source]);

useCallback

useCallback 用于缓存函数本身。此Hook接收一个内联函数和一个依赖项数组，仅当依赖项改变时，才会返回新的函数实例（高阶函数的概念，返回函数）。例如：

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

常用Hook

• useState：用于添加状态。
• useEffect：用于处理副作用。
• useContext：保存上下文，无需层层传递变量。
• useRef：用于获取DOM元素的引用，或者存储任何可变的值。

常见坑

1. 依赖项遗漏：例如useEffect、useMemo或useCallback中忘记添加依赖项，可能造成功能错误。
2. 无限渲染：依赖项设置不正确，而导致每次调用都触发重新渲染，例如useEffect的无限循环调用。

[jrenc2002]

感谢回复。
但useMemo、useEffect 和 useCallback 感觉不都是vue里的监控吗？一个东西变了，然后执行函数。