swiper案例研究react生命周期

1. 引入swiper

   $ yarn add swiper

2. 在对应的组件中引入

3. 引入css样式

4. 引入html结构

5. 实例化

案例代码：

import React, { Component,Fragment } from 'react';

import Swiper from 'swiper'

import 'swiper/dist/css/swiper.css'

import './index.css'


const SwiperItem = ( props ) => {
  return (
    <div className = "swiper-slide">
      <img src = { props.item.img } alt=""/>
    </div>
  )
}


class SwiperComponent extends Component {

  constructor () {
    super()

    this.state = {
      banners: []
    }
  }

  render () {
    return (
      <Fragment>
        <div className = "swiper-container">
          <div className = "swiper-wrapper">
             {
               this.state.banners.map( ( item,index ) => {
                return <SwiperItem item = {item} key = { item.id }></SwiperItem>
               })
             }
          </div>
          <div className = "swiper-pagination"></div>
          <div className = "swiper-button-prev"></div>
          <div className = "swiper-button-next"></div>
          {/* <div className = "swiper-scrollbar"></div> */}
      </div>
      </Fragment>
    )
  }

  componentDidMount () {

    fetch('/data.json')
      .then ( res => res.json() )
      .then ( data => {
        this.setState({
          banners: data
        })

        setTimeout ( () => {
          this.swiper = new Swiper ('.swiper-container', {
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
            },

            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },

            // // 如果需要滚动条
            // scrollbar: {
            //   el: '.swiper-scrollbar',
            // },
          })
        },0)

      })
      .catch ( error => {
        if (error) throw error
      })
  }


  shouldComponentUpdate () {
    if ( this.swiper ) {
      return false
    }else {
      return true 
    }
  }

  componentDidUpdate () {

    // 第一种方案    只要有数据变化， 那么这个钩子函数就要执行， 那么this.swiper就会重复实例化

    /*
    this.swiper = new Swiper ('.swiper-container', {
      loop: true, // 循环模式选项

      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },

      // 如果需要滚动条
      scrollbar: {
        el: '.swiper-scrollbar',
      },
    })
    */
  }
}

export default SwiperComponent