Reactjs 处理运行不同事物的多用途效果的加载

我开始使用

Hook

，在处理多个

useffect

当前代码：

//1st useEffect should run only on DidMount
React.useEffect(()=>{
  //Calling API only on didMount
},[])

//2st useEffect should run on Context value Changes
React.useEffect(()=>{
  //Processing Context Foo and Context Bar on didMount and didUpdate
},[foo, bar])

我的预期结果是在

didMount

上运行2

useffect

时添加一个加载

我可以像这样使用

类组件

来实现它

  componentDidMount(){
    this.setState({isLoading:true},()=>{
      //Call API
      
      //Processing Context Foo and Context Bar

      //on CallAPI and Processing Context is done
      this.setState({isLoading:false})

    })
  }

---

如何使用

Hooks

？

这可以通过使用

useState

hook定义多个is加载状态来实现。我们可以 或者

或

在此之后，您可以更新与

useffect

有关

useffect

和

useState

的更多详细信息，请参见

---

你可以用钩子做同样的事情。

你能详细说明你的用例吗。2个useEffects在做什么？在secound useState中，您可以调用api和achive显示加载程序，而无需使用第一个useEffects。注意：只需为foo、bar值添加适当的条件。

const [isLoading, setIsLoading] = useState({ first: true, second: false });

const [isLoadingFirst, setIsLoadingFirst] = useState(true);
const [isLoadingSecond, setIsLoadingSecond] = useState(true);

  const [isLoading, setIsLoading] = useState(true);

  React.useEffect(() => {
   setIsLoading(true);
    //Call API

    //on CallAPI and Processing Context is done
   setIsLoading(false);
  }, []);