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.slide2)}>
      slide n°2
    </div>
    <div style={Object.assign({},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,styles.slide1)}>
      <PageOne/>
    </div>
    <div style={Object.assign({},styles.slide2)}>
      <PageTwo/>
    </div>
    <div style={Object.assign({},styles.slide3)}>
      <PageThree/>
    </div>
  </SwipeableViews>
);


const PageOne = () => (
  <div>
    1
  </div>
);

const PageTwo = () => (
  <div>
    2
  </div>
);

const PageThree = () => (
  <div>
    3
  </div>
)

export default MyComponent;

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

import React from 'react';
import SwipeableViews from 'react-swipeable-views';

const styles = {
  slide: {
    padding: 15,styles.slide3)}>
      <PageThree/>
    </div>
  </SwipeableViews>
);


class PageOne extends React.Component {
   
   componentWillMount () {
      // do some ajax request
      console.log('ajax request by page one');
   }

   render (
      <div>
        1
      </div>    
   )
}

class PageTwo extends React.Component {
   
   componentWillMount () {
      // do some ajax request
      console.log('ajax request by page two');
   }

   render (
      <div>
        2
      </div>    
   )
}

class PageThree extends React.Component {
   
   componentWillMount () {
      // do some ajax request
      console.log('ajax request by page three');
   }

   render (
      <div>
        3
      </div>    
   )
}

export default MyComponent;

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

接下来看看怎么用

import React from 'react';
import SwipeableViews from 'react-swipeable-views';

const styles = {
  slide: {
    padding: 15,};

const handleChange = (index) => {
   console.log(index); //此值为切换后的页面索引值
   // 可以根据不用的index来做出不同的ajax请求
};

const MyComponent = () => (
  <SwipeableViews>
    <div style={Object.assign({},styles.slide3)}>
      <PageThree/>
    </div>
  </SwipeableViews>
);


class PageOne extends React.Component {
   
   componentWillMount () {
      // do some ajax request
      console.log('ajax request by page one');
   }

   render (
      <div>
        1
      </div>    
   )
}

class PageTwo extends React.Component {
   
   componentWillMount () {
      // do some ajax request
      console.log('ajax request by page two');
   }

   render (
      <div>
        2
      </div>    
   )
}

class PageThree extends React.Component {
   
   componentWillMount () {
      // do some ajax request
      console.log('ajax request by page three');
   }

   render (
      <div>
        3
      </div>    
   )
}

export default MyComponent;

其实原理还是很好理解的

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

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

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

猜你在找的React相关文章