react-spring

Question

以下代码是一个简单的 React 组件，它使用 react-spring 为 p (animated.p) 元素设置动画。动画在 fadeIn 常量中定义，并通过 style={fadeIn} 标签分配给 animated.p 元素。

//returns and animates <p> elements:
function QuoteBox(props) {
  const fadeIn = useSpring({ opacity: 1, from: { opacity: 0 } });
  return (
    <>
    <blockquote>
      <animated.p id="text" style={fadeIn}>{props.quote}</animated.p>
    </blockquote>
    <animated.p id="author" style={fadeIn}>{props.author}<cite><em>{props.from}</em></cite></animated.p>
    </>
  );
}

当页面加载并且 QuoteBox 组件安装到 DOM 时，useSpring 将 animated.p 元素的不透明度从 0 更改为 1。但是，每次我将 new props 传递给 animated.p 元素时，我都需要这样做，但我很难理解如何做到这一点。

在react-spring docs page上有一些simple examples，它使用组件的state（toggle）将不透明度从0更改为1 反之亦然，但我不清楚如何将不透明度从 0 更改为 1 每次我将新的 prop 传递给 animated.p 元素. 我只是想在它改变时获得一个简单的文本淡入。

抱歉之前的困惑问题，这对我来说可能有点太难了。另外，我不完全确定 react-spring 是一个不错的选择，对于我想要实现的目标来说它似乎过于复杂。

Answer 1

您可以使用更新函数语法实现这一点。它使用 return 初始属性的函数初始化，return 更新函数（以及 stop 函数，此处未使用）允许初始属性覆盖：

function QuoteBox(props) {
  const [fadeIn, set] = useSpring(() => ({ opacity: 0 }));

  React.useEffect(() => {
    set({ opacity: 1, from: { opacity: 0 }});
  }, [set, props.quote, props.author, props.from]);

  return (
    <>
      <blockquote>
        <animated.p id="text" style={fadeIn}>
          {props.quote}
        </animated.p>
      </blockquote>
      <animated.p id="author" style={fadeIn}>
        {props.author}
        <cite>
          <em>{props.from}</em>
        </cite>
      </animated.p>
    </>
  );

这将有效地重置挂载时的动画以及道具更改后的每个后续重新渲染。 React（或 ESlint）可能会抱怨上面对 useEffect 的使用，因为 none 的 prop 值实际上正在被使用，我们只是在观察它们的变化，因为它似乎暗示那是动画的时间应该重新运行。

您可以通过以下方式避免这种情况：

记忆：

const MemoQuoteBox = React.memo(QuoteBox);

由于所有 props 都是字符串（一种简单的数据类型，按值相等，而不是像对象或数组那样按引用），你可以按原样记忆组件，它只会在其中一个更改时重新呈现。这将允许您删除依赖数组，因为现在组件只会在道具更改时更新：

React.useEffect(() => {
  set({ opacity: 1, from: { opacity: 0 }});
});

如果您将来要将更多道具传递给此组件，则可能不太理想。

参考：

const currString = props.quote + props.author + props.from;
const prevString = React.useRef(currString);

React.useEffect(() => {
  if (currString === prevString.current) return;
  set({ opacity: 1, from: { opacity: 0 }});
  prevString.current = currString;
}, [set, currString]);

现在我们正在使用传递的值 ESlint 不应抛出警告。我利用了 props 都是字符串这一事实来在这里连接它们（因为它们在概念上是相关联的），但是如果将它们分开，原理是相同的。

脏Return:

只是 return 直接来自 effect 的值，ESlint 应该认为它们是“已使用”的，尽管此时你也可以只使用 eslint-disable-next-line:

React.useEffect(() => {
  set({ opacity: 1, from: { opacity: 0 }});
  return props.quote + props.author + props.from;
}, [set, props.quote, props.author, props.from]);

react-spring - 动画 <p> 内容变化的元素

react-spring - animate <p> elements on content change

javascript

reactjs