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历史记录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();

P.S。：有意简化这些示例组件中的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将仅重新呈现具有组件名称的节点。

但是你不需要了解rerender，React这么快就做到了。

嵌套的React组件和路由

1 个答案: