如何使 Reactjs 不重新渲染某些组件答案

【问题标题】：How to make Reactjs not rerender certain components如何使 Reactjs 不重新渲染某些组件
【发布时间】：2014-09-29 09:28:47
【问题描述】：

所以我试图在 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 并保持结构静态（比如renderComponent 分别用于标题、导航、左侧部分和更多内容）& 我想知道是否有更好的方法来做到这一点?

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

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

我认为当我执行React.renderComponent 时，它会将<HomePage> 和<OtherPage> 视为2 个完全不同的组件，尽管它们被相同的<BasePage> 包裹，从而卸载了页面。我应该将这些页面的差异分成 mixins 吗？然后总是 renderComponent(<BasePage>, el) 以防止卸载？

【问题讨论】：

这可能会有所帮助：calendar.perfplanet.com/2013/diff
在您列出的结构中，persist-如果 showHeader 和 showNav 更改或 moreStuff 更改，则不会卸载。如果您看到它卸载了，那么您的代码中肯定有其他不同的内容。
这可能是我的事情，但我只是好奇是否有任何情况下 React 决定重新渲染整个事物而不是区分子树并保持某些部分完好无损？

标签： reactjs

【解决方案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 会自动知道它不需要重新渲染持久部分中的任何内容 - 因为那里没有任何更改。

【讨论】：