Javascript 嵌套组件和路由

外部组件（页面布局）：

---

注意：这些示例组件中的HTML标记是有意简化的。例如，在StackOverflow.com上，可能有一些页面组件，如问题、标签、用户、徽章、AskQuestion，它们都包含在一个布局组件中，而布局组件本身包含页眉、页脚、导航、侧边栏。

如果没有rerender，则无法执行此操作，因为这两个页面组件并不相似。如果使用一些计算参数创建一个组件，则可以避免很多突变

组件页：

var Page = React.createClass({
  render() {
   return (
        var _component_title = "Component" + this.props.componentName  
        <Layout title={_component_title}>
            <p>This is {_component_title}</p>
        </Layout>
     );
   }
});

React将仅重新渲染具有组件名称的节点

---

但是您不必担心重新加载，React可以非常快地完成这项工作。

React的diff只会在DOM的虚拟表示发生更改时更改DOM，因此性能差异应该可以忽略不计（如果有的话）。如果您担心，请对其进行分析，并查看哪种方法更快您真的将所有React页面组件合并为一个吗？：）当然不是，但你问过如何避免重播。并没有办法避免重新加载，若组件发生变化，只有当组件发生变化时，才会出现最小计数的dom突变。

var PageOne = React.createClass({
  render() {
    return (
      <Layout title="Component One">
        <p>This is component one.</p>
      </Layout>
    );
  }
});

var PageTwo = React.createClass({
  render() {
    return (
      <Layout title="Component Two">
        <p>This is component two.</p>
      </Layout>
    );
  }
});

var React = require('react');
var {Router} = require('director');

var render = (page) => { React.renderComponent(page(), document.body); };

var routes = {
    '/page-one': () => { render(require('./pages/PageOne')); },
    '/page-two': () => { render(require('./pages/PageTwo')); }
};

Router(routes).configure({html5history: true}).init();

var Page = React.createClass({
  render() {
   return (
        var _component_title = "Component" + this.props.componentName  
        <Layout title={_component_title}>
            <p>This is {_component_title}</p>
        </Layout>
     );
   }
});

var Page = require('./pages/Page')
var render = (page) => { React.renderComponent(Page({componentName: page}), document.body); };

var routes = {
   '/page-one': () => { render('One'); },
   '/page-two': () => { render('Two'); }
};