react-swipeable-views 使页面切换更加流畅

首先我们要尊重原着 这里给一个源码地址
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 = （） => （
  <SwipeableViews>
    <div style={Object.assign（{}, styles.slide, styles.slide1）}>
      slide n°1
    </div>
    <div style={Object.assign（{}, styles.slide, styles.slide2）}>
      slide n°2
    </div>
    <div style={Object.assign（{}, styles.slide, styles.slide3）}>
      slide n°3
    </div>
  </SwipeableViews>
）；
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 = （） => （
  <SwipeableViews>
    <div style={Object.assign（{}, styles.slide, styles.slide1）}>
      <PageOne/>
    </div>
    <div style={Object.assign（{}, styles.slide, styles.slide2）}>

      <PageTwo/>

<li id="ul_c_ph_insurance_v"><a id="c_ph_insurance_v" href="www.changtu.com/chepiao/baodingshi-wuxishi.html">保定到无锡的汽车</a></li>

    </div>
    <div style={Object.assign（{}, styles.slide, styles.slide3）}>
      <PageThree/>
    </div>
  </SwipeableViews>
）；