setState in ReactJS

Question

我对ReactJS并不熟悉，我似乎无法理解为什么以下setState的结果不是我所期望的那样(即每秒钟将值增加1)。

import React from 'react';
import ReactDOM from 'react-dom';

class Layout extends React.Component {

    constructor() {
        super();
        this.state = {
            name: "Behnam",
            i: 0
        }
    }

    render() {

        setInterval(() => {
            this.setState({ name : "Behnam" + this.state.i });
            this.setState({ i: this.state.i + 1 });
        }, 1000);

        return (
            <div className="container">
                {this.state.name}
            </div>
        );
    }
}

ReactDOM.render(<Layout />, document.getElementById('app'));

相反，输出字符串迅速增加(我想react的速度是试图保持它的虚拟DOM更新)。所以我想知道什么是正确的方法？

Answer 1

每次更改状态时，都会重新修改组件。因为您在render方法中启动了setInterval，所以您得到了另一个间隔，它改变了状态和重发器，等等。

当组件挂载时，将setInterval移动到只调用一次的componentDidMount：

import React from 'react';
import ReactDOM from 'react-dom';

class Layout extends React.Component {

    constructor() {
        super();
        this.state = {
            name: "Behnam",
            i: 0
        }
    }

    componentDidMount() { set the interval after the component mounted, and save the reference
        this.interval = setInterval(() => {
            this.setState({ 
                name: `Behnam${this.state.i}`, 
                i: this.state.i + 1
            });
        }, 1000);
    }

    componentWillUnmount() {
        this.interval && clearInterval(this.interval); // clear the interval when the component unmounts
    } 

    render() {
        return (
            <div className="container">
                {this.state.name}
            </div>
        );
    }
}

ReactDOM.render(<Layout />, document.getElementById('app'));

Answer 2

当前，每次呈现组件时，它都会创建一个间隔，因此会有多个定时器递增该值。您可能希望在componentDidMount()中而不是在render()中这样做。见文档。

import React from 'react';
import ReactDOM from 'react-dom';

class Layout extends React.Component {

    constructor() {
        super();
        this.state = {
            name: "Behnam",
            i: 0
        }
    }

    componentDidMount() {
        setInterval(() => {
            this.setState({ name : "Behnam" + this.state.i });
            this.setState({ i: this.state.i + 1 });
        }, 1000);
    }

    render() {
        return (
            <div className="container">
                {this.state.name}
            </div>
        );
    }
}

ReactDOM.render(<Layout />, document.getElementById('app'));

Answer 3

每次触发呈现时，您都会再次调用setInterval，从而增加页面上活动间隔的数量。

您也许应该使用另一个生命周期方法，例如componentDidMount。您应该记住保存setInterval返回的间隔ID，以便在componentWillUnmount中调用clearInterval。