React同构

来源：互联网发布：贵阳浪人网络市值编辑：程序博客网时间：2024/05/20 10:54

React同构

javascript同构是什么

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

关键是什么

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

同构的好处

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

教程

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

// Make sure to include the JSX transpilerrequire("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