Question

我试图弄清楚如何使规则react-hooks/exhaustive-deps变得愉快，并使用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并不总是正确。

反应原生动画useEffect钩子与依赖项数组创建无限循环

1 个答案: