react项目实现的ssr
名词解释
- 同构:开发一套多个平台都可以跑的代码,例如同时可以在client和node端跑。https://juejin.im/entry/5b1631085188257d492adc9e
- ssr(server-side rendering):服务端渲染
关键API
react提供了四个方法将虚拟dom转为html文本:
- ReactDOMServer.renderToString(element)
- ReactDOMServer.renderToStaticMarkup(element)
- ReactDOMServer.renderToNodeStream(element)
- ReactDOMServer.renderToStaticNodeStream(element)
hydrate:
react16提供的新的API专门为服务端渲染做首屏优化。
一个节点上有服务器渲染标记,那么react会保留此dom结构,只是往dom上去绑定事件处理程序,从而达到一个最佳的首屏渲染表现,在客户端用hydrate代替render方法。
让服务端支持JSX
引入babel-register
.
服务端和客户端的执行区别
生命周期不同
服务端只能走到componentWillMount(),todo:componentWillMount周期内能干什么?
node环境中没有浏览器特有的全局对象和方法
这里就可以用到componentWillMount周期了,在这个周期就可以访问到浏览器特有的属性和方法了。
项目开发:
命令行工具生成API
参考文献