javascript - 为什么我们不在 render 方法中编写 axios.get(blabla) 呢？

Question

为什么我们不写

axios
  .get('https://rallycoding.herokuapp.com/api/music_albums')
  .then(response => this.setState({ albums: response.data }));

在render方法中，我们是否必须将其放入componentWillMount中？

如果我们把它放在 render 方法的开头会出现什么问题？

我把它放在render中并得到了相同的结果，但教程说它应该在componentWillMount中。

Answer 1

一般来说，两者之间的区别在于您想要发出此请求多少次。

如果您希望请求仅在组件第一次安装时发生，您将使用 ComponentWillMount (首选)

如果您希望在每次渲染时都发生该请求(不鼓励)，请使用 render 方法。

在您的情况下，将其放入 render 方法中实际上会导致无限递归，因为每个请求都会调用 setState 这将导致重新渲染，从而使请求这将调用 setState 这将导致重新渲染...

更不用说性能成本以及如此频繁的请求造成的网络拥塞。

class Example extends React.Component {
  constructor() {
    super()
    this.state = {
      counter: 0
    }
  }
  render() {
    // fake async action to act as a request
    setTimeout(() => {
      const { counter } = this.state;
      this.setState({
        counter: counter + 1
      })
    }, 500)
    return React.createElement('h3', null, this.state.counter)
  }
}

ReactDOM.render(
  React.createElement(Example),
  document.querySelector('#example')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<h2>Re-rendering forever</h2>
<div id="example"></div>