react 实践总结（一）
大牛自动略过，这里只是记载一些自己使用react的一些所谓的'best practice'。
规划component（包括container）
比如：拿到一个页面不是上来就写，更不是像写普通的html一样平铺的写下来，由于react是一个组件化的思想的实现，所以我们应该做的是先规划出来需要哪些component。然后可以从上而下的写，或者从下而上的写。
举个列子：
拿到这么一个页面如图：
Paste_Image.png
如果应用了react-router，
- 我们可以把最外边的layout作为根路径的component
- 左边的第二列list作为第二层的layout，作为中间内容的parent路径
- 中间内容对应具体的路径
上边这三个大的部分可以作为三个container（就是订阅redux或者reflex的component），同时应该把asyn api相关的操作加到这三个container上，这三个container下面的component要用这些操作（包括async api或者redux），就让container以props的形式往下面传递。为什么这么做？首先这三个大部分相对逻辑独立，然后把操作都放在container上的好处是使得下面的component尽量是和具体业务逻辑脱离的，提过可重用行，而且可以使得大部分的component是stateless的，这个很重要。
第二列的可以接着分解为一个新建活动的component，一个活动list的component，活动listcomponent又可以包括每个活动的component。
中间部分，上面展示活动内容的部分可以为一个component，下面是一个题目list的component，然后每一个题目都可以是一个component，相同结构的button可以写一个component， 搜索框可以作为一个component，添加按钮可以作为一个component，这些component的具体操作都是由container传递下去的，比如添加按钮的点击事件，是调用了container传递的onClick prop，代码如下：
<ContentHeader>
<SecHeader>
<LeftBtns>
{
this.props.params.activity_id ? <AddBtn onClick={this._openAddQuesDialog}/> : null
}
</LeftBtns>
<RightBtns>
{
this.props.params.activity_id ? <FilterForm onSubmit={this._onFilterFormSubmit}/> : null
}
</RightBtns>
</SecHeader>
</ContentHeader>
其实总结起来就是先划分大的container，然后container内有具体的操作（redux的订阅和api操作等等），其他的小的component尽量stateless。
react 是什么？和jquery冲突吗？
react是view，是根据数据（ props）展示页面的，它是一个状态机，根据数据来驱动展示html的。刚学习react的时候看到有人说用了react还用jquery干嘛，react就有绑定事件的api，但是其实是不冲突的，jquery是一个操纵dom的package。下面我展示一些我利用了在react中利用了jquery或者jquery的插件的例子：
// react 包装一个jquery的插件
import React, {Component} from 'react'
import ReactDom from 'react-dom'
class QRCode extends Component {
componentDidMount(){
let node = ReactDom.findDOMNode(this);
if(this.props.text){
$(node).qrcode({...this.props});
}
}
componentWillReceiveProps(nextProps){
if(this.props.text != nextProps.text){
let node = ReactDom.findDOMNode(this);
$(node).qrcode({...this.props});
}
}
render() {
return (
<div/>
);
}
}
export default QRCode
这个component是一个展示QRCode的例子，这里我利用了jquery-qrcode这个jquery 的插件，由于QRCode这个component的render只返回了<div/>，而是在componentDidMount中调用这个插件，很好的跳掉了react的控制，进入了jquery-qrcode的控制中，并且在componentWillReceiveProps中监听如果text这个属性有变化再次调用jquery-qrcode插件。
再比如一个例子，是写一个component这个component有scroll到bottom触发事件的功能，可以完成iscroll的功能。代码如下：
// 这个负责div scroll bottom的检测
import React, {Component} from 'react'
import ReactDom from 'react-dom'
class ScrollBottom extends Component {
componentDidMount() {
let node = ReactDom.findDOMNode(this);
$(node).unbind('scroll');
$(node).bind('scroll', this.chk_scroll);
}
chk_scroll = (e) => {
var elem = $(e.currentTarget);
if (elem[0].scrollHeight - elem.scrollTop() <= elem.outerHeight() + 200) {
this.props.onBottom();
}
}
render () {
return (
<div className={this.props.className}>
{this.props.children}
</div>
);
}
}
// 设置propTypes
ScrollBottom.propTypes = {
onBottom: PropTypes.func
}
export default ScrollBottom
这个例子就是利用jquery给ReactDom.findDOMNode(this);这个dom node绑定一个scroll事件，然后检测是否到底部，如果到了底部然后执行onBottom这个属性。
