react tab切换 第一次切换到某个页面时会请求数据，以后不会再请求数据

 

目录结构：

App.js:

import React, { Component } from 'react'
import { connect } from 'react-redux'
import Fruits from './Fruits/Fruits.js'
import Phone from './Phone/Phone.js'
import './App.css'

class App extends Component {
  render() {
    let { tabActiveIndex } = this.props
    return (
      

        自动切换  
        

          
水果
          
手机
        
        

          
        
    
        

          
        
                  
      
    );
  }
}

//生命周期
Object.assign(App.prototype, {
  componentDidMount() {
    this.props.TABS_CHANGAE_STATE(['tabActiveIndex'], 0)
    this.props.TABS_CHANGAE_STATE(['subTabActiveIndex'], 0)
  }
})

//事件
Object.assign(App.prototype, {
  handleClick(tabActiveIndex) {
    this.props.TABS_CHANGAE_STATE(['tabActiveIndex'], tabActiveIndex)
    this.props.TABS_CHANGAE_STATE(['subTabActiveIndex'], 0)
  },
  handleAuto() {
    this.props.TABS_CHANGAE_STATE(['tabActiveIndex'], Math.floor(Math.random() * 1.9))
    this.props.TABS_CHANGAE_STATE(['subTabActiveIndex'], Math.floor(Math.random() * 2.9))    
  }
})

const mapStateToProps = (state) => {
  return {
    tabActiveIndex: state.getIn(['tabs', 'tabActiveIndex']),
    subTabActiveIndex: state.getIn(['tabs', 'subTabActiveIndex'])
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    TABS_CHANGAE_STATE: (key, value) => {
      dispatch({ type: 'TABS_CHANGAE_STATE', key, value })
    }
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(App)

Fruits.js:

import React, { Component } from 'react'
import { connect } from 'react-redux'
import Apple from './Apple.js'
import Banana from './Banana.js'
import Grape from './Grape.js'


class Fruits extends Component {
  constructor(props) {
    super(props)
    this.state = {  
    }      
  }
  render() {
    let { subTabActiveIndex } = this.props
    return (
      

        

          
苹果
          
香蕉
          
葡萄
        
        

          
        
    
        

          
        
        

          
        
    
      
    );
  }
}

//事件
Object.assign(Fruits.prototype, {
  handleClick(subTabActiveIndex) {
    this.props.TABS_CHANGAE_STATE(['subTabActiveIndex'], subTabActiveIndex) 
  }
})

const mapStateToProps = (state) => {
  return {
    tabActiveIndex: state.getIn(['tabs', 'tabActiveIndex']),
    subTabActiveIndex: state.getIn(['tabs', 'subTabActiveIndex'])
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    TABS_CHANGAE_STATE: (key, value) => {
      dispatch({ type: 'TABS_CHANGAE_STATE', key, value })
    }
  };
}


export default connect(mapStateToProps, mapDispatchToProps)(Fruits)

Banana.js:

import React, { Component } from 'react'
import { connect } from 'react-redux'

class Banana extends Component {
  constructor(props) {
    super(props)
    this.state = {
      haveListData: false,
      content: ''
    }
  }
  render() {
    let { content } = this.state
    return (
      

        

          {content}
        
       
      
    );
  }
}

//生命周期
Object.assign(Banana.prototype, {
  componentWillReceiveProps(nextProps) {
    let { haveListData } = this.state
    if (nextProps.tabActiveIndex === 0 && nextProps.subTabActiveIndex === 1) {
      if (haveListData) {
        console.log('香蕉再次进来时不会请求接口')
      } else {
        console.log('香蕉第一次会请求接口')
        this.setState({
          content: 'Loading...'
        })
        setTimeout(() => {
          this.setState({
            content: '香蕉树',
            haveListData: true
          })
        }, 1000)
      }
    }
  }
})

const mapStateToProps = (state) => {
  return {
    tabActiveIndex: state.getIn(['tabs', 'tabActiveIndex']),
    subTabActiveIndex: state.getIn(['tabs', 'subTabActiveIndex'])
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    TABS_CHANGAE_STATE: (key, value) => {
      dispatch({ type: 'TABS_CHANGAE_STATE', key, value })
    }
  };
}


export default connect(mapStateToProps, mapDispatchToProps)(Banana)

 

其他代码可以到github上看

github地址：https://github.com/xutongbao/react-tabs