React同构

最新推荐文章于 2022-08-23 14:25:06 发布

牧夜

最新推荐文章于 2022-08-23 14:25:06 发布

阅读量2k

点赞数

分类专栏： react 文章标签： reactjs 同构服务器 javascript facebook

react 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

React同构

javascript同构是什么

让javascript代码在客户端和服务器端都能运行

关键是什么

mvc的框架是在DOM加载的时候渲染，这个当然也可以显示，但是会带来不好的用户体验。
另一个问题是MVC框架里面内容是不能被搜索引擎搜索到的（除非给钱给第三方服务），如果你的app提供一些用户需要搜索的数据，那就悲剧了。
但是当你在服务器端渲染javascript代码，就能解决这些问题，是不是觉得很酷。。。。

同构的好处

好的用户体验
可被搜索引擎索引
更容易维护
免费的渐进增强（这个如何解释？）

教程

https://www.youtube.com/watch?v=8wfY4TGtMUo
在server.js中安装jsx。

// Make sure to include the JSX transpiler
require("node-jsx").install();

然后如果你的组件是在一个单独的文件中，你需要使用module.exports导出你的组件。
然后确保调用React.createFactory,将你的组件在服务器端渲染出来。

/** @jsx React.DOM */

var React = require('react/addons');

/* create factory with griddle component */
var Griddle = React.createFactory(require('griddle-react'));

var fakeData = require('../data/fakeData.js').fakeData;
var columnMeta = require('../data/columnMeta.js').columnMeta;
var resultsPerPage = 100;

var ReactApp = React.createClass({

      componentDidMount: function () {
        console.log(fakeData);
      },

      render: function () {
        return (
          <div id="table-area">
             <Griddle results={fakeData} columnMetadata={columnMeta} resultsPerPage={resultsPerPage} tableClassName="table"/>
          </div>
        )
      }
  });

/* Module.exports instead of normal dom mounting */
module.exports.ReactApp = ReactApp;
/* Normal mounting happens inside of /main.js and is bundled with browerify */

现在，当你在路由里面使用React.renderToString时，奇迹就会发生。。。

var React = require('react/addons');
var ReactApp = React.createFactory(require('../components/ReactApp').ReactApp);

module.exports = function(app) {
    app.get('/', function(req, res){
        // React.renderToString takes your component
        // and generates the markup
        var reactHtml = React.renderToString(ReactApp({}));
        // Output html rendered by react
        // console.log(myAppHtml);
        res.render('index.ejs', {reactOutput: reactHtml});
    });
};

将reactOutput变量传递到template模板中。

<!doctype html>
<html>
  <head>
    <title>React Isomorphic Server Side Rendering Example</title>
    <link href='/styles.css' rel="stylesheet">
  </head>
  <body>
    <h1 id="main-title">React Isomorphic Server Side Rendering Example</h1>
    <!-- reactOutput is the server compiled React Dom Nodes -->
    <!-- comment out reactOutput to see empty non indexable source in browser -->
    <div id="react-main-mount">
      <%- reactOutput %>
    </div>

    <!-- comment out main.js to ONLY see server side rendering -->
    <script src="/main.js"></script>
  </body>
</html>

注意：因为这些文件是js后缀而不是jsx后缀的，所以使用React.createFactory来包含组件。想知道原因，看这里

Demo安装指引

如果你想下载代码自己尝试

clone这个仓库：git clone git@github.com:HelloClicky/helloClicky.git
安装依赖包： npm install
运行代码：node server.js
在浏览器中输入网址访问：http://localhost:4444 5:想看看服务器端渲染做了什么，可以在index.ejs文件中注释掉main.js，然后你就会看到服务器端生成了什么内容。

上面的仓库貌似不能访问，请访问这里 https://github.com/DavidWells/isomorphic-react-example

牧夜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React同构

React同构javascript同构是什么让javascript代码在客户端和服务器端都能运行关键是什么mvc的框架是在DOM加载的时候渲染，这个当然也可以显示，但是会带来不好的用户体验。另一个问题是MVC框架里面内容是不能被搜索引擎搜索到的（除非给钱给第三方服务），如果你的app提供一些用户需要搜索的数据，那就悲剧了。但是当你在服务器端渲染javascript代码，就能解决这些问题，是不
复制链接

扫一扫