javascript - React NavBar 组件防止渲染

Question

我是 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 组件进行了更改，整个应用程序再次呈现。

Answer 1

您好，您可以使用 React Pure 组件类和 React.memo 函数进行测试吗，这些函数可以帮助您防止在 React 组件上重新渲染，例如:如果您有一个从 PureComponent 扩展的类组件，除了 Components Pure 组件类如果组件渲染的 Prop 之间发生变化，则对组件的 Prop 进行浅层验证，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