生命周期:componentWillReceiveProps在componentDidMount之前调用

Question

如果我理解正确,组件的React生命周期应该确保componentDidMount之前调用componentWillReceiveProps.当我在组件的初始安装上测试它时,它似乎以这种方式工作.但是当组件之前已经安装并重新安装时,顺序就是另一种方式.这是预期的行为吗？以下代码说明了可能以这种方式引入的潜在错误:

class Example extends React.Component {
    componentDidMount() { 
        this.something = { foo: 'bar' };
    }
    componentWillReceiveProps(nextProps) {
        this.something.foo;
        // Throws a TypeError if this code is reached before
        // componentDidMount is called.
    }
}

Answer 1

简短的回答:
解雇这些方法的顺序确实无法保证.这就是为什么(如你的例子中)使用props和state之外的组件变量的原因之一并不是一个好主意.

更好:{ foo: 'bar' }如果您需要在生命周期事件之外使用它,请将其置于状态.

答案越长:

componentDidMount() 每个生命周期只调用一次:

• 在第一次渲染之后(注意:在所有孩子都渲染之后,并且所有孩子也都称他们为componentDidMounts)
• 如果组件在卸载后呈现(但这确实是一个新的生命周期)

componentWillReceiveProps() 在生命周期中不会在第一次渲染时调用,但在父级再次发送道具时会在所有后续渲染时调用.

通常,第二个渲染(触发)componentWillReceiveProps将在组件(及其子组件)完成安装之后到来,因此之后componentDidMount().

但我可以想到至少有1个(可能是理论上的)情况,订单会逆转:

1. 组件接收道具,并开始渲染.
2. 虽然组件正在渲染,但尚未完成渲染,但组件会收到新的道具.
3. componentWillReceiveProps()被解雇了,(但componentDidMount尚未解雇)
4. 在所有子项和组件本身完成渲染后,componentDidMount()将触发.

所以componentDidMount()不是像你这样初始化组件变量的好地方{ foo: 'bar' }.
componentWillMount()将是一个更好的生命周期事件.
但是,我不鼓励在反应组件中使用组件范围的变量,并坚持设计原则:

• 所有组件变量都应该存在于state或props中(并且是不可变的)
• 所有其他变量都受生命周期方法的约束(而不是超出该范围)