生命周期：componentDillMount之前调用componentWillReceiveProps

Question

如果我正确理解Component的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' }如果您需要在html" target="_blank">生命周期事件之外使用它，请保持状态。

更长的答案 ：

componentDidMount() 每个生命周期仅调用一次：

• 在第一个渲染之后（注意：在所有子项也都渲染之后，并且在所有子项也都调用了componentDidMounts之后）
• 如果组件在卸载后呈现（但这确实是一个新的生命周期）

componentWillReceiveProps() 在生命周期的第一个渲染中不调用，而是在随后的所有渲染=中调用，当父级再次发送道具时。

通常，第二次渲染（触发）componentWillReceiveProps将在组件（及其子代）完成安装之后进行，因此在之后componentDidMount()。

但我可以想到至少有1种（可能是理论上的）情况会发生逆转：

1. 组件接收道具，然后开始渲染。
2. 组件正在渲染时， 但尚未完成渲染 ，组件将接收新的道具。
3. componentWillReceiveProps()被解雇，（但componentDidMount尚未解雇）
4. 所有子项和组件本身完成渲染后，componentDidMount()将触发。

因此componentDidMount()，不是初始化像your这样的组件变量的好地方{ foo: 'bar' }。
componentWillMount()会是一个更好的生命周期事件。
但是，我不鼓励在React组件中使用任何组件范围的变量，并坚持设计原则：

• 所有组件变量都应处于状态或道具状态（并且是不可变的）
• 所有其他变量均受生命周期方法约束（且不超过此范围）