Question

我在这里有一个示例，其中有一个简单的状态称为counter。在componentDidMount中，在console.log期间，我得到的是0而不是3；在卸载过程中，我得到的是单击按钮获得的计数器数字，而不是0。我对它的真正作用感到困惑？这是代码：

import React, { Component } from 'react'

class TestNumber extends Component {
    constructor(props) {
        super(props)
        this.state = {counter: 0}
    }

    componentDidMount() {
        console.log('Mount Called')
        this.setState({counter:3})
        console.log(this.state.counter)
      }
      
    componentWillUnmount() {
        this.setState({counter:0})
        console.log('Unmount Called')       
        console.log(this.state.counter)
      }

    handleClick = () => {
        this.setState({counter: this.state.counter + 1})
    }
    render() {
        return (
            <div>
                <h2>{this.state.counter}</h2>
                <button onClick={this.handleClick}>
                    Click me
                </button>
            </div>
        )
    }
}

export default TestNumber

Answer 1

除了提出的答案。

这里的问题不是生命周期方法，而是state。有时在React状态下可以是异步的。

反应文档：https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

辅助文章：https://medium.com/@wereHamster/beware-react-setstate-is-asynchronous-ce87ef1a9cf3

通常，我们应该假定react state是异步的，不应立即依赖它。以下代码将打印正确的console.log。

this.setState({count: 3}, () => {
    console.log(this.state.counter)
});

底线

反应状态可以是异步的

Answer 2

这与这两种生命周期方法的工作方式无关，而与setState在React中异步有关，这意味着在调用setState之后不会立即修改sate值。这就是为什么您从console.log获取旧值的原因。

Why is setState in reactjs Async instead of Sync?

以下示例将为您提供正确的结果。

    componentDidMount() {
        this.setState({counter:3}, () => {
            console.log(this.state.counter);
        });
        
        console.log(this.state.counter)
    }
      
    componentWillUnmount() {
        this.setState({counter:0}, () => {
            console.log(this.state.counter);
        });

        console.log('Unmount Called');      
    }

componentDidMount和componentWillUnmount如何工作？

2 个答案: