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 組件 class 和 React.memo 函數進行測試嗎，這些函數可以幫助您防止在 React 組件上重新渲染，例如：如果您有 class 組件，您可以從 PureComponent 擴展除了組件之外的 PureComponent ZA2F2ED2F8DC40AB666如果組件再次渲染的 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