标签:
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函数,如:
大多情况下 ,我们都使用React.renderToString()来进行服务端的渲染。
标签:
原文地址:http://www.cnblogs.com/yuwensong/p/5327890.html