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

IT技术 reactjs
2021-04-24 10:35:20

如果我理解正确，组件的 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.
    }
}
1个回答

简短的回答：
确实不能保证触发这些方法的顺序。这就是为什么（如您的示例）在 props 和 state 之外使用组件变量不是一个好主意的原因之一。

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

更长的答案：

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

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

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

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

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

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

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

  • 所有组件变量都应该存在于 state 或 props 中（并且是不可变的）
  • 所有其他变量都受生命周期方法的约束（并且不能超出生命周期方法）
其它你可能感兴趣的问题
上一篇使用 TypeScript 对 React 高阶组件进行类型注释 下一篇挤压下的 TEVO 狼蛛