如果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. 在android应用程序中启动其他apk程序

    Android 开发有时需要在一个应用中启动另一个应用,比如Launcher加载所有的已安装的程序的列表,当点击图标时可以启动另一个应用. 一般我们知道了另一个应用的包名和MainActivity的名 ...

  2. JSON.stringify和JSON.parse的使用

    JSON.stringify 函数 (JavaScript)将 JavaScript 值转换为 JavaScript 对象表示法 (Json) 字符串.JSON.stringify(value [, ...

  3. 直接访问实例变量 VS 通过点语法访问实例变量

    直接访问实例变量,不会经过 OC 的方法派发机制,速度比较块.会直接访问对象的实例变量对应的内存. 直接访问实例变量,不会调用"设置方法".绕过了相关属性对应的"内存管理 ...

  4. mysql优化器在统计全表扫描的代价时的方法

    innodb 的聚集索引 的叶子结点 存放的 是 索引值以及数据页的偏移量 那么在计算全表扫描的代价是怎么计算的呢? 我们知道代价 为 cpu代价+io代价 cpu代价 就是 每5条记录比对 计算一个 ...

  5. 【8】JMicro微服务-JMicro ZKUI

    ZKUI是一个开源项目,是一个查看,修改ZK数据非常方便的工具.JMicro基于ZK做服务治理,配置管理,因此使用ZKUI会提供非常大的方便. Github地址:https://github.com/ ...

  6. System.Thread.TImer控件——http://www.360doc.com/content/11/0812/11/1039473_139824496.shtml

    http://www.360doc.com/content/11/0812/11/1039473_139824496.shtml

  7. 有关Hadoop的六大误解

    迄今为止,Hadoop和大数据实际上是同义词.然而随着大数据的炒作不断升温,出现了很多对Hadoop如何应用于大数据的误解. Hadoop是一种用于存储和分析大型数据集开源软件框架,可处理分布在多个现 ...

  8. Win下Eclipse提交Hadoop程序出错:org.apache.hadoop.security.AccessControlException: Permission denied: user=D

    描述:在Windows下使用Eclipse进行Hadoop的程序编写,然后Run on hadoop 后,出现如下错误: 11/10/28 16:05:53 INFO mapred.JobClient ...

  9. Ubuntukylin-14.04-desktop(带分区)安装步骤详解

    不多说,直接上干货! 成功! Ubuntukylin-14.04-desktop( 不带分区)安装步骤详解 Ubuntukylin-14.04-desktop( 不带分区)安装步骤详解 Ubuntu1 ...

  10. java学习-zxing生成二维码矩阵的简单例子

    这个例子需要使用google的开源项目zxing的核心jar包 core-3.2.0.jar 可以百度搜索下载jar文件,也可使用maven添加依赖 <dependency> <gr ...