时间戳

首页 > 解决方案 > 如何为反应组件添加优先级？

javascript - 如何为反应组件添加优先级？

问题描述

我希望我的 Home 组件先加载，然后再加载其他所有内容？我怎样才能做到这一点？

或者我可以在显示微调器时在后台加载资源，然后显示整个页面？像这样的东西。。

useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
    }, 2500);
  }, []);

  return isLoading ? (
    <Spinner />
  ) : (
    <div className="App">WholePage</div>

标签： javascriptreactjsfunctional-programmingcomponents

解决方案

What I would do is use the useEffect hook for the priority component that you want to load first and set a state in there to load the remaining components.

My code would look something like this:

    function App(){
    
   const [homeLoaded,setHomeLoaded] = useState(false)

  const getHomeLoaded = (homeLoaded) => {

     setHomeLoaded(homeLoaded)
  } 

   return(
     <>
       <Home gethomeLoaded = {getHomeLoaded}/>

     {homeLoaded ? <OtherComponents>:null}
     </>
   )
}

The home component would look something like this:

function Home(){

useEffect(() => {
    props.getHomeLoaded(true)
  }, []);

  return(
  <div>Your home content goes here</div>
)
}

What I am essentially doing is passing a state to the parent component from Home so that I can set homeLoaded to true only after Home component is loaded

推荐阅读