Question

我的react应用程序中有两个组件。其中一个是用于初始加载的，它将显示一些加载动画，我希望此动画能够渲染大约三秒钟，而另一个组件只是我要在第一个动画之后渲染的计数器。我该如何使用useEffect（）和setTimeOut（）？（或任何其他方法）

function App() {
  return(
     <>
       <Loading />
       <Counter />
     </>
  )
}

Answer 1

您在这里：

这只是显示useEffect和setTimeout的代码段，在您的情况下，您可以使用实数部分而不是下面的字符串。

只需运行摘要，希望它可以清除您的想法：

const { useState , useEffect } = React;

const App = () => {

  const [loading,setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setLoading(false);
    },3000);
  },[]);

  return (
    <div>
      { loading ? "Loading Component (will be gone in 3 secs)...." : "Counter Component"}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('react-root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react-root"></div>

Answer 2

如果您使用setInterval()，则可以使用以下方法

const App = () => {
  const [loading, setLoading] = React.useState(true);
  React.useEffect(() => {
    const interval = setInterval(() => {
      setLoading(false);
    }, 3000);
    return () => clearInterval(interval);
  }, []);
  return (
    <div className="App">{loading ? <h1>Loading</h1> : <h2>Counter</h2>}</div>
  );
}
ReactDOM.render(<App />, document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

Answer 3

您可以设置一个布尔值的状态prop，让您有条件地渲染计数器。例如

this.state = {
    isCounterVisible: false
}

然后，您应该定义一个函数，以所需的延迟开始超时，例如

makeCounterVisible() {
    setTimeout(() => {
        this.setState({isCounterVisible: true})
   }, 3000)
}

然后，您从useEffect挂钩调用此方法，并记住将空数组作为第二个参数传递，这样它只能运行一次

useEffect(() => {
  this.makeCounterVisible();
}, []);

最后，像这样添加渲染条件

  return(this.state.isCounterVisible ? <Counter /> : <Loading />)

Answer 4

您可以创建一个组件状态，该状态将首先渲染Loading组件3秒钟，然后渲染Counter组件。像这样

const Demo = () => {
  const [showLoader, setLoader] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setLoader(false);
    }, 3000);
  }, []);

  if (showLoader) {
    return <Loading />;
  }

  return <Counter />;
};

此处为现场演示：https://codesandbox.io/s/react-example-fo3ju?file=/index.js:179-416

使用useEffect（）和setTimeOut（）进行条件渲染

4 个答案: