我很好奇setState
作为props传递给孩子(哑组件)是否违反了任何“最佳实践”或会影响优化。
下面是一个例子,我有父容器的传球state
和setState
两个子组件,其中,子组件会调用该setState
函数。
我没有明确调用setState
孩子,他们引用一个服务来处理状态属性的正确设置。
export default function Dashboard() {
const [state, setState] = useState({
events: {},
filters: [],
allEvents: [],
historical: false,
});
return (
<Grid>
<Row>
<Col>
<EventsFilter
state={state}
setState={setState}
/>
<EventsTable
state={state}
setState={setState}
/>
</Col>
</Row>
</Grid>
)
}
仪表板 setState 服务示例
function actions(setState) {
const set = setState;
return function () {
return ({
setEvents: (events) => set((prev) => ({
...prev,
events,
})),
setAllEvents: (allEvents) => set((prev) => ({
...prev,
allEvents,
})),
setFilters: (name, value) => set((prev) =>
({
...prev,
filters
})
),
})
}
}
到目前为止,我还没有注意到任何状态问题。