Javascript 在何处使API命中ComonentDidMount或在ComonentDidUpdate[React.JS]中_Javascript_Reactjs_Ecmascript 6

Javascript 在何处使API命中ComonentDidMount或在ComonentDidUpdate[React.JS]中

javascript reactjs ecmascript-6

Javascript 在何处使API命中ComonentDidMount或在ComonentDidUpdate[React.JS]中,javascript,reactjs,ecmascript-6,Javascript,Reactjs,Ecmascript 6,在一次采访中，一位采访者问我，在一个简单的react应用程序中，应该在哪里进行API点击？表示类组件中的生命周期方法。我知道答案是ComponentDidMount——因为它是我们获得完整呈现dom的第一个生命周期方法，这意味着dom现在已经准备好了！然后他问，为什么不在这里呢现在，我告诉他我在什么地方读到的东西，我不知道这个问题的确切答案——除了ComponentDidMount先运行，所以就在那里吧现在，有人能告诉我我的答案是否正确吗？或者我们应该在ComponentDidUpdate

在一次采访中，一位采访者问我，在一个简单的react应用程序中，应该在哪里进行API点击？表示类组件中的生命周期方法。我知道答案是ComponentDidMount——因为它是我们获得完整呈现dom的第一个生命周期方法，这意味着dom现在已经准备好了！然后他问，为什么不在这里呢

现在，我告诉他我在什么地方读到的东西，我不知道这个问题的确切答案——除了ComponentDidMount先运行，所以就在那里吧

现在，有人能告诉我我的答案是否正确吗？或者我们应该在ComponentDidUpdate中点击API

我很困惑。好心的，有人用推理来解释吗？提前谢谢

这取决于何时调用API：

如果API调用只执行一次，则执行componentDidMount 如果在基于某个状态进行渲染之后，您希望再次获取数据，然后在componentDidUpdate中执行此操作编辑：使用useEffect钩子可以在功能组件中处理相同的场景，如下所示：

1-仅在组件渲染与componentDidMount相同时第一次运行：

2-每次组件通过道具更改或通过与componentDidUpdate相同的本地状态更改渲染时运行，而不比较以前的道具和当前道具：

useEffect(() => {

   // Run every time the component re-renders including the first time

});  // Do NOT pass array dependencies

3-仅在特定道具更改时运行，与componentDidUpdate相同，但具有道具比较：

useEffect(() => {

   // Run only when the component prop1 and prop2 changes

}, [prop1, prop2]);  // Pass props as array dependencies

参考：

这取决于何时调用API：

1-仅在组件渲染与componentDidMount相同时第一次运行：

2-每次组件通过道具更改或通过与componentDidUpdate相同的本地状态更改渲染时运行，而不比较以前的道具和当前道具：

useEffect(() => {

   // Run every time the component re-renders including the first time

});  // Do NOT pass array dependencies

3-仅在特定道具更改时运行，与componentDidUpdate相同，但具有道具比较：

useEffect(() => {

   // Run only when the component prop1 and prop2 changes

}, [prop1, prop2]);  // Pass props as array dependencies

参考资料：

让我们以一个场景为例

您有一个配置文件页面，它有一个文本框，允许您更新标记

您可以在componentDidMount中获取整个概要文件，以获取所有详细信息并显示内容

然后componentDidUpdate必须用于标记更新之类的东西，假设您根据用户输入的每3个字母的用户类型进行一次提取以获取标记。然后使用componenDidUpdate检查状态并执行调用

如果您在功能组件中考虑到相同的问题，我们将不得不使用useEffect

useEffect(()=>{},[]);

请参阅dependecies数组，如果传递一个空数组，它的行为将类似于componentDidMount

以及组件的更新

useEffect(()=>{},[tagText]);

在这里，仅当对tagText进行更改时，效果才会运行，但componenDidUpdate会有所不同，因为您必须比较以前的状态并确定文本是否已更新。

让我们以一个示例场景为例

您有一个配置文件页面，它有一个文本框，允许您更新标记

您可以在componentDidMount中获取整个概要文件，以获取所有详细信息并显示内容

如果您在功能组件中考虑到相同的问题，我们将不得不使用useEffect

useEffect(()=>{},[]);

请参阅dependecies数组，如果传递一个空数组，它的行为将类似于componentDidMount

以及组件的更新

useEffect(()=>{},[tagText]);

此处，仅当对tagText进行更改时，效果才会运行，但ComponendUpdate会有所不同，因为您必须比较以前的状态并确定文本是否已更新。

根据官方文件：

组件安装

componentDidMount在将组件装入树后立即调用。需要DOM节点的初始化应该在这里进行。如果需要从远程端点加载数据，这是实例化网络请求的好地方

此方法是设置任何订阅的好地方。如果你这样做别忘了在componentWillUnmount中取消订阅

组件更新

useEffect(()=>{},[tagText]);

componentDidUpdate在更新发生后立即调用。初始渲染时不调用此方法

当组件运行时，可以利用此机会对DOM进行操作已更新。这也是处理网络请求的好地方只要将当前道具与以前的道具进行比较，例如a 如果道具未更改，则可能不需要网络请求

看看这张照片，可以看到一幅完整的大图。这在学习r时会很方便

反应。