带有依赖项数组的 React Native 动画 useEffect 钩子创建无限循环

Question

我正在尝试弄清楚如何使用 react-hooks/exhaustive-deps 规则使 eslint 快乐，并在 Animated 库中使用内置的 Animated 库来使用 useEffect 制作动画。

以下代码应在单击时突出显示按钮，方法是用彩色视图覆盖它。

const Component = props => {
  const [active, setActive] = useState(false);
  const [opacity, setOpacity] = useState(new Animated.Value(0));

  useEffect(() => {
    if (active) {
      Animated.timing(opacity, {
        toValue: 1,
        duration: 200,
        useNativeDriver: true
      }).start();
    } else {
      setOpacity(new Animated.Value(0))
    }
  }, [active, opacity]); // <- Works fine without `opacity`, but eslint wants this

  return (
    <View>
      <Animated.View style={{backgroundColor: "blue", opacity}} />
      <TouchableOpacity onPress={()=> setActive(!active)} />  
    </View>
  )
};

有没有办法在不禁用规则的情况下执行此操作（使用 useCallback、useMemo 等）？

Answer 1

您不需要调用 setOpacity，而是可以使用 setValue:

opacity.setValue(0)

也不需要添加opacity到依赖项，因为它永远不会改变。 ESLint 并不总是正确的。

带有依赖项数组的 React Native 动画 useEffect 钩子创建无限循环

React Native animation useEffect hook with dependencies array creates infinite loop

javascript

reactjs

react-native

react-animated

react-hooks