在 componentDidMount() 之后停止渲染组件答案

【问题标题】：Stop rendering of a component after componentDidMount()在 componentDidMount() 之后停止渲染组件
【发布时间】：2016-12-28 15:10:40
【问题描述】：

我有一个包含三个组件的搜索页面。浏览主题组件列出了可供选择的主题。浏览文章组件根据主题 ID 列出所有文章，如果没有主题 ID，则加载所有文章。 home组件持有browsetopics和browsearticles组件，根据被点击的主题改变其状态。

class BrowseTopics extends React.Component {
  constructor(props) {
    super(props);
    this.topicSelect = this.topicSelect.bind(this);
    this.state = {error: "", topics: []};
  }
  componentDidMount(){
    // API call which updates state topics with the list of topics
  }
  topicSelect(id,e) {
    e.preventDefault();
    this.props.topicChange(id);
  }
 render () {
    // Rendering list of topics from API and nothing if request has not been sent
  }
}

class BrowseArticles extends React.Component {
  constructor(props) {
    super(props);
    this.state = {error: "", articles: [], url: "/api/articles"};
  }
  componentDidMount() {
    if(this.props.topicId){
    var url = '/api/topic/'+this.props.topicId+'/articles';
    this.setState({url: url});
    }
    // Make a request to url and get articles
  }
  render () {
    // Renders the list of articles
  }
}

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.handleUpdate = this.handleUpdate.bind(this);
    this.state = {topicId: ""};
  }

  handleUpdate(topicId) {
    this.setState({topicId: topicId});
  }

  render () {

    return(
<div>
<BrowseTopics user={this.props.user} topicChange={this.handleUpdate}/>
          <BrowseArticles user={this.props.user} topicId={this.state.topicId}/>
</div>
      );
  }
}

我需要的是，我希望 browseTopics 组件在父状态更改时停止重新渲染。我尝试使用 shouldComponentUpdate() （返回 false），但它甚至停止了 componentDidMount() 部分并且列表没有填充。

一旦向 API 发出请求并呈现组件，我希望停止对 browseTopics 的所有进一步重新呈现，以使排序正常运行。

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

来自docs：

如果 shouldComponentUpdate() 返回 false，则不会调用 componentWillUpdate()、render() 和 componentDidUpdate()

我可能想设置某种标志，告诉我的 BrowseTopics 组件 API 请求已经发出，我不再需要/希望更新组件：

class BrowseTopics extends React.Component {
  constructor(props) {
    super(props);
    this.topicSelect = this.topicSelect.bind(this);
    this.state = {
      error: "",
      topics: [],
      hasFetched: false // flag for API
    };
  }
  componentDidMount(){
    // API call which updates state topics with the list of topics
    fetch( 'myapi.json' )
      .then( res => {
        // set flag denoting API results have been fetcehd
        this.setState({
          hasFetched: true,
          topics: <your topics>
        });
      })
  }

  shouldComponentUpdate(nextProps, nextState) {
    if ( this.state.hasFetched ) {
      return false;
    }
    return true;
  }
  ...

【讨论】：