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

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

2 个答案: