首页 > 其他 > 详细

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

时间:2016-03-28 10:15:14      阅读:134      评论: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
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!