使用React Hooks使用requestAnimationFrame-css教程-PHP中文网

首页

web前端

css教程

使用React Hooks使用requestAnimationFrame

Jennifer Aniston

Apr 17, 2025 am 11:46 AM

Using requestAnimationFrame with React Hooks

使用requestAnimationFrame进行动画制作应该很简单，但是如果您没有仔细阅读React的文档，您可能会遇到一些令人头疼的问题。以下是我亲身经历的三个“陷阱”时刻。

简而言之： 将空数组作为useEffect的第二个参数，以避免其运行多次；将函数传递给状态的setter函数，以确保始终拥有正确状态；使用useRef存储时间戳和请求ID等内容。

`useRef`不仅仅用于DOM引用

在函数组件中存储变量有三种方法：

我们可以定义一个简单的const或let，其值将在每次组件重新渲染时始终被重新初始化。
我们可以使用useState，其值在重新渲染中保持不变，如果更改它，它也会触发重新渲染。
我们可以使用useRef。

useRef钩子主要用于访问DOM，但它不仅仅是这个。它是一个可变对象，可在多次重新渲染中保持一个值。它与useState钩子非常相似，只是您可以通过其.current属性读取和写入其值，并且更改其值不会重新渲染组件。

例如，下面的示例即使组件被其父组件重新渲染，也会始终显示<samp>5</samp>。

function Component() {
  let variable = 5;

  setTimeout(() => {
    variable = variable   3;
  }, 100)

  return <div>{variable}</div>
}

……而这个示例会将数字不断增加三，并持续重新渲染，即使父组件没有改变。

function Component() {
  const [variable, setVariable] = React.useState(5);

  setTimeout(() => {
    setVariable(variable   3);
  }, 100)

  return <div>{variable}</div>
}

最后，这个示例返回五，并且不会重新渲染。但是，如果父组件触发重新渲染，那么它每次都会有一个增加的值（假设重新渲染发生在100毫秒之后）。

function Component() {
  const variable = React.useRef(5);

  setTimeout(() => {
    variable.current = variable.current   3;
  }, 100)

  return <div>{variable.current}</div>
}

如果我们有可变的值，我们希望在下一个或以后的渲染中记住它们，并且我们不希望它们在更改时触发重新渲染，那么我们应该使用useRef。在我们的例子中，我们需要在清理时不断变化的请求动画帧ID，如果我们根据周期之间经过的时间进行动画，那么我们需要记住上一个动画的时间戳。这两个变量应该存储为引用。

`useEffect`的副作用

我们可以使用useEffect钩子来初始化和清理我们的请求，尽管我们希望确保它只运行一次；否则，它最终会在每次渲染时创建、取消和重新创建动画帧请求。这是一个有效的，但不好的例子：

function App() {
  const [state, setState] = React.useState(0)

  const requestRef = React.useRef()

  const animate = time => {
    // 根据动画更改状态
    requestRef.current = requestAnimationFrame(animate);
  }

  // 不要这样做
  React.useEffect(() => {
    requestRef.current = requestAnimationFrame(animate);
    return () => cancelAnimationFrame(requestRef.current);
  });

  return <div>{state}</div>;
}

为什么不好？如果您运行此代码，useEffect将触发animate函数，该函数将更改状态并请求新的动画帧。听起来不错，除了状态更改将通过再次运行整个函数（包括将首先作为清理取消上一周期中animate函数发出的请求，然后启动新请求的useEffect钩子）来重新渲染组件。这最终替换了animate函数发出的请求，这是完全不必要的。我们可以通过不在animate函数中启动新的请求来避免这种情况，但这仍然不是很好。它仍然会在每一轮留下不必要的清理，如果组件由于其他原因重新渲染——例如父组件重新渲染它或其他状态已更改——那么不必要的取消和请求重新创建仍然会发生。更好的模式是只初始化一次请求，通过animate函数保持它们的旋转，然后在组件卸载时进行一次清理。

为了确保useEffect钩子只运行一次，我们可以将空数组作为第二个参数传递给它。但是，传递空数组有一个副作用，它会阻止我们在动画过程中获得正确状态。第二个参数是效果需要响应的更改值的列表。我们不想对任何东西做出反应——我们只想初始化动画——因此我们有空数组。但是React会将其解释为这意味着此效果不必与状态保持最新。这包括animate函数，因为它最初是从效果中调用的。结果，如果我们尝试在animate函数中获取状态的值，它将始终是初始值。如果我们想根据其先前值和经过的时间来更改状态，那么它可能无法工作。

function App() {
  const [state, setState] = React.useState(0)

  const requestRef = React.useRef()

  const animate = time => {
    // 此处的“state”将始终是初始值
    requestRef.current = requestAnimationFrame(animate);
  }

  React.useEffect(() => {
    requestRef.current = requestAnimationFrame(animate);
    return () => cancelAnimationFrame(requestRef.current);
  }, []); // 确保效果只运行一次

  return <div>{state}</div>;
}

状态的setter函数也接受函数

即使useEffect钩子将我们的状态锁定到其初始值，也有一种方法可以使用我们最新的状态。useState钩子的setter函数也可以接受一个函数。因此，与其像您大多数时候那样基于当前状态传递值：

setState(state   delta)

……您也可以传递一个接收先前值作为参数的函数。而且，是的，即使在我们这种情况下，这也会返回正确的值：

setState(prevState => prevState   delta)

将所有内容整合在一起

这是一个简单的示例，用于总结所有内容。我们将把上述所有内容放在一起，创建一个计数器，该计数器计数到100，然后从开头重新开始。我们希望持久化和变异而不重新渲染整个组件的技术变量使用useRef存储。我们通过将空数组作为其第二个参数来确保useEffect只运行一次。我们通过向useState的setter传递一个函数来变异状态，以确保我们始终拥有正确状态。