javascript - 在react中使用setTimeout进行轮询

Question

为什么这段代码，它只 console.log 'do stuff' 两次？

class Something extends React.Component {
    componentDidMount() {
        this.doStuff();
    }

    doStuff() {
        console.log('do stuff')
        setTimeout(this.doStuff, 3000);
    }

    render() {
        return null
    }
}

Answer 1

第一次超时后，this将是window对象，而你没有 doStuff window上的方法对象，因此不会再次运行。

你可以例如使 doStuff函数转换为箭头函数，该函数将具有 this相反，封闭的词汇上下文的值。

class Something extends React.Component {
    componentDidMount() {
        this.doStuff();
    }

    doStuff = () => {
        console.log('do stuff');
        setTimeout(this.doStuff, 1000);
    }

    render() {
        return null;
    }
}

ReactDOM.render(<Something />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>