嵌套的React組件和路由

Question

外部組件（頁面布局）：

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

組件一（第1頁）：

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

第二部分（第2頁）：

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

現在，如果我們根據所定位的頁面用戶（使用HTML5 History API）動態地將這些組件呈現到document.body ，這將對性能有何影響（與僅切換Page組件而不重新呈現外部（布局）組件相反） ）？

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：這些示例組件中的HTML標記被有意簡化。 在StackOverflow.com示例中，可能存在頁面組件，例如“問題”，“標簽”，“用戶”，“徽章”，“ AskQuestion”，它們全部包含在布局組件中，而布局組件本身包含頁眉，頁腳，導航，側邊欄。

Answer 1

如果沒有重新渲染，您將無法執行此操作，因為這兩個頁面組件並不相似。 如果使用某些計算出的參數創建一個組件，則可以避免很多變異。

組件頁面：

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

React只會重新渲染具有組件名稱的節點。

但是您無需擔心重新渲染，React可以非常快速地做到這一點。