生命周期:在 componentDidMount 之前调用 componentWillReceiveProps [英] lifecycle: componentWillReceiveProps called before componentDidMount

问题描述

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

If I understand correctly the React lifecycle of a Component should make sure that componentDidMount is called before componentWillReceiveProps. When I test this on the initial mount of a component it seems to work that way. But when the component is has already been mounted before and is remounted the order is the other way around. Is this the expected behavior? The following piece of code illustrates a potential bug that could be introduced this way:

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.
    }
}

推荐答案

简答:
确实无法保证触发这些方法的顺序.这就是为什么(如您的示例)在 props 和 state 之外使用组件变量不是一个好主意的原因之一.

The short answer:
The order of firing these methods is indeed not guaranteed. Which is one of the reasons why (as in your example) using component variables outside props and state is not a good idea.

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

Better: put your { foo: 'bar' } in state if you need to use it beyond lifecycle events.

更长的答案:

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

componentDidMount() is only called once for each lifecycle:

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

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

componentWillReceiveProps() is NOT called on first render in lifecycle, but is called on all following renders = when the parent sends props again.

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

Normally, the second render (triggering) componentWillReceiveProps will come after the component (and its children) have finished mounting, so after componentDidMount().

但我能想到至少 1 个(可能是理论上的)顺序会颠倒的场景:

But I can think of at least 1 (maybe theoretical) scenario where the order will reversed:

1. 组件接收 props，并开始渲染.
2. 当组件正在渲染时，但尚未完成渲染，组件接收新的 props.
3. componentWillReceiveProps() 已触发，(但 componentDidMount 尚未触发)
4. 在所有子组件和组件本身完成渲染后，componentDidMount() 将触发.

1. Component receives props, and starts rendering.
2. While component is rendering, but has not yet finished rendering, component receives new props.
3. componentWillReceiveProps() is fired, (but componentDidMount has not yet fired)
4. After all children and component itself have finished rendering, componentDidMount() will fire.

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

So componentDidMount() is not a good place to initialise component-variables like your { foo: 'bar' }.
componentWillMount() would be a better lifecycle event.
However, I would discourage any use of component-wide variables inside react components, and stick to design principles:

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

这篇关于生命周期:在 componentDidMount 之前调用 componentWillReceiveProps的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！