码迷,mamicode.com
首页 > 其他好文 > 详细

React(0.13) 服务端渲染的两个函数

时间:2016-03-28 10:17:50      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:

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" >&nbsp;</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" >&nbsp;</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()来进行服务端的渲染。

React(0.13) 服务端渲染的两个函数

标签:

原文地址:http://www.cnblogs.com/yuwensong/p/5327890.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!