在上一篇文章中，我已给出了图片轮播1.0的源码，这次，我打算用以前学过的react来实现这个代码。能实现一种功能的代码不能算作一个好的代码，我认为，在能实现一种功能的基础上还有非常好的维护性，以及扩展性才能进入好的代码的行列。但是，奈何本人才初涉前端，react也才开始学，只是学了一些皮毛，所有今天只是谈谈怎样用react实现图片的功能而已，在维护性与复用性上就没多大的考虑，毕竟这种事也是需要我多多练习的嘛。代码实现的功能与上篇文章所介绍的图片轮播功能一样。这里还是给出展示效果与功能吧。
展示效果如下：
功能：
点击开始就开始播放图片，点击+0.5s或者-0.5s可调节播放速度。点击左右箭头切换上一张或者下一张图片，鼠标移至图片位置暂停播放，移出则继续播放。下面原点有颜色处代表当前第几张图片，鼠标移至任意圆点都可使图片切换到对应的图片。
为什么要用react来写：
在react中有一切皆组件的概念，这就使得代码的复用性大大的加强了，而且，每个组件都有自己的状态state，与父组件传进来的数据props，这就使得代码中存在变量污染问题就大大减小了。每个组件通过改变自己的state来自动重新渲染页面，减少了我们的代码量。其JSX的特点也使得代码写起来感觉比写HTML好得多。当然，以上也只是我个人的感觉，如有问题还请多多包含。
写代码中也到的问题：
首先，是设计问题，怎样来设计react的组件关系，哪些是父组件，哪些是该父组件的子组件。然后是state和props，组件中哪些数据应该是自己的state，哪些应该是从父组件中传进来的数据props。
引进图片的问题，在HTML中写一个img标签是这样：
而在react中JSX中却不行，要这样：
这相当于将图片的src的路径取了一个别名为image3，在img标签中这样使用便行了：
然后第二个，就是改变样式的问题，在图片轮播这个项目中我需要改变的是下面的圆点的颜色，我使用的方法是这样：先定义一个style变量：
在使用该变量：比如在span标签中：<span style={style}>●</span>
最后便是理解问题了，比如this指针傻傻分不清，以至于自己写的代码中，为什么这个地方要使用this，为什么要bing（this），以及为什么这里要用箭头函数，我都是不一定说得出来。如果有哪位能为我解读一二我是非常高兴的。
源码：
PlayImgApp：
import React,{Component} from 'react'
import PlayImgBut from './PlayImgbut'
import PlayImage from './PlayImage'
import PlayPoints from './PlayImgPoints'
import StartBut from './startBut'
class PlayImgApp extends Component{
constructor(){
super();
this.state = {
nowImgNumber:0,
isStart:false,
playTime:2000,
}
}
componentDidMount(){
this.change = setInterval(()=>this.changeNum(),this.state.playTime);
}
handleStart(){
if(this.state.isStart){
this.change = setInterval(()=>this.changeNum(),this.state.playTime);
}else{
clearInterval(this.change);
}
this.setState({
isStart:!this.state.isStart,
})
}
changeNum(){
if(this.state.nowImgNumber == 5){
this.setState({
nowImgNumber:0,
})
}else{
this.setState({
nowImgNumber:this.state.nowImgNumber+1,
})
}
}
handleSubmit = (flag)=>{
clearInterval(this.change);
if(flag == 1) {
if (this.state.nowImgNumber == 5) {
this.setState({
nowImgNumber: 0,
isStart:false,
})
} else {
this.setState({
nowImgNumber: this.state.nowImgNumber + 1,
isStart:false,
})
}
}else{
if (this.state.nowImgNumber == 0) {
this.setState({
nowImgNumber: 5,
isStart:false,
})
} else {
this.setState({
nowImgNumber: this.state.nowImgNumber - 1,
isStart:false,
})
}
}
this.change = setInterval(()=>this.changeNum(),this.state.playTime);
}
handlePoint = (idNum)=>{
clearInterval(this.change);
this.setState({
nowImgNumber:idNum,
isStart:false,
})
}
handlePointStart = ()=>{
this.change = setInterval(()=>this.changeNum(),this.state.playTime);
}
componentWillUnmount(){
clearInterval(this.change);
}
reviseTime = (time)=>{
clearInterval(this.change);
this.setState({
playTime:this.state.playTime+time,
})
this.change = setInterval(()=>this.changeNum(),this.state.playTime + time);
}
render(){
return(
<div id='ImgApp'>
<PlayImage num={this.state.nowImgNumber}/>
<PlayImgBut id='leftB' value='<' onSubmit={this.handleSubmit}/>
<PlayImgBut id='rightB' value='>' onSubmit={this.handleSubmit}/>
<PlayPoints num={this.state.nowImgNumber} onPoint={this.handlePoint} start={this.handlePointStart}/>
<StartBut onStart={this.handleStart.bind(this)} isStart={this.state.isStart} reviseTime={this.reviseTime} nowTime={this.state.playTime}/>
</div>
)
}
}
export default PlayImgApp;
PlayImgBut：
import React,{Component} from 'react'
class PlayImgBut extends Component{
handleSubmit = ()=>{
if(this.props.onSubmit){
if(this.props.value == '>'){
this.props.onSubmit(1);
}else{
this.props.onSubmit(0)
}
}
}
render(){
return(
<a href='#'><div id={this.props.id} onClick={this.handleSubmit}>{this.props.value}</div></a>
)
}
}
export default PlayImgBut
PlayImgPoints：
import React,{Component} from 'react'
import PImgPoint from './PImgPoint'
class PlayImgPoints extends Component{
createLi = ()=>{
let array = [];
for(let i = 0;i < 6;i++){
if(i == this.props.num){
let style = {color:'deepskyblue'};
array.push(<PImgPoint key={i} style={style} id={i} onPoint={this.props.onPoint} start={this.props.start}/>);
}else{
let style = {color:'black'}
array.push(<PImgPoint key={i} style={style} id={i} onPoint={this.props.onPoint} start={this.props.start}/>);
}
}
return array;
}
render(){
return(
<div className='points'>
{this.createLi()}
</div>
)
}
}
export default PlayImgPoints;
PImgPoint：
import React,{Component} from 'react'
class PImgPoint extends Component{
handlePoint = ()=>{
if(this.props.onPoint){
this.props.onPoint(this.props.id);
}
}
reStart = ()=>{
if(this.props.start){
this.props.start();
}
}
render(){
return(
<a href='#' color='blue'><span id={this.props.id} className='point' style={this.props.style} onMouseOver={this.handlePoint} onMouseOut={this.reStart}>●</span></a>
)
}
}
export default PImgPoint;
index：
import React from 'react'
import ReactDOM from 'react-dom'
import PlayImgApp from './PlayImgApp'
import {createStore} from 'redux'
import App from './App'
import './PlayImage.css'
ReactDOM.render(
<PlayImgApp/>,
document.getElementById('root')
);
PlayImage：
import React,{Component} from 'react'
import image1 from './img/1.jpg'
import image2 from './img/2.jpg'
import image3 from './img/3.jpg'
import image4 from './img/4.jpg'
import image5 from './img/5.jpg'
import image6 from './img/6.jpg'
class PlayImage extends Component{
render(){
let images = [image1,image2,image3,image4,image5,image6]
const src = 'img/'+this.props.num+'.jpg';
return(
<div>
<img className='graph' src={images[this.props.num]}/>
<img src={image3}/>
</div>
)
}
}
export default PlayImage;
StartBut：
import React,{Component} from 'react'
class StartBut extends Component{
handleStart=()=>{
if(this.props.onStart){
this.props.onStart();
}
}
addPlayTime=(flag)=>{
if(this.props.reviseTime){
if(this.props.nowTime != 5000){
this.props.reviseTime(+500)
}
}
}
reducePlayTime=()=>{
if(this.props.reviseTime){
if(this.props.nowTime != 0){
this.props.reviseTime(-500)
}
}
}
render(){
return(
<div >
<div id='isPlay' onClick={this.handleStart}>
<a href='#'>{this.props.isStart?'开始':'暂停'}</a>
</div>
<div>
<span className="controlTime">当前图片切换时间间隔为</span>
<span className="controlTime" id="showTime">{this.props.nowTime/1000}</span>
<span className="controlTime">秒</span>
<a href="#" id="reduce" onClick={this.reducePlayTime}><span className="controlTime" id="controlReduce">-0.5s</span></a>
<a href="#" id="add" onClick={this.addPlayTime}><span className="controlTime" id="controlAdd">+0.5s</span></a>
</div>
</div>
)
}
}
export default StartBut;
PlayImage.css:
body{
background-color: #e6e6e6;
}
a{
text-decoration: none;
color: black;
}
#ImgApp{
margin: auto;
margin-top: 50px;
width: 60%;
height: 600px;
background-color: white;
border: solid 1px black;
border-radius: 5px/5px;
text-align: center;
}
.graph{
margin-top: 30px;
width: 80%;
height: 480px;
border-radius: 8px/8px;
}
#leftB,#rightB{
font-size: 80px;
position: absolute;
top: 35%;
color: black;
}
#leftB {
}
#rightB{
right: +20%;
}
#leftB:hover,#rightB:hover{
background-color: lightgray;
border-radius:5px/5px;
}
#leftB:active,#rightB:active{
background-color: darkgray;
border-radius:5px/5px;
}
.points{
letter-spacing: 40px;
margin-top: 20px;
}
#isPlay{
float:right;
display: inline-block;
margin-right: 10px;
font-size: 20px;
border: solid 3px deepskyblue;
border-radius: 3px/3px;
width: 3em;
height: 30px;
line-height: 30px;
}
#isPlay:hover{
background-color: deepskyblue;
}
#isPlay:active{
background-color: dodgerblue;
}
.controlTime{
word-spacing: 10px;
font-size: 30px;
margin-bottom: 5px;
}
#controlAdd,#controlReduce{
display: inline-block;
border: solid 2px black;
border-radius: 5px/5px;
width: 90px;
}
网友评论