如果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. Cookie、Session和Cache

    一.Cookie Cookie是保存客户端的一组数据,主要用来保存用户的个人信息,主要存放浏览器请求服务器时的请求信息,这些信息是非敏感信息.主要用于当用户访问您的系统时,应用程序可以检索以前存储的信 ...

  2. RabbitMQ - Start Up

    开始之前 rabbitmq是一个被广泛使用的消息队列,它是由erlang编写的,根据AMQP协议设计实现的. AMQP的主要特征是面向消息.队列.路由(包括点对点和发布/订阅).可靠性.安全. Rab ...

  3. Python小白学习之路(十七)—【内置函数二】

    序列操作类函数 all() 功能:判断可迭代对象的每个元素是否都为True值注意:If the iterable is empty, return True.(举例3) 回顾:None     ''  ...

  4. php获取客户端ip地址方法

    /** * 获取客户端IP地址 * @param integer $type 返回类型 0 返回IP地址 1 返回IPV4地址数字 * @param boolean $adv 是否进行高级模式获取(有 ...

  5. Vue-Router路由Vue-CLI脚手架和模块化开发 之 使用props替代路由对象的方式获取参数

    在上一章博文中使用路由对象$route获取参数时,组件和路由对象耦合,在这篇博文中就可以使用props来进行解耦: 1.在组件中使用props选项定义数据,接收参数: 2.在路由中,使用props选项 ...

  6. win7安装docker报错:error during connect: Get http ..... the system cannot find the file specified

    因为是win7 所以使用了官方网站的dockertoolbox 安装一路顺利,结果启动就报上面的错误, 因为安装包附带安装了virtualbox 上面的错误后来排查出来是 virtualboox的问题 ...

  7. Jmeter环境搭建

    一.工具描述 Apache JMeter是 100 %的 java 桌面应用程序.它可以被用来测试包括基于静态和动态资源程序的性能,例如静态文件, Java Servlets , Java  对象,数 ...

  8. HUE配置文件hue.ini 的mapred_clusters模块详解(图文详解)(分HA集群和非HA集群)

    不多说,直接上干货! 我的集群机器情况是 bigdatamaster(192.168.80.10).bigdataslave1(192.168.80.11)和bigdataslave2(192.168 ...

  9. fail2ban的使用以及防暴力破解与邮件预警

    fail2ban可以监视你的系统日志,然后匹配日志的错误信息(正则式匹配)执行相应的屏蔽动作(一般情况下是防火墙),而且可以发送e-mail通知系统管理员! fail2ban运行机制:简单来说其功能就 ...

  10. YAOLEI

    http://www.cnblogs.com/skyblue/p/3356933.html