避免在componentDidUpdate上使用setState

Question

要求

我有一个链接列表。每个链接都有一个ID唯一的URL。每个链接都应该打开或更新窗口。任何时候都只能打开一个窗口，没有多个窗口

解决方案

import React from 'react';

let PopUp = React.createClass({
    propTypes: {
        id: React.PropTypes.string
    },

    getInitialState: function() {
        return {
            id: null,
            popUp: null
        };
    },

    componentDidUpdate: function() {
        let url = 'http://test.com/' + this.props.id;

        if(this.state.popUp) {
            this.state.popUp.close();
        }

        this.setState({
            popUp: window.open(url, '_blank'),
            id: this.props.id
        });
    },

    shouldComponentUpdate: function(nextProps, nextState) {
        //If no id
        if(!nextProps.id) {
            return false;
        }

        //If same id and open window
        if(nextProps.id === nextState.id && nextState.popUp && !nextState.popUp.closed) {
            return false;
        }

        return true;
    },

    render: function() {
        return null;
    }
});

export default PopUp;

这很有效。但问题是我必须在 componentDidUpdate 中使用 setState 。这将导致生命周期中的另一个循环。

这可以避免吗？有更好的解决方案吗？我应该使用全球variable还是context？

由于