Question

如果我们必须从远程服务器获取评论，我们什么时候执行该操作？

import React, { Component } from 'react';
export class CommentBox extends Component {
  // ...

  _fetchComments() {
    //  it updates the component's state
  }

  // Voluntarily obfuscated
  componentXXX() {
    setInterval(() => this._fetchComments(), 5000);
  }

  render() {
    // ...
  }
}

如果您发现上面的实施中有任何问题，请提出建议，我将予以实施。谢谢。

Answer 1

通常，只有在我们想影响初始DOM树时，我们才应该在componentDidMount()生命周期中执行副作用（即异步任务或可以说网络请求），或者可以说我们强制执行希望通过从远程服务器获取数据来在数据可用时（尽快）更新DOM。

componentDidMount（）在安装组件（插入树中）后立即被调用。需要DOM节点的初始化应在此处进行。如果您需要从远程端点加载数据，那么这是实例化网络请求的好地方。

代码（如果数据应该在初始安装时生效，因为它将使用setState重新呈现）-

import React, { Component } from "react";
export class CommentBox extends Component {
    // ...

    _fetchComments() {
        // some AJAX request
        let data = null;
        // using promise to resolve the data
        ApiCall().then(responseJson => data = responseJson).catch(err => console.log(err))

        this.setState({data});
    }


    componentDidMount() {
        setInterval(() => this._fetchComments(), 5000);
    }

    render() {
        // ...
    }
}

否则，如果您想触发任何事件（例如，任何按钮的onClick或输入onChange，并且要将数据设置为状态，请使用setState确保重新渲染恰好改变了DOM树

我们何时应该从远程服务器获取数据？

1 个答案: