使用 useEffect 挂钩反应原生删除 scrollY 侦听器答案

【问题标题】：React native remove scrollY listener with useEffect hook使用 useEffect 挂钩反应原生删除 scrollY 侦听器
【发布时间】：2020-08-25 16:05:34
【问题描述】：

const [scrollY] = useState(new Animated.Value(0));
const [scrollYValue, setScrollYValue] = useState(0);

useEffect(() => {
  scrollY.addListener(({ value }) => {
    setScrollYValue(value);
  });
  return scrollY.removeAllListeners();
}, [scrollY, scrollYValue, setScrollYValue]);

目标是实例化一个名为 scrollY 的 Animated.Value 并添加一个侦听器，将当前滚动值设置为状态。这个滚动值scrollYValue 在组件之间共享，因此它们可以根据用户滚动的距离做任何他们需要做的事情。

如果我删除 return scrollY.removeAllListeners(); 行，一切正常，但我确实想在卸载此组件时删除侦听器。

这是我的useEffect 依赖数组不正确的情况吗？它似乎立即删除了侦听器，并且 scrollY 刚刚固定在 0。

【问题讨论】：

标签： reactjs react-native react-hooks use-effect

【解决方案1】：

更新：useEffect 中的返回值应该是一个函数：

useEffect(() => {
  scrollY.addListener(({ value }) => {
    setScrollYValue(value);
  });
  return () => scrollY.removeAllListeners();
}, [scrollY, scrollYValue, setScrollYValue]);

【讨论】：