使用 React Hooks 实现时间延迟

Question

我想知道如何在 React 功能组件中实现时间延迟。 伪代码如下

const staring_function = () => {
  return(
    //renders components
  )
}
const main_function = () => {
  return(
    //renders components
  )
}

我想运行starting_function 3秒以在加载时在屏幕上呈现一些文本，然后main_function运行以替换starting_function的内容。 例如，页面显示文本“正在加载...”几秒钟，然后显示内容。

我已经为此工作了几天，但仍然无法解决。 我知道它与 useEffect 挂钩有关。 如果有人可以帮助我，那将会很有帮助。 谢谢

Answer 1

你不需要useEffect钩子。 试试下面的代码：

const [ loading, setLoading ] = useState(true)

setTimeout(() => {
  console.log('now')
  setLoading(false)
}, 3000)

if (loading) {
  return (
    <div>LOADING...</div>
  )
}

return (
  <div>content</div>
)