React：如何使用map（）渲染多个菜单而又不导致重新渲染？

Question

我有一个名为<SiteMenu />的组件。 在我的渲染函数中，我有以下三行：

render() {
    { this.renderPrimaryMenu() }
    { secondaryMenuContents && this.renderSecondaryMenu() }
    { this.renderAdditional() }
}

每个菜单项都有一个对应的功能，可以映射结果并创建菜单作为无序列表。 简化版本：

renderAdditional() {
    const { secondaryMenuContents } = this.props;
    if (!secondaryMenuContents) { return false; }

    const additional = filter(secondaryMenuContents.sections, { additional: true });
    if (!additional || additional.length === 0) { return false; }

    const links = additional.map(
        (link, index) => {
            return (
                <Link
                    key={ `${index}-${link.link}` }
                    to: link.link
                >
                    { link.text }
                </Link>
            );
        }
    );

    return (
        <nav className={ styles['nav--additional'] }>
            <Responsive>
                <h3 className={ styles.h3 }>{ Lang.additionalSection.title }</h3>
                <menu className={ styles['menu--additional'] }>
                    { links }
                </menu>
            </Responsive>
        </nav>
    );
}

每次呈现这些列表之一时，它都会重新呈现整个组件。 其中一个菜单使用静态JSON（ renderPrimaryMenu() ），而另两个菜单则依赖于API两次单独调用中的数据，因此数据不一定总是同时输入。

确保单个渲染的任何建议，或者更好的是，显示第一个静态菜单（随每个渲染淡入并重新淡入），并在准备就绪时显示另外两个渲染而不会导致第一个菜单重新渲染？

感谢我可以获得的任何帮助！

Answer 1

我建议您将这三个部分分开。

并使用shouldComponentUpdate（）来确保是否重新渲染组件。

这是伪代码：

class PrimaryMenu extends Component {
  shouldComponentUpdate() {
    // if data is the same, return false
    // else return true
  }

  render() {
    return (
      ...
    )
  }
}

class SecondaryContent extends Component {
  // same logic as PrimaryMenu
}

class Additional extends Component {
  // same logic as PrimaryMenu
}

class SiteMenu extends Component {
  render() {
    return (
      <PrimaryMenu/>
      <SecondaryContent/>
      <Additional/>
    )
  }
}

因此，使用此设置，您可以在每个Menu控制重新渲染时间。

Answer 2

或尝试使用PureComponent，它可以减少重新渲染的内容。

import React, { PureComponent } from 'react';

class Additional extends PureComponent {

}

更多信息https://reactjs.org/docs/react-api.html#reactpurecomponent