一個適合新手的react小demo

以前一直都是在用vue，這兩個月換了個公司，不過如今又離職了，這裏什麼框架都用,
vue、angular、react，通常公司都是選二項技術去開發已經就夠了，
要不是vue+angular或是react+angular我的以爲用了vue還來個react那簡直是是是是，好吧，只能感覺到他們纔是真正的技術宅。
我之前也有了解過react以爲它和vue差很少，可是我錯了，要是真正用起來仍是有大半不同的，都說vuex是學習redux,但這兩個在實現上和功能運用上仍是有很大差別，
還有強大的jsx語法，就以爲混亂，這點vue作的還不錯，還有它的路由可操做的路由勾子也少，也沒有什麼watch監聽和計算屬性之類，
可是仍是要說一句的是，react是值得去學習的，你就不想知道它和vue不同在哪裏，一樣的功能vue是怎麼實現react是怎麼實現的嗎，要否則爲何這個框架會比vue還火呢！！
不說廢話了，直接上代碼吧，這裏我是用webpack + nodejs去搭建的。

這裏用到了redux、route3.x、還有一個簡單的高階組件運用

若是對redux不熟的話建議去看下阮一峯的教程

路由這塊想必用多說了吧，你們一看也就能懂

至於高階組件聽到這名字就以爲是一個很深奧的東西，其實若是你用過vue你應該知道mixins，對，高階組件也就是和mixins差很少，它就是對公用組件的一種封裝而已，沒什麼深奧的，

行，我以爲講到以上這幾點對作一個react項目應該夠用了，至於其它的一些東西就去看api吧
(注：這裏小調皮了一下用了eslint語法檢查)

• 先展現一下route這部份吧，如今用的仍是3.x的，最新是4.x和3.x仍是有很大區別

import React from "react";
import {Router, Route, IndexRoute} from "react-router";

let {App, Main, Info, News, Article, NewsInfo} = '';

App = (lt, cb) => {require.ensure([], require => {cb(null, require('../views').default);}, '/');};
Main = (lt, cb) => {require.ensure([], require => {cb(null, require('../views/main').default);}, 'main');};
Info = (lt, cb) => {require.ensure([], require => {cb(null, require('../views/info').default);}, 'info');};
News = (lt, cb) => {require.ensure([], require => {cb(null, require('../views/news').default);}, 'news');};
NewsInfo = (lt, cb) => {require.ensure([], require => {cb(null, require('../views/newsInfo').default);}, 'news');};
Article = (lt, cb) => {require.ensure([], require => {cb(null, require('../views/article').default);}, 'article');};

class RouterMap extends React.Component {
    render() {
        return (
            <Router history={this.props.history}>
                <Route path="/" getComponent={App}>
                    <IndexRoute getComponent={Main} />
                    <Route path="info/:id" getComponent={Info} />
                    <Route path="news" getComponent={News} />
                    <Route path="news/:id" getComponent={NewsInfo} />
                    <Route path="article" getComponent={Article} />
                </Route>
            </Router>
        );
    }
}
export default RouterMap;

• redux這塊

//每一個須要使用到redux的組件裏主要是這三塊
//他的整個流程以下步驟

//步驟3：
function mapStateToProps(state) {
    return {
        newList: state.pageParams.newList.value,
    };
}

//步驟1：
function mapDispatchToProps(dispatch) {
    return {
        getNewsList: (value) => dispatch({type: GETNEWSLIST, value}),
    };
}

......

export default connect(mapStateToProps, mapDispatchToProps)(News);

//redux

//步驟2：
function pageParams(state = {newList: []}, action) {
    return {
        newList: Object.assign(state.newList, action.type === GETNEWSLIST ? action.value : []),
    };
}

export default combineReducers({
    pageParams
});

• 最後是高階組件

import React from 'react';

export default (WrappedComponent) => {

    class ArticleInfo extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                username: '',
            };
        }

        componentWillMount() {
            let username = "科比、喬丹";
            this.setState({
                username: username,
            });
        }

        dellClick(num) {
            if (num === 1) {
                console.log('科比');
            }else {
                console.log('喬丹');
            }
        }

        showClick() {
            console.log('我是showClick');
        }

        render() {
            const props = {
                ...this.props,
                dClick: this.dellClick,
                sClick: this.showClick,
            };
            return <WrappedComponent {...props} />;
        }
    }

    return ArticleInfo;
};

好啦，主要內容就這些啦，是否是很簡單。
其實最主要是的我也暫時沒什麼機會用到react，只是看到離職的這家公司在用，無聊本身也就作的一個demo，就當和你們一塊兒溫故知新吧

代碼地址這在
若是以爲有用給我一個star吧 ~！~
最後給你們拜個早年！！！