React native 使用Animated 优化连续setState 性能问题

import React, { useRef, useEffect } from 'react';
import { Animated, Text, View } from 'react-native';
 
const FadeInView = ({ text }) => {
  const fadeAnim = useRef(new Animated.Value(0)).current; // 初始透明度为0
 
  useEffect(() => {
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 3000, // 动画持续时间3000毫秒
      useNativeDriver: true // 使用原生驱动以优化性能
    }).start(); // 启动动画
  }, [fadeAnim]);
 
  return (
    <Animated.View style={{opacity: fadeAnim}}>
      <Text>{text}</Text>
    </Animated.View>
  );
};
 
export default FadeInView;

这段代码使用了React Native的Animated API来创建一个组件，该组件在加载时会淡入文本。通过使用useRef来保持fadeAnim的值在重新渲染中保持不变，并且通过useEffect来确保动画只在fadeAnim变更时才被触发，从而优化了连续的setState调用可能导致的性能问题。