我是 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 组件进行了更改,整个应用程序再次呈现。
最佳答案
您好,您可以使用 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>
);
}
}
关于javascript - React NavBar 组件阻止渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58702913/