用一个swiper例子来写一下生命周期

思维：

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 }/>
</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