react组件更新swiper
如果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的更多相关文章
- 从性能角度看react组件拆分的重要性
React是一个UI层面的库,它采用虚拟DOM技术减少Javascript与真正DOM的交互,提升了前端性能:采用单向数据流机制,父组件通过props将数据传递给子组件,这样让数据流向一目了然.一旦组 ...
- React组件生命周期小结
React组件生命周期小结 下面所写的,只适合前端的React.(React也支持后端渲染,而且和前端有点小区别,不过我没用过.) 相关函数 简单地说,React Component通过其定义的几个函 ...
- React和Vue的组件更新比较
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px "Helvetica Neue"; color: #404040 } p. ...
- reactjs-swiper react轮播图组件基于swiper
react轮播图组件基于swiper demo地址:http://reactjs-ui.github.io/reactjs-swiper/simple.html 1. 下载安装 npm install ...
- 从 React 的组件更新谈 Immutable 的应用
在介绍 Immutable 如何在 React 中应用之前,先来谈谈 React 组件是如何更新的. React 是基于状态驱动的开发,可以将一个组件看成是一个有限状态机,组件要更新,必须更新状态. ...
- 【React 6/100】 React原理 | setState | JSX语法转换 | 组件更新机制
****关键字 | setState | JSX语法转换 | 组件更新机制 组件更新机制 setState() 的两个作用 修改state 更新组件 过程:父组件重新渲染时,也会重新渲染子组件,但只会 ...
- React报错之无法在未挂载的组件上执行React状态更新
正文从这开始~ 总览 为了解决"Warning: Can't perform a React state update on an unmounted component" ,可以 ...
- React 组件性能优化探索实践
转自:http://www.tuicool.com/articles/Ar6Zruq React本身就非常关注性能,其提供的虚拟DOM搭配上Diff算法,实现对DOM操作最小粒度的改变也是非常的高效. ...
- React 组件性能优化
React组件性能优化 前言 众所周知,浏览器的重绘和重排版(reflows & repaints)(DOM操作都会引起)才是导致网页性能问题的关键.而React虚拟DOM的目的就是为了减少浏 ...
随机推荐
- Spring常用知识点总结
1. Spring有哪些优点? 轻量级:Spring在大小和透明性方面绝对属于轻量级的,基础版本的Spring框架大约只有2MB. 控制反转(IOC):Spring使用控制反转技术实现了松耦合.依赖被 ...
- SQL一些问题
什么是索引: 一般说法:索引是与表关联的磁盘上结构,可以加快从表中检索行的速度.索引包含由表中的一列或多列生成的键.这些键存储在一个结构中,使 SQL Server 可以快速有效地查找与键值关联的行. ...
- POJ 1102
#include<iostream>// cheng da cai zi 11.14 using namespace std; int main() { int i; int j; int ...
- http2.0之头部压缩
什么是头部压缩?为什么要头部压缩? 我们知道,http请求和响应都是由[状态行.请求/响应头部.消息主题]三部分组成的. 一般而言,消息主体都会经过gzip压缩,或者本身传输的就是压缩过后的二进制文件 ...
- APACHE 禁止通过IP直接访问
若是开通了虚拟主机,则需要在httpd-vhosts.conf中修改配置如下:若没有开通虚拟主机,则可以直接在httpd.conf文件最后面,加入以下代码: NameVirtualHost XXX.X ...
- R语言之数据处理常用包
dplyr包是Hadley Wickham的新作,主要用于数据清洗和整理,该包专注dataframe数据格式,从而大幅提高了数据处理速度,并且提供了与其它数据库的接口:tidyr包的作者是Hadley ...
- springcloud-01-介绍
跟随springcloud的一套视频学习springcloud, 把学到的记录下来, 方便自己, 方便别人 IDE: idea 一个父工程, 其他均为module 父工程的依赖: <parent ...
- LinuxC中全局变量environ
Linux C中environ 变量是一个char** 类型,存储着系统的环境变量. 要想遍历环境变量可以用下面这个程序: #include <stdio.h> extern char * ...
- Servlet多文件上传
各位大侠可能会对263电子邮箱中的"上传附件"功能有印象,就是:在浏览 器中点击"浏览",弹出一个对话框,选中文件后,单击"确定",文件就被 ...
- Struts2 Web Project 实现中文、英语的切换
1.struts.xml文件部分配置: <package name="default" namespace="/login" extends=" ...