加载所有元素后reactjs运行代码答案

【问题标题】：reactjs run code after all elements are loaded加载所有元素后reactjs运行代码
【发布时间】：2020-07-05 15:40:52
【问题描述】：

我正在迈出反应的第一步。我正在运行 Reactjs v16.11.0

我有触发网络摄像头的页面（在this mdn tutorial 之后）。所以我想在绘制所有元素时调用startup 函数。我试过window.addEventListener('load', startup, false);，但它没有调用任何函数。

所以我尝试了useEffectHook：

useEffect  (() => {
    startup();
  }, []);

但它调用启动函数太快了，并且由于运行异步代码，DOM 中还没有一些元素 - video。

我的启动功能是这样的

const startup= () => {
   video = document.getElementById('video');
   let canvas: HTMLCanvasElement = document.getElementById('canvas') as HTMLCanvasElement;
   const photo = document.getElementById('photo') as HTMLElement;

navigator.mediaDevices.getUserMedia({video: true, audio: false})
  .then(function(stream) {
    mediaStream = stream.getTracks()[0];
    video.srcObject = stream;
    video.play();
  })
  .catch(function(err) {
    console.log("An error occurred: " + err);
  });

if(video) {
  video.addEventListener('canplay', function (ev: any) {
    if (!streaming) {
      height = video.videoHeight / (video.videoWidth / width);
      // Firefox currently has a bug where the height can't be read from
      // the video, so we will make assumptions if this happens.
      if (isNaN(height)) {
        height = width / (4 / 3);
      }

      video.setAttribute('width', width);
      video.setAttribute('height', height);
      canvas.setAttribute('width', width.toString());
      canvas.setAttribute('height', height.toString());
      streaming = true;
    }
  }, false);

  //clearphoto(canvas, photo);
}

}

我正在使用功能组件（而不是类组件）。据我了解，componentDidMount 适用于类组件。我说的对吗？

如何做到只有每个元素都在DOM中才运行启动功能？

编辑：useEffect 钩子中的代码编辑，Jayraj 注意到了

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

我刚刚完成了教程。这对我来说也很有趣。首先，您可以播放我的演示：https://codesandbox.io/s/hungry-bassi-ojccj?file=/src/App.js。为了实现这个目标，我使用了三个钩子：useRef、useEffect、useState。让我解释一下我为什么使用它们。

所以，我想从useState 钩子开始。在流式传输之前，我们应该计算图像和画布的高度并进行设置。但是，我们必须将高度保存到某个地方才能在我们的组件中获取它的值。这就是我使用useState 钩子的原因。

为了成功绘制canvas，我使用了useRef 钩子。它允许我访问 DOM，这就是为什么我从代码中删除了调用 getElementById 作为钩子负责的原因。我对视频做了同样的事情。我创建了 videoRef 来访问 DOM。

还有我两次调用useEffect 钩子的主要部分。如您所见，第一个 useEffect 没有任何依赖关系，这就是它会被调用一次的原因。在这种情况下，它的工作方式类似于 componentDidMount 方法。值得庆幸的是，getUserMedia 方法被调用，我们可以将流设置为videoRef，然后视频将开始播放。第二个useEffect 等待videoRef 属性的变化，然后开始执行。

我想你应该更深入地阅读 react hook 才能很好地理解。让我附上文档的链接。 https://reactjs.org/docs/hooks-reference.html

祝你有美好的一天。

【讨论】：