Question

所以我试图在Reactjs中构建一个完整的页面，但是一些组件在整个页面中都是持久的。结构是这样的：

<div>
  {showHeader ? header : ''}
  {showNav ? nav : ''}
  <div className="main">
    <section className="left">
      {this.props.children}
    </section>
    <section className="right>
      <section className="persist-this"/>
      {moreStuff}
    </section>
  </div>
</div>

在重新渲染期间，结构更改非常重要（从带有标题和导航的页面更改为无标题/无导航，persist-this部分也将重新呈现。

现在我实际上正在为每个单独的作品React.renderComponent做一次＆amp;保持结构静态（所以像renderComponent的标题，导航，左侧部分和更多的东西分开）＆amp;我想知道是否有更好的方法来做到这一点？

编辑：我想我知道为什么要重新渲染。我想现在我的问题变得更像是如何更好地组织我的结构。所以我得到BasePage.jsx具有上述结构的HomePage.jsx在其他页面（例如OtherPage.jsx或

var HomePage = React.createClass({
  render: function () {
    <BasePage>
      <p>Home</p>
    </BasePage>
  }
});

）中，我这样做：

React.renderComponent

我认为当我<HomePage>时，<OtherPage>＆amp; <BasePage>作为2个完全不同的组件，尽管它们由相同的renderComponent(<BasePage>, el)包装，因此卸载了Page。我应该将这些页面的差异分成mixins吗？，然后始终{{1}}以防止卸载？

Answer 1

如果页面之间存在某些问题，那么正确的方法就是将你的结构分开，这样任何持久的只会共享一个同样存在的祖先。

换句话说，你应该像这样构造它：

<div id="siteRoot">
  <div className="dynamic">
    {showHeader ? header : ''}
    {showNav ? nav : ''}
    <div className="main">
      <section className="left">
        {this.props.children}
      </section>
    </div>
  </div>
  <div className="persist-this">
      <section className="right>
        <section/>
           {moreStuff}
        </section>
    </div>
</div>

然后你的css应该适应你的新dom层次结构并相应地更新你的布局。

现在，当你在动态部分切换内容时，React会自动知道它不需要在persist部分重新渲染任何东西 - 因为那里没有任何改变。

如何让Reactjs不重新渲染某些组件

1 个答案: