生命周期：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() 每个生命周期只调用一次：

第一次渲染后（注意：毕竟 children 也渲染了，毕竟 children 也调用了他们的 componentDidMounts）
如果组件在卸载后渲染（但这确实是一个新的生命周期）

componentWillReceiveProps() 不会在生命周期中的第一次渲染时调用，但会在 parent 再次发送道具时在所有后续渲染中调用。

通常情况下，第二次渲染（触发）componentWillReceiveProps 将在组件（及其 children）完成安装后进行，因此在 componentDidMount().

之后

但我至少可以想到 1 个（可能是理论上的）顺序会颠倒的场景：

组件接收道具，开始渲染。
组件正在渲染，但还没有完成渲染，组件收到新的道具。
componentWillReceiveProps() 被解雇，（但 componentDidMount 尚未解雇）
在所有 children 和组件本身完成渲染后，componentDidMount() 将触发。

所以 componentDidMount() 不是像你的 { foo: 'bar' }.
那样初始化 component-variables 的好地方 componentWillMount() 会是一个更好的生命周期事件。
但是，我不鼓励在 React 组件中使用任何 component-wide 变量，并坚持设计原则：

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

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

lifecycle: componentWillReceiveProps called before componentDidMount

reactjs