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的目的就是为了减少浏 ...
随机推荐
- python3 内置函数详解
内置函数详解 abs(x) 返回数字的绝对值,参数可以是整数或浮点数,如果参数是复数,则返回其大小. # 如果参数是复数,则返回其大小. >>> abs(-25) 25 >&g ...
- express中间件原理 && 实现
一.什么是express中间件? 什么是express中间件呢? 我们肯定都听说过这个词,并且,如果你用过express,那么你就一定用过express中间件,如下: var express = re ...
- python中range、xrange和randrange的区别
range 函数说明:range([start,] stop[, step]),根据start与stop指定的范围以及step设定的步长,生成一个列表. xrange 函数说明:和range 的用法完 ...
- linux 系统清除日志 .sh
clear.sh #!/bin/sh cat /dev/null > /var/log/syslogcat /dev/null > /var/adm/sylogcat /dev/null ...
- 在windows里安装系统7、8、10或Offcie或Visio等推荐的激活工具
不多说,直接上干货! (1)激活Windows或者Office前,你务必先进去KMSAuto Net的System界面,安装KMS-host Service; (2)然后回到Main主界面,选择Act ...
- JavaScript -- 运算符、eval、Parse
----- 003-运算符.html ----- <!DOCTYPE html> <html> <head> <meta http-equiv="C ...
- webpack局部安装的问题
webpack的局部安装 npm install webpack 默认状态是当前目录下安装,-g是全局安装 ---------------------------------------------- ...
- filebeat output redis 报错 i/o timeout
filebeat output redis 报错 i/o timeout 先把报错内容贴出来. ERROR redis/client. go: Failed to RPUSH to redis li ...
- Linux时间命令
Linux一般有系统时间和硬件时间之分,date命令是显示和操作系统时间:hwclock用来操作硬件时间(日期).日期和时间很重要,比如错误的日期和时间会导致你不能编译程序. 1 date 用法: ...
- vue router的浏览器跳转行为
最近做的项目中,涉及vue router 路由操作,其操作方法不同,产生的行为亦不同.本文通过对比实验,对其行为进行实验对比及总结,避免混淆. vue router的单页跳转的history模式,类似 ...