我可以在React中调用componentWillMount中的API吗？ [英] Can I call APIs in componentWillMount in React?

问题描述

我正在努力做最后一年的反应。我们遵循的约定是在 componentDidMount 中进行API调用，在数据到来之后获取数据和setState。这将确保组件已安装，设置状态将导致重新呈现组件，但我想知道为什么我们不能在 componentWillMount 或<$ c $中设置setState c>构造函数

I'm working on react for last 1 year. The convention which we follow is make an API call in componentDidMount, fetch the data and setState after the data has come. This will ensure that the component has mounted and setting state will cause a re-render the component but I want to know why we can't setState in componentWillMount or constructor

官方文档说：

在安装发生之前立即调用componentWillMount（）。在render（）之前调用
，因此在这个方法中设置状态将
不会触发重新渲染。避免在此方法中引入任何副作用或
订阅。

componentWillMount() is invoked immediately before mounting occurs. It is called before render(), therefore setting state in this method will not trigger a re-rendering. Avoid introducing any side-effects or subscriptions in this method.

它表示设置状态为此方法不会触发重新呈现，这是我在进行API调用时不需要的。如果我能够在 componentWillMount 或构造函数中获取数据并且能够设置状态（假设API调用非常快）并且数据出现在第一个渲染中，为什么我要重新渲染？

it says setting state in this method will not trigger a re-rendering, which I don't want while making an API call. If I'm able to get the data and able to set in the state (assuming API calls are really fast) in componentWillMount or in constructor and data is present in the first render, why would I want a re-render at all?

如果API调用很慢，那么 setState 将是异步并且 componentWillMount 已经返回然后我将能够setState并且应该进行重新渲染。

and if the API call is slow, then setState will be async and componentWillMount has already returned then I'll be able to setState and a re-render should occur.

作为一个整体，我很困惑为什么我们不应该在构造函数或componentWillMount中进行API调用。在这种情况下，有人能真正帮助我理解反应是如何起作用的吗？

As a whole, I'm pretty much confused why we shouldn't make API calls in constructor or componentWillMount. Can somebody really help me understand how react works in such case?

推荐答案

1。 componentWillMount 并重新渲染

1. componentWillMount and re-rendering

比较这两个 componentWillMount 方法。

一个导致额外的重新渲染，一个不导致

Compare this two componentWillMount methods.
One causes additional re-render, one does not

componentWillMount () {
  // This will not cause additional re-render
  this.setState({ name: 'Andrej '});
}

componentWillMount () {
  fetch('http://whatever/profile').then(() => {
    // This in the other hand will cause additional rerender,
    // since fetch is async and state is set after request completes.
    this.setState({ name: 'Andrej '});
  })
}

。

。

。

2。在哪里调用API调用？

componentWillMount () {
  // Is triggered on server and on client as well.
  // Server won't wait for completion though, nor will be able to trigger re-render
  // for client.
  fetch('...')
}

componentDidMount () {
  // Is triggered on client, but never on server.
  // This is a good place to invoke API calls.
  fetch('...')
} 

如果你正在渲染在服务器上，你的组件确实需要渲染数据，你应该在组件之外获取（并等待完成）并通过props传递数据，然后将组件渲染到字符串。

If you are rendering on server and your component does need data for rendering, you should fetch (and wait for completion) outside of component and pass data thru props and render component to string afterwards.

这篇关于我可以在React中调用componentWillMount中的API吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！