我注意到新功能portals
可以做同样的事情,但是更好吗?我对门户网站了解不多,但这似乎是管理嵌套组件更新的新方法?
我知道Reacts Context API是实验性的,并且注意到componentDidUpdate
不再接收prevContext
,因此删除了contextTypes
。
我还注意到他们正在引入React 16's Portal API,并且不确定是否打算取代Context API。
因此,如上所述,React 16的Portal API是否打算取代Context API?
编辑:piggy带上这个主题,是在 react 中管理i18n本地化的最佳方法吗?
最佳答案
TL; DR => Portals
和Context
解决不同的目的,一种是在任何级别注入(inject)DOM,另一种是在任何级别注入(inject) Prop 。 Context
可以模仿Portals
,但是Portals
AS OF NOW现在至少在没有引入代码气味的情况下不能模仿Context
。
注意:以下内容基于我对这两个概念的理解,如果有人对此有进一步的想法或更正,请随时编辑答案。
顾名思义,从我能够理解的Portals
的角度出发,您可以呈现不需要在组件树层次结构中的组件。这对于Modals
,Popovers
或需要在树中特定位置处缝合的任何组件都非常完美。Context
用于与各种同级组件和子组件进行通信,而无需将prop从父级一直传递到预期的组件。当然,这是一个重要的功能,但由于处于集中状态管理的event-emitters
和Redux
和MobX
可以实现,因此仍处于实验阶段。
我假设您的i18n
用例将需要跨组件进行大量交流,您可能需要阅读一下这篇很棒的文章
COMPONENT COMMUNICATION
门户和上下文有助于实现这种沟通,但有所不同。门户网站可以在任何级别渲染或注入(inject)DOM,而上下文可以在子组件树的任何级别注入(inject)props。
您可以始终使用Portals
实现Context
的功能,但我不认为Portals
可以模仿Context
的功能。
EG:可以执行类似的操作来模仿Portals
使用Context
所做的事情。与Portals
AFAIK一样,您只能发送DOM节点ReactDOM.createPortal(child, container)
。也许有一种方法可以实现该功能,但是肯定会导致代码异味。
class Parent extends React.Component {
getChildContext() {
return {
renderModal: this.renderModal
}
}
renderModal = (children) => {
this.setState({
open: !this.state.open,
injectableChildren: children
})
}
render() {
this.state.open
?
<div>
{this.state.injectableChildren}
</div>
:
null
// JSX
}
}
class SomeSibling extends React.Component {
static contextTypes = {
renderModal: React.PropTypes.func
}
handleOnClick = (event) => {
this.context.renderModal(renderableChildJSX);
}
renderableChildJSX = () => (
<div>
YAY I AM GETTING RENDERED AT THE ROOT
</div>
)
render() {
return(
<div onClick={this.handleOnClick}>
</div>
)
}
}
在我的情况下,尽管
Context
文档总是提到它是一个实验性功能,并反复警告不要充分使用此功能,但我仍然害怕使用React
,尽管它具有灵活性。我的猜测是,React正在考虑稳定该功能或将其完全从React代码库中删除,这是一种可能会双向发展的风险。结论: IMO,其当前状态下的
Portals
及其要解决的问题与Context
的构建目的完全不同,因此最好使用event-emitters
,其唯一原因是可能不赞成使用Context
。