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组件进行了更改，然后再次更改了entiry应用程序的渲染。

Answer 1

嗨，您可以使用React Pure组件类和React.memo函数进行测试，例如，这些函数可帮助您防止在React组件上重新呈现：如果您有一个类组件，那么除了Components Pure组件类之外，您还可以从PureComponent进行扩展如果再次在渲染组件的道具之间进行更改，则对组件的道具进行浅层验证g，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>
  );
});

反应纯组分实例：

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

反应NavBar组件防止渲染

1 个答案: