Question

考虑下面的程序，当它以当前形式运行时，它永远不会在屏幕上显示“ here”，但是，如果注释掉了第四行，它将显示。据我了解，setState是异步的，但是我可以想象，当var最终设置为true时，while循环将结束。

需要明确的是，这是我对正在发生的事情的理解：创建组件后，立即调用componentDidMount，然后调用this.setState({var: true})。这是异步完成的，因此程序分为两个“路径”，第一个继续进入被卡住的while循环，第二个将var从false更改为true。一旦var从false更改为true，则第一条路径应退出while循环，而第二条路径应结束，因为异步调用已完成。但是，这不会发生，这让我感到困惑。

export default class Test extends Component {
    constructor(props){
        super(props)
        this.state = {var: false}; // consider removing this line
    }

    componentDidMount(){
        this.setState({var: true})
        while (this.state.var == false){}
    }

    render(){
        return(<View style={{padding: 30}}><Text>Here</Text></View>)
    }
}

感谢您的帮助

Answer 1

componentDidMount在初始render调用之后被调用，该调用在constructor被调用之后被调用。

研究此react lifecyle diagram。

在您的示例中，构造函数设置了初始状态（var: false），因此，当最终调用componentDidMount时，this.state.var == false的值为false == false => true，从而得出您无限循环。由于setState是一个异步函数，所以这个无限循环会阻止React实际设置新状态。当您注释掉第四行时，this.state.var实际上是undefined，因此undefined == false => false，没有循环。令人困惑，因为您将其100％撤消了。

反应原生，初始化变量导致无限循环，这是为什么

1 个答案: