[react教程二]:react基础

react 快手随机播放

一、教程
这里推荐一本入门书籍：http://huziketang.mangojuice.top/books/react/

二、我们这里通过一个随机播放快手妹子的例子来讲解下react知识。
首先，我们看演示：http://mzitu.icu/kuaishou
整个界面包含，播放器、随机播放按钮、自动播放开关的几个功能，我们一一通过react来实现。

1、首先视频来源，来自后端API接口。这里你也可以是text文档，也可以是json目录，这些视频都是收集自网络。
接口地址为:http://mapi.ibayeux.com/v1/kuaishou

2、用到的插件:react-player, antd,axios
app.js:

import React, { useState, useEffect } from 'react';
import axios from 'axios'

import {Card, Button, Switch, Row, Col} from 'antd' 

import ReactPlayer from 'react-player' 


const url = 'http://mapi.ibayeux.com/v1/kuaishou'

#获取随机播放的视频
const getVideo = ()=>{
    const timestrip = new Date().getTime()
    return axios.get(url+'?timestrip='+timestrip)
}
 
const VideoPlayer = (porps)=>{

    document.title = '快手小姐姐'
    #定义state
    const [state, setState] = useState({
        havePlayed:[],
        videos:[],
        lodaing:false,
        url:'',
        isGoon:true
    })

    useEffect(()=>{ 
        #生命周期mounted,第一次打开获取一个小姐姐视频，并且加入到已播放ARRAY中。
        getVideo().then(res=>{ 
            setState(state=>(
                {
                    ...state, 
                    url:res.data.result,
                    havePlayed:[res.data.result]
                }
            ))

        })
    }, []) 
    
    #随机播放按钮触发
    const getRandom = ()=>{
        setState(state=>({...state, loading:true}))
        getVideo().then(res=>{ 
            setState(state=>(
                {
                    ...state, 
                    url:res.data.result,
                    havePlayed:[res.data.result],
                    loading:false,
                }
            ))

        })
    }
    #播放器判断是否连续播放
    const goplay = ()=>{
        if(state.isGoon){
            getRandom()
        }
    }
    #连续播放开关
    const changePlayer = (checked)=>{
        setState(state=>(
            {
                ...state,
                isGoon:checked,
            }
        ))
    }
    

    return (
        <div>
            <Row> 
                <Col md={{span:18}} xs={{span:24}}> 
                    <ReactPlayer
                        url={state.url}  #视频地址
                        controls={true}   
                        playing={true}    
                        onEnded={goplay}  #播放完之后事件
                        className='react-player' 
                        width='100%'
                        height='70vh'
                    /> 
                </Col>
                <Col md={{span:4, offset:2}} xs={{span:24}}>
                    <Card title>
                    <Row>
                        <Col md={{span:24}} xs={{span:12}} className="bottomMargin">
                            <Button htmlType="button" type="primary" className="green" onClick={getRandom} loading={state.loading}>随机换一个</Button>
                        </Col>
                        <Col md={{span:24}} xs={{span:12}}>
                        <Switch checkedChildren="自动随机播放" unCheckedChildren="自动随机播放" defaultChecked  onChange={changePlayer} />
                        </Col>
                    </Row>
                       
                    </Card>
                </Col>
            
            </Row>
        
        </div>
    )

}

export default VideoPlayer;

然后再入口文件引入VideoPlayer组件即可。
这里建议先看了react小书再来看这个，这里还是需要一定基础的，并非0基础教学。

本文由 admin 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Jul 30, 2020 at 10:18 pm