因此,在我正在构建的应用程序上,我使用Apollo-link-state进行本地状态管理,并且我有一个Modal组件,如果状态中的modalData发生变化,它会弹出。为了让它监听这个,它被包装在一个<Query>组件中,如下所示:
render(){
return (
<Query query={GET_MODAL_DATA}>
{({data}) => {
const currentModal = data.currentModal;
return (
<CSSTransition in={currentModal.operation ? true : false} unmountOnExit classNames="modal" timeout={{ enter: 1, exit: 200 }}>
<div className="modal-container" onClick={this.closeModal}>
<div onClick={e => e.stopPropagation()}>
<h2>
{ currentModal.operation+' '+currentModal.dataType }
</h2>
</div>
</div>
</CSSTransition>
)
}}
</Query>
)
}然而,在这种安排下,无论您做什么,它都会重新呈现(并重新查询)。
改变路线?重新渲染。是否更改另一个组件的本地状态?重新渲染。是否更改文本字段?重新渲染。
也许这就是Apollo的工作方式,但来自Redux的每个挂载组件似乎都没有效率,如果你在浏览器的方向上呼吸那么多的话。
这就是它要做的吗,还是我的设置有误?
https://stackoverflow.com/questions/51372518
复制相似问题