初识React：仿网易公开课（react+antd）-白红宇

前言

最近开始学习React，于是便仿了一下网易公开课，来加强自己对React的理解，在这里和大家分享一下我这几天coding的React项目和自己踩的一些坑

使用到的技术栈

数据请求：axios

后台搭建：koa

跨域解决：koa-cors

css预编译器：stylus

UI框架：antd

其他组件：rewire swiper better-scroll

项目下载步骤

git clone https://github.com/fsafafaf/react-wyclass.git

安装

# 安装依赖    npm install    # 启动后端    yarn server    # 启动前端    yarn start复制代码

效果图

订阅功能

搜索功能

总览

功能实现

tabbar切换

轮播图和滑动功能

搜索功能：根据用户输入查找所有课程中符合要求的课程并显示

登录功能：根据用户的登录状态来判断是否可以订阅

订阅功能：根据用户订阅的账号显示订阅内容

播放功能：通过router传参确定视频内容

踩过的坑

一：react-router-dom

① JS切换路由

在这个项目中，我使用了react-redux来管理数据的状态，但是并没有连接数据库，所以界面一刷新，store里面的state就全部清零了。这导致我一开始用location跳转就一直保存不了数据，纠结了半天，于是就百度了一下，最后发现可以使用 react-router-dom 的Redirect功能实现页面的跳转

实现代码

import { Redirect } from 'react-router-dom'handleOnclick = () => {    this.setState({ redirect: true })}render () {    if(this.state.redirect){            return 
    ;    }    return (;)}复制代码

②跳转至子路由的数据传入

在coding播放页面的时候，我一开始是用redux来管理传入播放页面的数据，但是页面刷新过后，redux传来的ID也就消失了，页面便成了一片白。emmmm...我沉思了一番，突然发现页面的路由并没有改变，还是以ID结尾的路由！那我为什么不利用路由来匹配播放界面应该传入的数据呢！思考完就动手，这里得提一下我在父组件里面进入播放页面的方法：利用 this.props.match来获得当前页面的路由，然后再加上视频的ID，将其做为子页面的路由

实现代码

import { Route } from 'react-router-dom'class home extends Component {    selectVideo(video, url) {        return () => {            this.props.history.push({                pathname: url            })        }    }    return (                                    
     
      {item.text}
     
                        
    
         )}复制代码

然后只需要在子页面中将id筛选出来,再将id匹配一下就能获得要播放的数据了

实现代码

class Play extends Component {    constructor(props) {        super(props);        const arr = this.props.history.location.pathname.split('/')        const id = parseInt(arr[arr.length-1])        this.state = {            id: id        }    }}复制代码

二：react组件的生命周期

react组件的生命周期有3种状态

Mounting：已插入真实 DOM

Updating：正在被重新渲染

Unmounting：已移出真实 DOM

一般我们请求数据都是用componentDidMounting方法，但是这个方法不是万能的，有的时候它并不靠谱。在实现订阅页面时，我一开始用的就是在componentDidMounting方法中运行检测订阅账号函数，这导致只有我在其他的页面对账号进行订阅，订阅页面才会能重新渲染订阅内容，而直接在订阅页面对账号的订阅进行操作，订阅页面就不会重新渲染。简而言之就是componentDidMounting方法只会在重新加载组件的时候才会运行，而我们需要的是this.props每发生一次改变，都要重新渲染一遍订阅内容，这种时候，我们就需要用到componentWillReceiveProps方法，它会在组件接收到一个新的 prop (更新后)时被调用，而且这个方法在初始化render时不会被调用。

实现代码

componentWillReceiveProps() {        getData().then(res => {            const names = this.props.videos            const arr = []            if (names.length === 0) {                this.setState({show: false})            } else {                this.setState({show: true})            }            for (var key in names) {                for (var index in res) {                    if (res[index].up === names[key])                        arr.push(res[index])                }            }            this.setState({                videos: arr,            })        })    }复制代码

三：搜索功能实现

因为该项目笔者用的是Antd框架搭建的初体验，看到啥组件都想用一用。于是...当正在做搜索功能的我看到了AutoComplete自动完成组件...我就...我就用了。现在回想起来，我真想回去扇自己一巴掌，根本用不来啊，白白浪费了1个小时。如果你想看AutoComplete怎么实现搜索功能，emmm...好吧，你也浪费了1分钟,笔者根本没实现?。下面就讲一下笔者是怎么实现的搜索功能吧。

antd里的Search组件的onSearch属性会自动给我们返回一个value值，不用我们手动去获取输入框用户输入的值，所以我们将value传到我们自己定义的onSearch()函数中，然后对课程名集合allclass进行筛选，这里判断value值是否存在于课程名中我们用indexOf() >= 0 来判断即可，如果不存在，indexOf()的结果就是-1。

实现代码

onSearch(value) {        const result = this.state.allclass.filter(item => {            if (item.Course.indexOf(value) >= 0)                return item        })        console.log(result)        this.setState({            result: result        })    }复制代码

筛选出来的数据，用map遍历一下，就可以显示出来了

render () {    const result = this.state.result.map(item => {            return  (                  
                        
                             
                                  
       
        {item.Course}
       
                            
                               
      
                    
                     
    
            )        })    return (    
            
                 
      
        this.onSearch(value)}                style={
   { width: 300 }}                autoFocus            />            
       
        取消
       
        
      
     
        
     
                  {result}        
     
    
    
    )}复制代码

结语

这个react项目是我边学习边coding的，还有一些小bug没解决，比如退出登录的时候 my界面并不会自动渲染，必须要重新切换路由，未登录状态才能渲染到页面上，不过学习不就是这样吗，不断的学习，不断的踩坑，不断的进步！希望我这篇文章能对你有所帮助。最后附上我的，如果你觉得不错，可以给我个star哦！