相关疑难解决方法(0)

我的父母渲染中有以下代码

<div>           
{
    this.state.OSMData.map(function(item, index) {
        return <Chart key={index} feature={item} ref="charts" />
    })
}
</div>

并在我的孩子图表下面的代码

<div className="all-charts">
    <ChartistGraph data={chartData} type="Line" options={options} />
</div>

我认为只有在加载所有子节点后才调用parentDidMount.但是这里父子的componentDidMount在child的componentDidMount之前被调用.

这是怎么回事？或者我做错了什么.

如果这是事情的工作方式,我如何检测从父项加载所有子组件的时间？

根据反应文件,useEffect在重新运行useEffect部分之前将触发清理逻辑.

如果你的效果返回一个函数,React将在清理时运行它...

没有用于处理更新的特殊代码,因为useEffect默认情况下处理它们.它会在应用下一个效果之前清除之前的效果......

然而,当我使用requestAnimationFrame和cancelAnimationFrame里面useEffect,我发现cancelAnimationFrame可能无法正常停止动画.有时,我发现旧动画仍然存在,而下一个效果会带来另一个动画,这会导致我的Web应用程序性能问题(特别是当我需要渲染繁重的DOM元素时).

我不知道反应钩子在执行清理代码之前是否会做一些额外的事情,这使得我的取消动画部分不能正常工作,会useEffect挂钩做像闭包这样的东西来锁定状态变量吗？

什么是使用效果的执行顺序及其内部清理逻辑？我在下面写的代码有什么问题,这使得cancelAnimationFrame不能完美地工作吗？

谢谢.

//import React, { useState, useEffect } from "react";

const {useState, useEffect} = React;

//import ReactDOM from "react-dom";

function App() {
  const [startSeconds, setStartSeconds] = useState(Math.random());
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setStartSeconds(Math.random());
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  useEffect(
    () => {
      let raf = null;

      const onFrame = …