requestAnimationFrame 不会重复更新反应组件

Question

只是想知道为什么我的requestAnimationFrame没有重复更新我的反应组件？它只在第一次返回计数值，然后忽略它。这是代码：

// ----- animation.js
import React from "react";

let count = 0;
export default function Update() {
  return <>{UpdateComponents()}</>;
}

function UpdateComponents() {
  count++;

  window.requestAnimationFrame(UpdateComponents);

  return <p>count: {count}</p>;
}

// ------ index.js
// ReactDOM.render(<Update />, document.getElementById("root"));

Answer 1

requestAnimationFrame 如您所愿，如果您在递增 count 的位置后添加 console.log(count)，您将看到值发生变化。

它没有出现在您的 DOM 中的原因是没有组件跟踪 count 的值，所以没有人知道它应该是 re-rendered。您需要将更新挂钩到状态或道具更改中，以使组件显示 'live' 计数。

Answer 2

它不会重新渲染，因为它不会触发 reactdom 在其他情况下，它会反复重新渲染使用这段代码

import React,{useState} from "react";


export default function Update() {
Let [count, setCount]=useState(0)
function UpdateComponents() {

  var newcount=count + 1;
setCount(newCount)
  window.requestAnimationFrame(UpdateComponents);
UpdateComponents()
 
}
  return <><p>count: {count}</p></>
}

这应该可以完美运行

Answer 3

export default function Update() {
  return <>{UpdateComponents()}</>;
}

<Update /> 呈现第一个 UpdateComponents() returned，但 window.requestAnimationFrame 调用的另一个 UpdateComponents() 的 return 没有t 被任何组件使用，因此 requestAnimationFrame 正在工作，但不会影响 dom.

的内容

requestAnimationFrame 不会重复更新反应组件

requestAnimationFrame doesn't update repeatedly a react component

javascript

requestanimationframe

reactjs