React(0.13) 服务端渲染的两个函数
1.React.renderToString 函数, 参数是组件,返回一个字符串
<!DOCTYPE html> <html> <head> <title>React JS</title> <script src="../build_0.13/react.js"></script> <script src="../build_0.13/JSXTransformer.js"></script> <script src="../build_0.13/react-with-addons.min.js"></script> <style type="text/css"> .example-enter{color:red;} .example-active{color:green;} </style> </head> <body> <div id="example" > </div> <script type="text/jsx"> var MyComponent = React.createClass({ render:function(){ return ( <div>Hello World!</div> ); } }); var world = React.renderToString(<MyComponent />); alert(world); console.log(world); </script> </body> </html>
2.另一个服务端渲染函数: React.renderToStaticMarkup ,他没有data属性
<!DOCTYPE html> <html> <head> <title>React JS</title> <script src="../build_0.13/react.js"></script> <script src="../build_0.13/JSXTransformer.js"></script> <script src="../build_0.13/react-with-addons.min.js"></script> <style type="text/css"> .example-enter{color:red;} .example-active{color:green;} </style> </head> <body> <div id="example" > </div> <script type="text/jsx"> var MyComponent = React.createClass({ render:function(){ return ( <div>Hello World!</div> ); } }); //var world = React.renderToString(<MyComponent />); var world = React.renderToStaticMarkup(<MyComponent />); alert(world); console.log(world); </script> </body> </html>
两者在什么时候使用呢?
当且仅当你不打算在客户端渲染这个React Component时,才应该选择使用React.renderToStaticMarkup函数,如:
- 生成html电子邮件
- 通过HTML到PDF的转化生成PDF
- 组件测试
大多情况下 ,我们都使用React.renderToString()来进行服务端的渲染。