以前使用reactjs做前端开发都是webpack打包然后在运行，这样的好处是，你开发的环境是一个纯碎在写nodejs的感觉，而且还能应用很多ES6的新特性，岂不快哉！
最近在做后端，也由于使用webpack时间长，一直没有找到很好的办法去解决，自动打包缓慢的问题，还有就是每次开发你都要去根据具体情况写要给跟webpack相关的config文件。
于是就试着用Browser的环境进行开发，结果今天尝试下后，果然还是很不错的。
首先引入react，我这里使用reflux，然后再引入reflux，再引入babel。
1
2
3
4
| <script src="/js/react.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/react-dom.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/reflux.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.10.3/babel.min.js"></script>
|
类似下面这样，跟使用jquery是一样的感觉。
接下来我们写一个简单的分页的组件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| var Pagination = React.createClass({
clickHandler: function (e) {
e.preventDefault();
if (e.currentTarget.dataset.handle == 'false') {
this.props.listData(e.currentTarget.dataset.page);
}
},
render: function () {
let nextStop = false;
let preStop = false;
if (this.props.currentdata.length < this.props.pagesize) {
nextStop = true;
}
if ((this.props.page - 1) <= 0) {
preStop = true;
}
const preClass = preStop ? 'previous disabled' : 'previous';
const nextClass = nextStop ? 'next disabled' : 'next';
let pre_page = parseInt(this.props.page) - 1;
let next_page = parseInt(this.props.page) + 1;
return (
<nav>
<ul className="pager">
<li className={preClass}>
<a href="#" onClick={this.clickHandler} data-page={pre_page} data-handle={preStop}>
上一页
</a>
</li>
<li className={nextClass}>
<a href="#" onClick={this.clickHandler} data-page={next_page} data-handle={nextStop}>
下一页
</a>
</li>
</ul>
</nav>
);
}
});
Pagination.propTypes = {
currentdata: React.PropTypes.array.isRequired,
page: React.PropTypes.number.isRequired,
pagesize: React.PropTypes.number.isRequired,
listData: React.PropTypes.func.isRequired
};
|
就是这样，不需要其他的 export的东西，以为我们只要在页面中引入就可以了。
1
| <script src='/js/components/partial/Pagination.js' type="text/babel"></script>
|
就像上面这样就可以了。
下面我们调用一下：
1
2
3
4
5
6
| var pagerProps = {
page: this.state.page,
pagesize: this.state.pageSize,
currentdata: this.state.recordItem,
listData: this.loadMorePage
};
|
这里的loadMorePage是另外组件里面的一个方法，用来加载下一页数据的，page就是页数，pageSize就是每页的数量。
1
2
3
4
5
| loadMorePage:function(page){
page = parseInt(page);
this.setState({page: page});
Action.getRecordItem(this.props.uid, page, this.state.pageSize);
},
|
就像上面这样子，加载一下数据就可以渲染到列表的组件里面去了。然后就是如何再其他组件里面调用了。
1
2
3
| <div className="col-md-12">
<Pagination {...pagerProps}/>
</div>
|
pagerProp就是刚才上面的变量。这样就可以使用了。
总体感觉下来起始跟我之前的使用方法区别就是，不再需要去import和export了。
而且不需要去不断的打包了。不知道后面开发还会遇到啥其他问题，继续更新…