时间戳

首页 > 解决方案 > React NavBar 组件阻止渲染

javascript - React NavBar 组件阻止渲染

问题描述

我是 React 世界的新手，我想知道为什么每次我在页面上进行更改时总是呈现这段代码，它总是呈现没有进行任何更改的组件，例如：

<Grid columns="equal" className="app" style={{ background: secondaryColor.hex }}>
    <ColorPanel
      key={currentUser && currentUser.name}
      currentUser={currentUser} 
    />
      <SidePanel
        key={currentUser && currentUser.uid}
        currentUser={currentUser}
        primaryColor={primaryColor}
      />
    <Grid.Column style={{ marginLeft: 320 }}>
      <Messages
        key={currentChannel && currentChannel.id}
        currentChannel={currentChannel}
        currentUser={currentUser}
        isPrivateChannel={isPrivateChannel}
      />
    </Grid.Column>

    <Grid.Column width={4}>
      <MetaPanel 
        key={currentChannel && currentChannel.name}
        userPost={userPost}
        currentChannel={currentChannel}
        isPrivateChannel={isPrivateChannel} 
      />
    </Grid.Column>
       </Grid>

我对 MessagePanel 组件进行了更改，并再次渲染了整个应用程序。

标签： javascriptreactjs

解决方案

嗨，你能用 React Pure 组件类和 React.memo 函数进行测试吗，这些函数可以帮助你防止 React 组件上的重新渲染，例如：如果你有一个类组件，你从 PureComponent 扩展除了 Components Pure 组件类做一个浅的如果组件再次渲染的 props 之间发生更改，则对组件的 props 进行验证，React.memo 的行为相同，唯一的事情是最后一个，如果对于功能组件，这里是 React 文档的链接：

React.memo 示例：

const NavMemo = React.memo(({ activeTab, onTabChange }) => {
  console.log('Render');
  return (
    <nav className="App-nav">
      <ul>
        <li className={`App-nav-item ${activeTab === 0 && 'selected'}`}>
          <a onClick={() => onTabChange(0)}>Items</a>
        </li>
        <li className={`App-nav-item ${activeTab === 1 && 'selected'}`}>
          <a onClick={() => onTabChange(1)}>Cart</a>
        </li>
      </ul>
    </nav>
  );
});

React 纯组件示例：

export default class Nav extends React.PureComponent {
  render() {
    const { onTabChange, activeTab } = this.props;
    return (
      <nav className="App-nav">
        <ul>
          <li className={`App-nav-item ${activeTab === 0 && 'selected'}`}>
            <a onClick={() => onTabChange(0)}>Items</a>
          </li>
          <li className={`App-nav-item ${activeTab === 1 && 'selected'}`}>
            <a onClick={() => onTabChange(1)}>Cart</a>
          </li>
        </ul>
      </nav>
    );
  }
}

https://reactjs.org/docs/react-api.html#reactmemo

https://reactjs.org/docs/react-api.html#reactpurecomponent

推荐阅读