一个适合新手的react小demo

AttleeJim 发布于9月前 阅读61次
0 条评论

之前一直都是在用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吧 ~!~
最后给大家拜个早年!!!

查看原文: 一个适合新手的react小demo

  • purplesnake
  • brownbutterfly
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。