如果swiper渲染出来的数据不是写死的,那么就会涉及到swiper的更新,

那么我们在new 出 swiper 实例的时候,就需要把这个实例添加到组件里面去,在更新的或卸载的时候就可以直接使用 swiper的api了

  componentDidMount(){
this.swiper = new Swiper('.swiper-container', {
// loop: true,
centeredSlides: true,              //居中展示                        
    spaceBetween:2,           //间距2
    slidesPerView:'auto',            //显示多少个
autoHeight: true,
pagination : {
el: '.swiper-pagination',
bulletElement : 'div',
bulletClass : 'my-bullet',
bulletActiveClass: 'my-bullet-active',
}
});
} componentDidUpdate(){
this.swiper.update();
} componentWillUnmount(){
if(this.swiper){
this.swiper.destroy();
}
}

  

react组件更新swiper的更多相关文章

  1. 从性能角度看react组件拆分的重要性

    React是一个UI层面的库,它采用虚拟DOM技术减少Javascript与真正DOM的交互,提升了前端性能:采用单向数据流机制,父组件通过props将数据传递给子组件,这样让数据流向一目了然.一旦组 ...

  2. React组件生命周期小结

    React组件生命周期小结 下面所写的,只适合前端的React.(React也支持后端渲染,而且和前端有点小区别,不过我没用过.) 相关函数 简单地说,React Component通过其定义的几个函 ...

  3. React和Vue的组件更新比较

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px "Helvetica Neue"; color: #404040 } p. ...

  4. reactjs-swiper react轮播图组件基于swiper

    react轮播图组件基于swiper demo地址:http://reactjs-ui.github.io/reactjs-swiper/simple.html 1. 下载安装 npm install ...

  5. 从 React 的组件更新谈 Immutable 的应用

    在介绍 Immutable 如何在 React 中应用之前,先来谈谈 React 组件是如何更新的. React 是基于状态驱动的开发,可以将一个组件看成是一个有限状态机,组件要更新,必须更新状态. ...

  6. 【React 6/100】 React原理 | setState | JSX语法转换 | 组件更新机制

    ****关键字 | setState | JSX语法转换 | 组件更新机制 组件更新机制 setState() 的两个作用 修改state 更新组件 过程:父组件重新渲染时,也会重新渲染子组件,但只会 ...

  7. React报错之无法在未挂载的组件上执行React状态更新

    正文从这开始~ 总览 为了解决"Warning: Can't perform a React state update on an unmounted component" ,可以 ...

  8. React 组件性能优化探索实践

    转自:http://www.tuicool.com/articles/Ar6Zruq React本身就非常关注性能,其提供的虚拟DOM搭配上Diff算法,实现对DOM操作最小粒度的改变也是非常的高效. ...

  9. React 组件性能优化

    React组件性能优化 前言 众所周知,浏览器的重绘和重排版(reflows & repaints)(DOM操作都会引起)才是导致网页性能问题的关键.而React虚拟DOM的目的就是为了减少浏 ...

随机推荐

  1. php unset变量

    <?php $a="abc"; $b="def"; unset($a,$b); echo $a."\n"; echo $b." ...

  2. 堆排序(最大堆)的理解和实现(Java)

    堆的定义 堆是具有下列性质的完全二叉树:每个节点的值都大于或等于其左右孩子节点的值,称为大顶堆:或者每个节点的值都小于或等于其左右孩子的值,称为小顶堆.如下图举例: 通过堆的定义可知,根节点一定是对中 ...

  3. vue微信分享链接添加动态参数

    微信分享时 分享链接携带参数可能不是固定的 需要在分享的前一刻才知道 这里就是动态设置分享链接的基本写法 代码不是那么详尽 但大致流程如下 1.安装引用jssdk npm install --save ...

  4. IOC容器02

    获取xml文件路径,使用IO读取xml文件,使用Document对象解析xml文件,将xml中的bean的信息注册到BeanDefinition类,将BeanDefinition保存到一个map中:该 ...

  5. 【Java】java运行jar时,报 java.lang.UnsupportedClassVersionError

    问题现象: java运行jar时,报 java.lang.UnsupportedClassVersionError java  -jar  main.jar -h 192.168.221.171  - ...

  6. 马哥Python 开发9期

    LVS工作模式: 传输层 会话保持:负载均衡(1) session sticky:同一用户调度固定服务器Source IP:LVS sh算法(对某一特定服务而言)Cookie(2) session r ...

  7. JVM-垃圾收集算法、垃圾收集器、内存分配和收集策略

    对象已死么? 判断一个对象是否存活一般有两种方式: 1.引用计数算法:每个对象都有一个引用计数属性,新增一个引用时计数加1,引用释放时计数减1.计数为0时可以回收. 2.可达性分析算法(Reachab ...

  8. Nodejs学习笔记(十三)—PM2

    简介 PM2 pm2是一个内置负载均衡的node.js应用进程管理器(也支持Windows),其它的类似功能也有不少,但是感觉pm2功能更强,更值的推荐 GitHub地址:https://github ...

  9. 【LeetCode题解】142_环形链表2(Linked-List-Cycle-II)

    目录 描述 解法一:哈希表 思路 Java 实现 Python 实现 复杂度分析 解法二:双指针 思路 Java 实现 Python 实现 复杂度分析 描述 给定一个链表,返回链表开始入环的第一个节点 ...

  10. DES对 json 、http参数加密解密算法

    网上众多大神们的众多方式实现加解密操作及保障数据安全性.今天无意中发现一篇以 DES加密解密算法.摘抄如下 工具类: import java.security.SecureRandom; import ...