使用requestAnimationFrame進行動畫制作應(yīng)該很簡單，但是如果您沒有仔細閱讀React的文檔，您可能會遇到一些令人頭疼的問題。以下是我親身經(jīng)歷的三個“陷阱”時刻。

簡而言之： 將空數(shù)組作為useEffect的第二個參數(shù)，以避免其運行多次；將函數(shù)傳遞給狀態(tài)的setter函數(shù)，以確保始終擁有正確狀態(tài)；使用useRef存儲時間戳和請求ID等內(nèi)容。

useRef不僅僅用于DOM引用

在函數(shù)組件中存儲變量有三種方法：

1. 我們可以定義一個簡單的const或let，其值將在每次組件重新渲染時始終被重新初始化。
2. 我們可以使用useState，其值在重新渲染中保持不變，如果更改它，它也會觸發(fā)重新渲染。
3. 我們可以使用useRef。

useRef鉤子主要用于訪問DOM，但它不僅僅是這個。它是一個可變對象，可在多次重新渲染中保持一個值。它與useState鉤子非常相似，只是您可以通過其.current屬性讀取和寫入其值，并且更改其值不會重新渲染組件。

例如，下面的示例即使組件被其父組件重新渲染，也會始終顯示<samp>5</samp>。

function Component() {
  let variable = 5;

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

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

……而這個示例會將數(shù)字不斷增加三，并持續(xù)重新渲染，即使父組件沒有改變。

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

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

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

最后，這個示例返回五，并且不會重新渲染。但是，如果父組件觸發(fā)重新渲染，那么它每次都會有一個增加的值（假設(shè)重新渲染發(fā)生在100毫秒之后）。

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

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

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

如果我們有可變的值，我們希望在下一個或以后的渲染中記住它們，并且我們不希望它們在更改時觸發(fā)重新渲染，那么我們應(yīng)該使用useRef。在我們的例子中，我們需要在清理時不斷變化的請求動畫幀ID，如果我們根據(jù)周期之間經(jīng)過的時間進行動畫，那么我們需要記住上一個動畫的時間戳。這兩個變量應(yīng)該存儲為引用。

useEffect的副作用

我們可以使用useEffect鉤子來初始化和清理我們的請求，盡管我們希望確保它只運行一次；否則，它最終會在每次渲染時創(chuàng)建、取消和重新創(chuàng)建動畫幀請求。這是一個有效的，但不好的例子：

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

  const requestRef = React.useRef()

  const animate = time => {
    // 根據(jù)動畫更改狀態(tài)
    requestRef.current = requestAnimationFrame(animate);
  }

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

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

為什么不好？如果您運行此代碼，useEffect將觸發(fā)animate函數(shù)，該函數(shù)將更改狀態(tài)并請求新的動畫幀。聽起來不錯，除了狀態(tài)更改將通過再次運行整個函數(shù)（包括將首先作為清理取消上一周期中animate函數(shù)發(fā)出的請求，然后啟動新請求的useEffect鉤子）來重新渲染組件。這最終替換了animate函數(shù)發(fā)出的請求，這是完全不必要的。我們可以通過不在animate函數(shù)中啟動新的請求來避免這種情況，但這仍然不是很好。它仍然會在每一輪留下不必要的清理，如果組件由于其他原因重新渲染——例如父組件重新渲染它或其他狀態(tài)已更改——那么不必要的取消和請求重新創(chuàng)建仍然會發(fā)生。更好的模式是只初始化一次請求，通過animate函數(shù)保持它們的旋轉(zhuǎn)，然后在組件卸載時進行一次清理。

為了確保useEffect鉤子只運行一次，我們可以將空數(shù)組作為第二個參數(shù)傳遞給它。但是，傳遞空數(shù)組有一個副作用，它會阻止我們在動畫過程中獲得正確狀態(tài)。第二個參數(shù)是效果需要響應(yīng)的更改值的列表。我們不想對任何東西做出反應(yīng)——我們只想初始化動畫——因此我們有空數(shù)組。但是React會將其解釋為這意味著此效果不必與狀態(tài)保持最新。這包括animate函數(shù)，因為它最初是從效果中調(diào)用的。結(jié)果，如果我們嘗試在animate函數(shù)中獲取狀態(tài)的值，它將始終是初始值。如果我們想根據(jù)其先前值和經(jīng)過的時間來更改狀態(tài)，那么它可能無法工作。

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>;
}

狀態(tài)的setter函數(shù)也接受函數(shù)

即使useEffect鉤子將我們的狀態(tài)鎖定到其初始值，也有一種方法可以使用我們最新的狀態(tài)。useState鉤子的setter函數(shù)也可以接受一個函數(shù)。因此，與其像您大多數(shù)時候那樣基于當前狀態(tài)傳遞值：

setState(state   delta)

……您也可以傳遞一個接收先前值作為參數(shù)的函數(shù)。而且，是的，即使在我們這種情況下，這也會返回正確的值：

setState(prevState => prevState   delta)

將所有內(nèi)容整合在一起

這是一個簡單的示例，用于總結(jié)所有內(nèi)容。我們將把上述所有內(nèi)容放在一起，創(chuàng)建一個計數(shù)器，該計數(shù)器計數(shù)到100，然后從開頭重新開始。我們希望持久化和變異而不重新渲染整個組件的技術(shù)變量使用useRef存儲。我們通過將空數(shù)組作為其第二個參數(shù)來確保useEffect只運行一次。我們通過向useState的setter傳遞一個函數(shù)來變異狀態(tài)，以確保我們始終擁有正確狀態(tài)。

更新：使用自定義鉤子更進一步

一旦基礎(chǔ)知識清楚了，我們也可以使用鉤子進行元編程，通過將大部分邏輯提取到自定義鉤子中。這將有兩個好處：

1. 它極大地簡化了我們的組件，隱藏了與動畫相關(guān)但與我們的主要邏輯無關(guān)的技術(shù)變量。
2. 自定義鉤子是可重用的。如果您在另一個組件中需要動畫，您也可以在那里簡單地使用它。

自定義鉤子起初聽起來可能是一個高級主題，但最終我們只是將代碼的一部分從組件移動到函數(shù)，然后像任何其他函數(shù)一樣在組件中調(diào)用該函數(shù)。按照約定，自定義鉤子的名稱應(yīng)該以use關(guān)鍵字開頭，并且鉤子的規(guī)則適用，但除此之外，它們只是我們可以使用輸入進行自定義并且可能返回某些內(nèi)容的簡單函數(shù)。

在我們的例子中，為了為requestAnimationFrame創(chuàng)建一個通用的鉤子，我們可以傳遞一個回調(diào)函數(shù)，我們的自定義鉤子將在每個動畫周期調(diào)用該函數(shù)。這樣，我們的主要動畫邏輯將保留在我們的組件中，但組件本身將更加專注。

以上是使用React Hooks使用requestAnimationFrame的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！