在我的项目中，我有一个Page组件，用于添加项，然后在Navigation面板中显示它们:
import React, { useState } from 'react'
const Page = ({setRefreshList}) => {
console.log("PAGE RENDER");
const addItem = () => {
// adding item to database
setRefreshList();
}
return (
<button onClick={addItem}>Add Item</button>
)
}
Navigation个组件，带有站点菜单和项目:
const Navigation = () => {
console.log("Navigation RENDER");
return (
<div>
List of all items:
</div>
)
}
页面中还有一些组件，如Header:
const Header = () => {
console.log("HEADER RENDER");
return (
<div>
HEADER
</div>
)
}
和Main App:
export function App(props) {
const [refreshList, setRefreshList] = useState(0);
return (
<div className='App'>
<Header />
<Navigation />
<Page setRefreshList={setRefreshList} />
</div>
);
}
我需要刷新Navigation组件每次添加到Page项，所以我使用setState.现在，每次状态更改时，它也会呈现所有其他组件.
我try 使用React.memo()，但在这里没有效果，因为props包含一个函数.Page和Navigation的组合不是一个选项，因为在整个项目中，它们是分开的.
链接到在线代码编辑器，示例为:https://playcode.io/953730/.