Aitter's Blog

Koa2 + React + Redux + antd 同构直出探索

之前对照小尤大大的hackernews-vue2.0的同构项目做过一遍之后,就是一直想看看reactjs的同构直出方案是怎样的,希望可以做个对比,体验一下两者之间的差别,平时一直忙于工作,这两天辞职在家,终于静下心来,实践体验了一下。年底不好找工作,哪位小伙伴有合适的可以推荐一下,最好杭州城西,在这先谢谢了:)

由来

在出现同构之前,我们使用后端的模板渲染引擎,C#的Razor,java的Velocity, nodejs的ejs,jade等,来渲染页面,输出到浏览器,浏览器异步请求数据,再使用各种渲染引擎来渲染数据至模板,
那么如果有样一个使用场景,加载一个列表数据:

  • 两端使用不同模板引擎渲染
    如果需要服务端首屏加载时服务端渲染,异步加载时浏览器渲染,那么就需要写两套模板代码,同时维护两套模板处理逻辑

  • 纯前端渲染

  1. 不可避免出现白屏,等待异步加载,体验变差
  2. SEO优化问题,没有服务端渲染,蜘蛛抓取不到数据,无SEO可言

所以服务端渲染是不可或缺的一个环节,如何优化,只要我们前后端使用同一份业务逻辑,共一个技术框架,同一套模板,同一套路由处理逻辑,就能达到我们想要的效果。

ReactJS的生命周期

在了解之前,先来重温一下ReactJS的生命周期

ReactJS的生命周期可以分为三个阶段来看:实例化、存在期、销毁期

实例化

首次实例化

  • getDefaultProps
  • getInitialState
  • componentWillMount
  • render
  • componentDidMount
    实例化之后更新,这一过程和上面一样,但没有getDefaultProps这个过程
    简单记忆:props => state => mount => render => mounted

存在期

组件已经存在,状态发生改变时

  • componetWillReceiveProps
  • shouldComponentUpdate
  • ComponentWillUpdate
  • render
  • componentDidUpdate

简单记忆:receiveProps => shouldUpdate => update => render => updated

销毁期

componentWillUnmount

生命周期中10个API的作用说明

  1. getDefaultProps
    作用于组件类,只调用一次,返回对象用于设置默认的props,对于引用值,会在实例中共享

  2. getInitialState
    作用于组件实例,在实例创建时调用一次,用于初始化每个实例的state,此时可以访问this.props

  3. componentWillMount
    在完成首次渲染之前调用,此时可以修改组件的state

  4. render
    必选方法,创建虚拟DOM,该方法具有特殊规则:

  • 只能通过this.props 和this.state访问数据
  • 可以返回null、false或任何React组件
  • 只能出现一个顶级组件,数组不可以
  • 不能改变组件的状态
  • 不能修改DOM
  1. componentDidMount
    真实的DOM被渲染出来后调用,可以在此方法中通过 this.getDOMNode()访问真实的DOM元素。此时可以使用其它类库操作DOM。服务端不会被调用

  2. componetWillReceiveProps
    组件在接收到新的props时调用,并将其作为参数nextProps使用,此时可以更改组件的props及state

  3. shouldComponentUpdate
    组件是否应当渲染新的props或state,返回false表示跳过后续的生命周期方法,通常不需要使用以避免出现bug。在出现应用性能瓶颈时,是一个可以优化的点。

  4. componetWillUpdate
    接收新props或state后,进行渲染之前调用,此时不允许更新props或state

  5. componetDidUpdate
    完成渲染新的props或state之后调用 ,此时可以访问DOM元素

  6. componetWillUnmount
    组件被移除之前调用,可以用于做一些清理工作,在componentDidMount方法中添加的所有任务都需要在该方法中撤销,比如创建的定时器或添加的事件监听器。

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);

因为服务端渲染,不存在挂载组件,所以挂载以后的生命周期将不会在服务端渲染时触发, 所以在做服务端组件状态或数据初始化时,要做特殊处理,后面会讲到

Redux的基本概念

Redux 提供了一套类似 Flux 的单向数据流,整个应用只维护一个 Store,以及面向函数式的特性让它对服务器端渲染支持很友好。

关于 Store:

  • 整个应用只有一个唯一的 Store
  • Store 对应的状态树(State),由调用一个 reducer 函数(root reducer)生成
  • 状态树上的每个字段都可以进一步由不同的 reducer 函数生成
  • Store 包含了几个方法比如 dispatch, getState 来处理数据流
  • Store 的状态树只能由 dispatch(action) 来触发更改

Redux 的数据流:

  • action 是一个包含 { type, payload } 的对象
  • reducer 函数通过 store.dispatch(action) 触发
  • reducer 函数接受 (state, action) 两个参数,返回一个新的 state
  • reducer 函数判断 action.type 然后处理对应的 action.payload 数据来更新状态树

关键API

ReactJS官网提供了两个API用于服务端渲染,使其服务端渲染成为可能:

React.renderToString 是把 React 元素转成一个 HTML 字符串,因为服务端渲染已经标识了 reactid,所以在浏览器端再次渲染,React 只是做事件绑定,而不会将所有的 DOM 树重新渲染,这样能带来高性能的页面首次加载!同构黑魔法主要从这个 API 而来。

React.renderToStaticMarkup,这个 API 相当于一个简化版的 renderToString,如果你的应用基本上是静态文本,建议用这个方法,少了一大批的 reactid,DOM 树自然精简了,在 IO 流传输上节省一部分流量。

配合 renderToStringrenderToStaticMarkup 使用,createElement 返回的 ReactElement 作为参数传递给前面两个方法。

关键要点

  • 数据状态如何共享
  • 路由状态何同步
  • 组件如何共用

组件共用

原理

对于整个应用来说,一个 Store 就对应一个 UI 快照,服务器端渲染就简化成了在服务器端初始化 Store,将 Store 传入应用的根组件,针对根组件调用 renderToString 就将整个应用输出成包含了初始化数据的 HTML,服务端在输出的时候将 state 注入到页面的全局属性中,客户端 render 时拿到 state,同步初始化状态,检验服务端生成的HTML结构,接管页面的渲染工作。

路由同步

场景

  • 在用户第一次访问页面时,由服务端路由处理,输出相关页面内容
  • 客户端用户点击链接跳转,由客户端路由处理,渲染相关组件并展示
  • 用户在前端跳转后刷新页面,此时被服务端路由截获,并由服务端处理渲染并返回页面内容

共用路由 /app/router.js 放在client端,server端也共用这一个文件

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

Web页面请求

Server端页面请求

使用 react-routermatch 方法,拿到的页面请求地址匹配到定义的 routes,解析成和客户端一致的 props 对象 传递给组件。

React-router官网文档有前后端共用路由的相关介绍ServerRendering - React-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
})
}
}

renderCtrl 负责服务端处理数据并渲染页面输出到浏览器端,这里调用了react 服务端渲染的核心方法 renderToString()

server/controller/renderCtrl.js

//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>)
})
}

Client端页面请求

浏览器端,从服务端注入到全局对象中获取redux需要的应用状态state,初始化state
导入路由共用的配置模块,初始化路由
调用 ReactDOM.render() 方法来渲染页面

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')
)

数据请求共用

Server端api请求

Server端由于渲染组件时,不会执行到 componentWillMount 方法(因为不存在挂载操作),那么就要手动去处理数据状态的初始化工作,方法是给组件添加一个静态方法 fetch(),服务端在 renderCtrl 中渲染之前,先加载完数据,初始化state,再将state注入到页面,渲染至浏览器端

渲染部分的代码上面已经展示了,下面来看看给组件添加的静态方法 fetch()

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(){}
}

Client端api请求

当页面从服务端返回后,那么浏览器端就接管了页面的控制,比如点击 下一页 这个功能,数据请求就是ajax 异步请求服务端,服务端返回 json 数据,那么这里,只需要调用组件的静态方法 fetch(),获取数据即可。

注意

  1. 前端在组件挂载后,要判断一下这个页面的状态数据,有没有初始化,如果没有,应该加载一次,以避免在前端路由跳转后,新的页面没有数据而报错。
  2. 每个页面的state最好设置一下默认值,这样在前端页面异步数据还没有加载回来之后,给页面状态一个默认状态,避免数据获取时出错。
class News extends Component{
static fetch (state, dispatch) {
const fetchTasks = []
fetchTasks.push(
dispatch(fetchNews(state))
)
return fetchTasks
}
//如果没有加载后,组件挂载后,加载一次
componentDidMount () {
const { loaded } = this.props
if ( !loaded ) {
this.constructor.fetch(this.props, this.props.dispatch)
}
}
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>
}
}

api请求最终都是调用redux 中的 actions 去做异步请求处理,那么在action中,可以使用 isomorphic-fetch 去做请求去差异化,服务端使用http.request方法需要完整路径,客户端使用ajax,使用相对路径,具体如下

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)))
}
}

这里的 __SERVER__ 是webpack中配置的全局变量

new webpack.DefinePlugin({
__SERVER__: true
})

应用状态同步

状态同步主要使用redux去同步,服务端渲染时,生成一个 state,在返回页面时,将这个state注入页面,浏览器端拿到state,接管页面状态的管理。

服务器端在 render 中,先获取数据,初始化state,注入页面

ctx.render('index', {
title: config.title,
dev: ctx.app.env === 'development',
//将state输出到页面,用于浏览器端redux初始化state
reduxData: store.getState(),
app: renderToString(<Provider store={store}>
<RouterContext {...renderProps} />
</Provider>)
})

server/views/index.ejs

<body>
<section role="main" class="react-container">
<div><%- app %></div>
</section>
<script>
try {
//通过render,将应用的state由ejs注入到全局对象__REDUX_STATE__中,用于redux的state初始化
window.__REDUX_STATE__ = <%- JSON.stringify(reduxData) %>;
} catch (e) {
console.warn('error in getting server redux data');
}
</script>
<script src="/build/common.js"></script>
<script src="/build/main.js"></script>
</body>

浏览器端从全局对象中获取并初始化redux

//这里获取服务端注入的state
const store = configureStore(window.__REDUX_STATE__)
ReactDOM.render(
<Provider store={store}>
{routes}
</Provider>,
document.querySelector('.react-container')
)

构建与打包

这个项目框架是参考 @wssgcg1213 的 koa2-react-isomorphic-boilerplate,他在构建与打包这方便做出了很多的工作,更多细节可查看他的文档和源码。

这里有几个点要处理,服务端的打包和客户端的打包,服务端打包
target 要配置为 node, libraryTarget 要配置为 commonjs2,产生node端运行的代码

output: {
path: path.join(__dirname, '/dist'),
filename: 'index.js',
publicPath: '/build/',
libraryTarget: 'commonjs2'
},
target: 'node',
node: {
fs: 'empty',
__dirname: true,
__filename: true
},
externals: [
function (context, request, callback) {
var pathStart = request.split('/')[0]
if (pathStart && (pathStart[0] === '!') || nodeModules.indexOf(pathStart) >= 0 && request !== 'webpack/hot/signal.js') {
return callback(null, 'commonjs ' + request)
}
callback()
}
],

另外react 的 component 中充满了 import './component.less', import img from './img.png' 这样的语法, 但在 node 中是会报错的,@wssgcg1213 使用了babel-plugin-transform-require-ignore 来忽略 css/less , 转而在 webpack-dev-middleware 中使用 style-loader 打包成 js bundle 输出, 这样也能同时支持 hot module replacement; 对于图片使用 asset-require-hook 这个包来使 require 直接返回文件路径.

模板和UI框架

这个Demo里使用了ejs做为koa的模板引擎,这样可以为一些非SPA页面提供公用的片段,Header或Footer

引入了 antd 做为UI框架,这里不得不提 ant.design 这个框架做的真是太好了,为管理界面的开发提升了很大开发的效率,组件设计美观,api合理,真正实现了一切UI皆组件的思想。

这里引入 antd 有个优化点,使用 babel-plugin-antd 插件,可以按需加载组件资源,不用全部引入,安装这个组件之后,还要在 .babelrc 中配置一下

{
"plugins": [["antd", {
"libraryDirectory": "lib",
"libraryName": "antd"
}]]
}
import { Button } from 'antd';
=>
var _button = require('antd/lib/button');

另外在项目中使用到了用 @ 修饰器的方式将redux的state注入到类的props中,因为这是ES7的一个提案,这里需要安装另一个插件 babel-plugin-transform-decorators-legacy 配合使用,同样要在 .babelrc 中配置一下

{
"plugins": ["transform-decorators-legacy"]
}
import {connect} from 'react-redux';
//在组件中使用
@connect(
state => state.server,
)
class News extends Component{}

总结

花了两天的时间,重温了一下react,实践了一下koa2+react+redux+antd的同构方式,总体感觉下来,要处理问题还是很多的,可能是自己对webpack还不是很熟悉,在开发环境和build环境的配置中,webpack改动还是很大的,幸好有开源的框架可以参考,一步步走来,还算顺利,但想想同构真的有必要吗?

如果是2B的业务,其实应该没有同构的必要吧,增加了开发的复杂性,前后端也不能很好的分工合作,而且用户体验也没有那么高的需求。
所以适合2C的移动端项目,对体验要求很高,需要用到服务端优化加载和渲染的项目是合适同构的
另外,服务端渲染还要做缓存的,虽然我没有做性能测试,不过从QQ音乐的实践和测试来看,服务端不做缓存,在大并发下,还是有很大的性能瓶颈的。
最好的方式是像Vue的同构方案一样,建立缓存,并可以stream输出,这样就完美了。

项目源码

isomorphism-koa2-react-antd

参考阅读
koa2-react-isomorphic-boilerplate
玩转 React 服务器端渲染
ReactJS 服务端同构实践【QQ音乐web团队】
React+Redux 同构应用开发