如何在React.js中添加延迟？

Question

我是 React.js 新手。我不知道如何添加

delay

来在 React.js 中渲染。添加延迟的最佳方法是什么。

我在渲染中添加以下代码，但它不起作用。

setTimeout(function() {
   
}, 1000);

Answer 1

纯打字稿解决方案

您可以使用

async

创建延迟功能：

function timeout(delay: number) {
    return new Promise( res => setTimeout(res, delay) );
}

然后调用函数：

await timeout(1000); //for 1 sec delay

Answer 2

不确定你为什么要这样做，但类似这样的事情？

组件的构造函数：

constructor(props) {
    super(props);
    this.state = {
        render: false //Set render state to false
    }
}

在元件安装上：

componentDidMount() {
  setTimeout(function() { //Start the timer
      this.setState({render: true}) //After 1 second, set render to true
  }.bind(this), 1000)
}

渲染方法：

render() {
    let renderContainer = false //By default don't render anything
    if(this.state.render) { //If this.state.render == true, which is set to true by the timer.
        renderContainer = <div>Look at me! I'm content!</div> //Add dom elements
    }
    return (
      renderContainer //Render the dom elements, or, when this.state == false, nothing.
    )
  }

因此，当计时器触发时，渲染设置为 true。由于渲染存储在

state

中，因此这也会触发组件的重新渲染。

if

语句只是指示

renderContainer

不要显示任何内容，除非状态渲染为 true。您还可以显示指示组件正在加载的文本，而不是在顶部声明

renderContainer= false

，而是将默认值声明为

renderContainer=<div>Component is loading..</div>

。

Answer 3

使用 React hooks。它将等待

5s

，然后渲染该组件。

import React from 'react'

const DeleayComponent = () => {
  const [show, setShow] = React.useState(false)

  React.useEffect(() => {
    const timeout = setTimeout(() => {
      setShow(true)
    }, 5000)

    return () => clearTimeout(timeout)

  }, [show])

  if (!show) return null

  return <>OK, Render</>
}

export default DeleayComponent

Answer 4

在一段时间后显示组件的最简单方法是条件渲染，如下所示：

constructor(props) {
    super(props);
    this.state = {
        render: false 
    }
}

handleRender = () => {
  setTimeout(() => {
     this.setState({ render : !this.state.render })
  }, 1000);
}

render () {
   return (
          <div>
             <button onClick={handleRender}>Set render to true</button>
             { this.state.render ? <Component /> : null }
          </div>
   )
}

当您在一秒钟后单击该按钮时，它将把渲染状态设置为 true 并且会显示

<Component />

。

如果您想在组件加载时运行 setTimeout 并且不单击按钮，您可以将其放在

componentDidMount

生命周期中，如下所示：

componentDidMount(){
  setTimeout(() => {
     this.setState({ render : !this.state.render })
  }, 1000);
}

希望您充分理解如何实现这种渲染组件的方式。

Answer 5

这是一个简单的功能组件，说明了

import React, { useState, useEffect } from 'react';

function TimeoutTest() {
  const [showContent, setShowContent] = useState(false);

  useEffect(() => {
    const delay = setTimeout(() => {
      setShowContent(true);
    }, 2000);

    return () => clearTimeout(delay);
  }, []);

  return (
    <div>
      {showContent && (
        <div>
          {/* Your content goes here */}
        </div>
      )}
    </div>
  );
}

export default TimeoutTest;

Answer 6

将 hook 与 setTimeout 结合使用的一种方法是在时间间隔后设置一个属性。

import { useState, useEffect } from "react";

const BotResponse = () => {

......

const [botMessage, setBotMessage] = useState('');

// function called from some user interaction
const botResponse = (msg) => {
   setTimeout(function() {
      setBotMessage(msg);
   }, 500);
};

useEffect(() => {
    console.log("bot msg... " + botMessage);

    // display the bot message

}, [botMessage]); // listening to a change on this property
}