嵌套的React组件和路由

Question

Outer component (page layout):

var Layout = React.createClass({
  render() {
    return (
      <div className="container">
        <header>
          <h1>{this.props.title}</h1>
        </header>
        <section>
          {this.props.children}
        </section>
      </div>
    );
  }
});

Component one (page 1):

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

Component two (page 2):

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

Now, if we render these components to document.body dynamically, based on which page user is located (using HTML5 History API), how would that impact performance (as opposed to switching just Page components without re-rendering the outer (layout) component)?

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();

PS: The HTML markup in these sample components is intentionally simplified. On StackOverflow.com example, there could be page components such as Questions, Tags, Users, Badges, AskQuestion, all contained inside a layout component which itself contains header, footer, navigation, sidebar.

Answer 1

You can't do this without rerender because this two page components are not similar. You can avoid lot of mutations if you create one component with some calculated parameters.

Component Page:

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

Router:

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'); }
};

React will rerender only nodes with component name.

But you no need wory about rerender, React do this really fast.