初識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 <Redirect push to="/home" />;
    }
    return (<button onClcik={this.handleOnClick} type="button">Button</button>;)
}
複製代碼

②跳轉至子路由的數據傳入

在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 (
    
        <a onClick={this.selectVideo(item,`${match.url + '/' + item.id}`)}>
            <img src={item.img} />
            <div className="home-text">{item.text}</div>
        </a>
        
        <Route path = {`${match.url + '/:id'}`} component = {Play}/>
    )
}
複製代碼

而後只須要在子頁面中將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  (  
                <div key={item.id} >
                    <NavLink to={`/home/${item.id}`}>
                        <div className="search-bar">
                            <div className="search-text">{item.Course}</div>
                            <Icon type="right" style={{ color: '#9b9b9b' }} />
                        </div>
                    </NavLink>
                </div>
            )
        })
    return (
    <div className="class-search">
        <div className="search">
            <Search
                placeholder="9種"
                onSearch={value => this.onSearch(value)}
                style={{ width: 300 }}
                autoFocus
            />
            <div className="cancel-button" onClick={this.searchOut()}>取消</div>
        </div>

        <div className="content">
            {result}
        </div>
    </div>
    )
}
複製代碼

結語

這個react項目是我邊學習邊coding的，還有一些小bug沒解決，好比退出登陸的時候 my界面並不會自動渲染，必需要從新切換路由，未登陸狀態才能渲染到頁面上，不過學習不就是這樣嗎，不斷的學習，不斷的踩坑，不斷的進步！但願我這篇文章能對你有所幫助。最後附上個人項目地址，若是你以爲不錯，能夠給我個star哦！