var React = require("react");
var ReactDOM = require("react-dom");

var NewView = React.createClass({
    //1.创建阶段
    getDefaultProps:function() {
        console.log("getDefaultProps");
        return {};
    },

    //2.实例化阶段
    getInitialState:function() {
        console.log("getInitialState");
        return {
            num:1
        };
    },

    //render之前调用，业务逻辑都应该放在这里，如对state的操作等
    componentWillMount:function() {
        console.log("componentWillMount");
    },

    //渲染并返回一个虚拟DOM
    render:function() {
        console.log("render");
        return(
            <div>
            hello <strong> {this.props.name} </strong>
            </div>
            );
    },

    //该方法发生在render方法之后。在该方法中，ReactJS会使用render生成返回的虚拟DOM对象来创建真实的DOM结构
    componentDidMount:function() {
        console.log("componentDidMount");
    },

    //3.更新阶段
    componentWillReceiveProps:function() {
        console.log("componentWillReceiveProps");
    },

    //是否需要更新
    shouldComponentUpdate:function() {
        console.log("shouldComponentUpdate");
        return true;
    },

    //将要更新 不可以在该方法中更新state和props
    componentWillUpdate:function() {
        console.log("componentWillUpdate");
    },

    //更新完毕
    componentDidUpdate:function() {
        console.log("componentDidUpdate");
    },

    //4.销毁阶段
    componentWillUnmount:function() {
        console.log("componentWillUnmount");
    },

    // 处理点击事件
    handleAddNumber:function() {
        this.setProps({name:"newName"});
    }
});
ReactDOM.render(<NewView name="ReactJS"></NewView>, document.body);

export default (
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Home}/>
      <Route path="news" component={News} />
      <Route path="about" component={About} />
    </Route>
  </Router>
)

export default async (ctx, next) => {
  try{
    //Server端路由与前端路由共用 **页面路由** ../../../app/routes
    const { redirectLocation, renderProps } = await _match({ routes: require('../../../app/routes'), location: ctx.url })
    //重定向
    if(redirectLocation){
      ctx.redirect(redirectLocation.pathname + redirectLocation.search)
    }else if(renderProps){
      //调用页面渲染控制器，开始服务端渲染
      await renderCtrl(ctx, next, renderProps)
    }else{
      await next()
    }
  }catch(e){
    console.error('Server-Render Error Occurs: %s', e.stack)
    await ctx.render('500', {
      msg: ctx.app.env === 'development' ? e.message : false
    })
  }
}

//renderProps：从路由组件中获取的路由与组件的信息
export default async (ctx, next, renderProps) => {
  const route = renderProps.routes[renderProps.routes.length - 1]
  let prefetchTasks = []

  // 遍历路由中注册的组件，创建加载数据请求，至数组中
  for (let component of renderProps.components) {
    if (component && component.WrappedComponent && component.WrappedComponent.fetch) {
      const _tasks = component.WrappedComponent.fetch(store.getState(), store.dispatch)
      if (Array.isArray(_tasks)) {
        prefetchTasks = prefetchTasks.concat(_tasks)
      } else if (_tasks.then) {
        prefetchTasks.push(_tasks)
      }
    }
  }

  //当所有组件的数据加载完成后，
  await Promise.all(prefetchTasks)
  // 渲染组件
  await ctx.render('index', {
    title: config.title,
    dev: ctx.app.env === 'development',
    //将state输出到页面，用于浏览器端redux初始化state
    reduxData: store.getState(),
    // render之后生成的HTML字符串在app这个对象中，通过ejs渲染至view中，最后输出
    app: renderToString(<Provider store={store}>
      <RouterContext {...renderProps} />
    </Provider>)
  })
}

import React from 'react'
import ReactDOM from 'react-dom'
import routes from '../../app/routes'
import { Provider } from 'react-redux'

// 和服务端共用的redux状态管理
import configureStore from '../../app/store/configureStore'

// 页面加载时，从全局对象中获取服务端注入到页面的State数据
const store = configureStore(window.__REDUX_STATE__)

// 浏览器端使用 ReactDOM.render 初始化页面，首屏渲染
ReactDOM.render(
  <Provider store={store}>
    {routes}
  </Provider>,
  document.querySelector('.react-container')
)

import { fetchNews } from '../actions/news'

@connect( state => state.news )

class News extends Component{
//这里声明一个数据，为的是可以获取多个接口的数据，接口请求是异步请求，返回之后，render之前调用 Promise.all() 保证所有异步请求完成后，再渲染页面
  static fetch (state, dispatch) {
   const fetchTasks = []
   fetchTasks.push(
     dispatch(fetchNews(state))
   )
   return fetchTasks
 }
  render(){}
}

class News extends Component{
 static fetch (state, dispatch) {
   const fetchTasks = []
   fetchTasks.push(
     dispatch(fetchNews(state))
   )
   return fetchTasks
 }
 getNextPage(){
	//调用组件的静态方法异步获取数据
   this.constructor.fetch(this.props, this.props.dispatch);
 }
 render(){
	<div style={{ background: '#ECECEC', padding: '30px' }}>
        <Button type="primary" loading={!loaded} onClick={this.getNextPage.bind(this)}>
         下一页
       </Button>
        <div>
        { newsList }
        </div>
     </div>
	}
}

const fetchStateUrl = __SERVER__
  ? `http://localhost:${require('../../platforms/common/config').port}/api/news`
  : '/api/news'

export function fetchNews(state){
  return (dispatch) => {
    dispatch(newsRequest())
    return fetch(fetchStateUrl)
      .then(res => res.json())
      .then(data => {
        console.log('===>news')
        console.log(data)
        dispatch(newsSucceed(data))
      })
      .catch(e => dispatch(newsFailed(e)))
  }
}

ctx.render('index', {
   title: config.title,
   dev: ctx