React-05生命周期

生命周期

初始化阶段

componentWillMount：渲染之前最后一次修改状态的机会 //旧 render：只能访问this.props和this.state，不允许修改状态和DOM输出 componentDidMount：成功渲染完成真实DOM之后出发，可以修改DOM //DOM创建完成，可进行数据请求等操作

//DOM创建完成
  componentDidMount() {
    // 数据请求
    // 订阅函数调用
    // 多少钱
    // 基于创建完的DOM 进行初始化
    console.log('did');
  }

运行中阶段

shouldComponentUpdate：返回false会阻止render调用 render：只能访问this.props和this.state，不允许修改状态和DOM输出 componentDidUpdate：可以修改DOM

销毁阶段

ComponentWillUnmount：在删除组件之前进行清理操作，如计时器和事件监听

轮播组件练习

使用新版本swiper库，结合视频中一些老的用法，做了个轮播组件练习

import React, { Component } from 'react'
import Swiper from 'swiper'
import 'swiper/css'
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

Swiper.use([Navigation, Pagination])

export default class MySwiper extends Component {

  state = {
    list: []
  }

  componentDidMount() {
    // DidMount适合做异步请求
    // 模拟
    setTimeout(() => {
      this.setState({
        list: ['111', '222', '333']
      })
    }, 2000);

    
  }

  componentDidUpdate() {
    //更新完毕
    new Swiper('.swiper', {
      //分页器
      pagination:{
        el: '.swiper-pagination'
      }
    })
  }

  render() {
    return (
      <div className="swiper">
        <div className="swiper-wrapper" style={{height:'200px'}}>
          {
            this.state.list.map(item => 
              <div className='swiper-slide' key={item}>{item}</div>
              )
          }
        </div>
        <div className='swiper-pagination'></div>
      </div>
    )
  }
}