Я думаю, что предполагаемое поведение - показать текущее состояние свойства to для useSpring. Когда он постоянен, он всегда будет показывать одно и то же состояние при каждом рендере. Но вы можете поменять свойство на использование пружины. Например:
const ComponentColor = () => {
const [color, setColor] = React.useState("red");
const props = useSpring({
to: { color },
from: { color: "red" }
});
return (
<>
<animated.h2 style={props}>This color will change</animated.h2>
<button onClick={() => setColor("blue")}>blue</button>
<button onClick={() => setColor("green")}>green</button>
<button onClick={() => setColor("orange")}>orange</button>
</>
);
};
В этом случае цвет текста изменится на цвет, который вы нажали. Я думаю, что ваш пример соответствует этому. При каждом рендеринге будет отображаться текущее состояние свойства to, являющегося последовательностью. Поэтому я думаю, что это предполагаемое поведение.
Если вы хотите, чтобы использовать анимацию состояния только при первом рендеринге. Затем вы можете реорганизовать анимационную часть в новый компонент и убедиться, что она будет отображаться только в первый раз. Например, если вы используете React.memo, он переопределяет компонент вашей функции только в случае изменения одного из его свойств. В этом примере отсутствует свойство, поэтому оно будет отображаться только в первый раз.
const Component = () => {
// let's trigger some rerenders
const [state, setState] = React.useState(false);
React.useEffect(() => {
setInterval(() => {
setState(x => !x);
}, 2000);
}, []);
return <FirstTimeAnimate />;
};
const FirstTimeAnimate = React.memo(() => {
const props = useSpring({
to: async (next, cancel) => {
await next({ opacity: 0.25, color: "#black" });
await next({ opacity: 1, color: "blue" });
},
from: { opacity: 0, color: "red" }
});
return <animated.h2 style={props}>I will fade in and out</animated.h2>;
});
https://codesandbox.io/s/fervent-margulis-drt5l