如何在 React 中使用回调？

Question

我很好奇useEffect和useCallback之间的区别。

const onUpdate = useCallback(() => {
  firebase
    .firestore()
    .collection('answer')
    .where('questionUid', '==', questionUid)
    .get()
    .then((snap) => {
      const answer = snap.docs.map((doc) => ({
        id: doc.id,
        ...doc.data(),
      }));
      setAnswers(answer);
    });
}, [answers]);

Answer 1

它们是两个完全不同的东西：useEffect() 的目的是在组件渲染后运行副作用，而 useCallback() 的目的是记住一个回调函数，这样每次组件都不会重新实例化它重新渲染。

useEffect() 可以触发组件重新渲染并以某种方式改变用户在界面中看到的内容，无论是在布局方面（例如，根据视口变化调整图像大小）或在内容方面（例如检索数据）来自外部资源）而useCallback() 是一种性能优化，对用户没有明显影响（好吧，实际上在某些情况下忘记使用useCallback() 可能会导致无限的重新渲染循环，但这是一个不同的主题）。