理想的web组件模式

面向接口编程

写功能之前，先写接口。
前端和后端之间的接口：RESTful API
后端用express的情况下，这个接口又体现为一个中间件
前端用react的情况下，这个接口应当体现为一组JS API
react使用JS API编程。
react组件与组件之间的接口，直接组件用props，间接组件用pubsub。

举例:

//后端 express:
var login=require('login');
app.use('/login',login);

//前端 API:
var login=axios.get('/login');

//前端REACT 组件调用

---

部分前端功能代码:

//Login组件定义
import React from 'react';

export default class Login extends React.Component {
  static propTypes = {
    login: React.PropTypes.func.isRequired,
    routeSuccess:React.PropTypes.string//成功后去向的路由，默认为login_after
  };

  constructor(props) {
    super(props);
    this.gotoLoginAfter=this.gotoLoginAfter.bind(this);
    this.showError=this.showError.bind(this);
  }

  render() {

    return (
        

            
请登录
            
            
            登录
          

    );
  }

   handleSubmit(e) {
        e.preventDefault();
        const username=this.refs.username.value;
        const password=this.refs.password.value;
        // console.log(username,password)
        const {login}=this.props;
        login(username,password).then(this.gotoLoginAfter).catch(this.showError)
    }

    gotoLoginAfter(){
        const routeSuccess=this.props.routeSuccess||'login_after';
        PubSub.publish('route',routeSuccess);
    }
    showError(){
        PubSub.publish('msg.error','登陆错误');
    }
}

//接受pubsub的部分: