react 实践总结（一）

大牛自动略过，这里只是记载一些自己使用react的一些所谓的'best practice'。

规划component（包括container）

比如：拿到一个页面不是上来就写，更不是像写普通的html一样平铺的写下来，由于react是一个组件化的思想的实现，所以我们应该做的是先规划出来需要哪些component。然后可以从上而下的写，或者从下而上的写。

举个列子：
拿到这么一个页面如图：

Paste_Image.png

如果应用了react-router，

1. 我们可以把最外边的layout作为根路径的component
2. 左边的第二列list作为第二层的layout，作为中间内容的parent路径
3. 中间内容对应具体的路径

上边这三个大的部分可以作为三个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这个属性。