我注意到新功能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 => PortalsContext解决不同的目的,一种是在任何级别注入(inject)DOM,另一种是在任何级别注入(inject) Prop 。 Context可以模仿Portals,但是Portals AS OF NOW现在至少在没有引入代码气味的情况下不能模仿Context

注意:以下内容基于我对这两个概念的理解,如果有人对此有进一步的想法或更正,请随时编辑答案。

顾名思义,从我能够理解的Portals的角度出发,您可以呈现不需要在组件树层次结构中的组件。这对于ModalsPopovers或需要在树中特定位置处缝合的任何组件都非常完美。
Context用于与各种同级组件和子组件进行通信,而无需将prop从父级一直传递到预期的组件。当然,这是一个重要的功能,但由于处于集中状态管理的event-emittersReduxMobX可以实现,因此仍处于实验阶段。

我假设您的i18n用例将需要跨组件进行大量交流,您可能需要阅读一下这篇很棒的文章

COMPONENT COMMUNICATION

javascript - React 16的Portal API是否打算取代Context API?-LMLPHP

门户和上下文有助于实现这种沟通,但有所不同。门户网站可以在任何级别渲染或注入(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

10-05 20:46
查看更多