首先我们要尊重原著 这里给一个

import React from 'react';import SwipeableViews from 'react-swipeable-views';const styles = {  slide: {    padding: 15,    minHeight: 100,    color: '#fff',  },  slide1: {    background: '#FEA900',  },  slide2: {    background: '#B3DC4A',  },  slide3: {    background: '#6AC0FF',  },};const MyComponent = () => (  
        
     
            slide n°1    
     
    
     
            slide n°2    
     
    
     
            slide n°3    
     
  
    );export default MyComponent;

这官方给的一个最简单的实现组件,本来嘛,react对于使用者来说就是非常友好的,

那么现在问题就来了,如何实现所谓的页面切换呢?

其实很简单,就是将所有的页面都塞到SwipeableViews这个大标签里面,

但是这样的话就会带来另外一个问题,就是在渲染的时候会渲染所有的页面

举个栗子,看下面的代码

import React from 'react';import SwipeableViews from 'react-swipeable-views';const styles = {  slide: {    padding: 15,    minHeight: 100,    color: '#fff',  },  slide1: {    background: '#FEA900',  },  slide2: {    background: '#B3DC4A',  },  slide3: {    background: '#6AC0FF',  },};const MyComponent = () => (  
        
     
      
          
     
    
     
      
          
     
    
     
      
          
     
  
    );const PageOne = () => (  
    
         1  
    
);const PageTwo = () => (  
    
         2  
    
);const PageThree = () => (  
    
         3  
    
)export default MyComponent;

也许这样还是看不出来,那么接下来

import React from 'react';import SwipeableViews from 'react-swipeable-views';const styles = {  slide: {    padding: 15,    minHeight: 100,    color: '#fff',  },  slide1: {    background: '#FEA900',  },  slide2: {    background: '#B3DC4A',  },  slide3: {    background: '#6AC0FF',  },};const MyComponent = () => (  
        
     
      
          
     
    
     
      
          
     
    
     
      
          
     
  
    );class PageOne extends React.Component {      componentWillMount () {      // do some ajax request      console.log('ajax request by page one');   }   render (      
    
             1      
    
       )}class PageTwo extends React.Component {      componentWillMount () {      // do some ajax request      console.log('ajax request by page two');   }   render (      
    
             2      
    
       )}class PageThree extends React.Component {      componentWillMount () {      // do some ajax request      console.log('ajax request by page three');   }   render (      
    
             3      
    
       )}export default MyComponent;

ok,这样应该可以很明显就看出来了,当第一次加载这个主页面的时候就会分别执行子页面的三个ajax请求,但是这并不是我们想看到的,因此,我们就要用到其自带的onChangeIndex这个函数啦

接下来看看怎么用

import React from 'react';import SwipeableViews from 'react-swipeable-views';const styles = {  slide: {    padding: 15,    minHeight: 100,    color: '#fff',  },  slide1: {    background: '#FEA900',  },  slide2: {    background: '#B3DC4A',  },  slide3: {    background: '#6AC0FF',  },};const handleChange = (index) => {   console.log(index); //此值为切换后的页面索引值   // 可以根据不用的index来做出不同的ajax请求};const MyComponent = () => (  
        
     
      
          
     
    
     
      
          
     
    
     
      
          
     
  
    );class PageOne extends React.Component {      componentWillMount () {      // do some ajax request      console.log('ajax request by page one');   }   render (      
    
             1      
    
       )}class PageTwo extends React.Component {      componentWillMount () {      // do some ajax request      console.log('ajax request by page two');   }   render (      
    
             2      
    
       )}class PageThree extends React.Component {      componentWillMount () {      // do some ajax request      console.log('ajax request by page three');   }   render (      
    
             3      
    
       )}export default MyComponent;

其实原理还是很好理解的

说白了就是在页面切换的时候再请求,而不是在主页面渲染的时候就执行所有的请求,

可以减少很多不必要的资源消耗