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

问题描述

主组件:

<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 index 2，看到控制台登录componentWillMount，然后我们切换到另一个tab，如果再次回到Tab index 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 和 componentWillUpdate). 您可以阅读有关已弃用的生命周期方法的更多信息这里.

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

您的示例生命周期中的次要按预期工作.componentWillMount 只触发一次，因为您的组件将只被 initial rendering/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 生命周期到 Content 组件，它会在组件接收到新的 props 以及初始挂载时触发.

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屋！