一个适合新手的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,require('../views/main').default);},'main');};
Info = (lt,require('../views/info').default);},'info');};
News = (lt,require('../views/news').default);},'news');};
NewsInfo = (lt,require('../views/newsInfo').default);},'news');};
Article = (lt,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吧 ~！~最后给大家拜个早年！！！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!