ComponentWillMount仅是第一次触发? [英] ComponentWillMount only trigger for first time?

问题描述

MainComponent:

MainComponent:

<Tabs 
  initialPage={this.props.day}
  tabBarUnderlineStyle={{ backgroundColor: '#5AF158' }} 
  renderTabBar={() => <ScrollableTab />}>
  {this.renderTabHeader()}
</Tabs>

renderTabHeader() {
  return (
    this.props.dateArray.map((date, i) => 
      <Tab 
        key={i}
        heading={date.format('DD/MM')} 
        tabStyle={styles.tabStyling} 
        activeTabStyle={styles.activeTabStyle} 
        textStyle={styles.tabTextStyle} 
        activeTextStyle={styles.activeTabTextStyle} 
      >
        <View style={{ backgroundColor: '#EEEEEE', flex: 1 }}>
          <Content contentDate={date.format('YYYY-MM-DD')} />
        </View>
      </Tab>
    )
  );
}

内容组件:

class Content extends Component {
  componentWillMount() {
    console.log('Component Will Mount() ?');
    this.props.loadTransactionByDate({ date: this.props.contentDate });
  }

render() {
  return (
    <View><Text>{this.props.contentDate}</Text></View>
  );
  }

基本上，在MainComponent中有一组选项卡.我注意到，有些Content会在第一次单击或激活其选项卡时挂载起来，这很奇怪.

Basically, in MainComponent there is a collection of tabs. I've noticed something rather weird which Content will be mounted on the first time their tab being click or active?

这是第一次，我们可以单击Tab索引2并在componentWillMount中看到控制台日志，然后我们切换到另一个选项卡，如果再次回到Tab索引2，将不再触发componentWillMount ?

Meaning for the first time, we can click on Tab index 2 and seeing the console log in componentWillMount, then we switch to another tab and if coming back to Tab index 2 again, componentWillMount will not be triggered anymore?

推荐答案

首先，我想指出您不应该使用componentWillMount生命周期方法，因为它在React 16.3的最后一个次要更新中已被弃用

First I would like to point out you should not use componentWillMount life cycle method since it has been deprecated on last minor update of React 16.3

此处不推荐使用的生命周期方法列表， (componentWillMount, componentWillReceiveProps, and componentWillUpdate).您可以阅读有关不建议使用的生命周期方法的更多信息这里.

Heres list of deprecated life cycle methods, (componentWillMount, componentWillReceiveProps, and componentWillUpdate). You can read more about deprecated life cycle methods here.

示例生命周期中的中学工作正常. componentWillMount仅触发一次，因为您的组件将仅initial rendered/mounted一次，这就是React的工作方式.

Secondary in your example life cycle works as expected. componentWillMount triggers only once since your component will be initial rendered/mounted only one time and that's how React works.

我可以通过以下方法解决此问题.

I would work this out with following method.

向内容组件添加 getDerivedStateFromProps 生命周期将在组件接收到新道具时以及在初始安装时触发.

Add getDerivedStateFromProps life cycle to Content component, which will trigger when component receives new props and as well on initial mount.

static getDerivedStateFromProps(nextProps, prevState) {
  console.log('will log on props change');
  if( nextProps.contentDate !== prevState.contentDate ) {
    return { contentDate: nextProps.contentDate };
    // Notice we return plain object here to update state
  }
  return null;
  // return null when changes are not needed
}

此示例检查contentDate是否已更改，如果已更改，则将其推入组件状态.在渲染方法上，您可以通过this.state.contentDate来获取它.

This example checks that contentDate has changed and if so pushes it into component -state. And on render method you get it by this.state.contentDate.

render() {
  return (
    <View><Text>{this.state.contentDate}</Text></View>
  );
}

您可以通过在componentDidUpdate中实施此操作来实现类似的行为，但是您面临更大的风险，最终会遇到无限循环和更差的性能.但是，可以通过强有力的检查来确保您期望的数据确实按照您的期望进行了更改.然后，您可以进行setState并重新渲染组件.

You could achieve similar behaviour with implementing this in componentDidUpdate but then you have much bigger risk to end up with infinite loops and much worse performance. But it's possible just have strong checks that data you have expected has really changed as you would expect. Then you can do setState and component re-renders.

这篇关于ComponentWillMount仅是第一次触发?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！