2017-12-02 123 views
7

我发现,使用生命周期方法componentWillMount设置初始状态...是否有人更喜欢使用React组件的构造函数而不是componentWillMount的原因?

componentWillMount() { 
    this.state = { 
    comments: [] 
    }; 
} 

...比使用构造稍微简单一些。这是因为当你使用构造函数致电super()

constructor() { 
    super(); 
    this.state = { 
    comments: [] 
    }; 
} 

不仅如此,但如果你的组件传递props和/或state,那么你必须通过以及手动传递这些。

constructor(props, state) { 
    super(props, state); 
    ... 
} 

我没有使用componentWillMount任何问题,但我几乎从来没有看到使用它的人设立的状态(除非他们避免ES6和不上课)。我得到我们可以访问es6类中的构造函数,但是为什么在必须将手动传递连接到父构造函数时使用它,并且有一个完美的生命周期方法已准备好并等待,因此您不必这样做?

只是好奇,如果有实际的实际原因,或者如果它大多只是偏好。

+0

你也可以只使用类的属性,并避免在任何一个初始化状态 – linasmnew

+2

亲爱的亲密选民:这不是“基于意见”,除非答案字面意思是“基于意见”,因为我的实际问题是是否存在**实际**选择其中一个的理由。 – Chev

+0

@LinasMickevicius我不确定你的意思。心理扩展? – Chev

回答

7

构造函数是初始化(直接分配给)state唯一“正确”的地方。即this.state = {...}

您在组件中定义的其他功能(componentWillMount等)称为React引擎调用的“生命周期回调”。预计state应该在组件的整个生命周期中不可改变,并且绝不能直接分配给组件。相反,您必须this.setState({...})才能对构造函数外部的任何位置的state进行任何更改。

尽管您目前的做法可能尚未引起任何问题,但不保证以相同的方式继续工作。如果由于某种原因,React在生命周期回调之间读取state,并且您在componentWillMount回调中发生了变异,这可能会产生意想不到的后果。

我的建议是只在您的构造函数中直接初始化state,并在其他地方使用setState

如果冗长是一个问题,你有没有其他目的的构造不是初始化你state,你不需要props来初始化你state,只是声明和初始化您的国家财产:

class MyComponent extends React.Component { 
    state = {} 
} 
+0

好的,这是有道理的。我赞赏彻底的答案。 – Chev

+0

re:你的编辑 - >似乎在类属性初始值设定项里引用'this.props'确实有效。 'state = {showing:this.props.showing}'我刚刚测试过它。我很惊讶它虽然tbh。 – Chev

+0

有趣!我仍然远离这样做。我的猜测是'this.props'可用的原因是因为'super()'构造函数被首先调用并将其添加到实例中,并且在'state'初始化过程中它可用。现在,如果最终创建自己的构造函数,属性初始化的顺序可能会改变,并且'props'可能不再在构造函数之外被初始化。尽可能保持您的代码可预测。假设并访问另一个属性的构造函数属性初始化听起来有风险并容易出错:) –

2

那么根据DOCS

一般情况下,我们建议使用构造函数()代替。

它还提到:

这就是所谓的在服务器上呈现的唯一的生命周期挂钩。

所以我想这可能是原因的一部分。

相关问题