React 16의 Portal API는 Context API를 대체 할 예정입니까?

Question

새로운 기능을 발견했습니다. portals 같은 일을하지만 더 잘합니까? 포털에 대해서는 잘 모르지만 중첩 된 구성 요소 업데이트를 관리하는 새로운 방법 인 것 같습니다. 반응이 Context API 인 것을 알았습니다. componentDidUpdate은 더 이상 prevContext을받지 않으며, contextTypes가 떨어졌습니다.

또한 React 16's Portal API을 소개하고 있으며 이것이 Context API를 대체 할 것인지 확실하지 않은 것으로 나타났습니다.

앞서 언급했듯이 React 16의 Portal API는 Context API를 대체 할 예정입니까?

편집 :이 주제에 피기 백하려면 conext가 반응에서 i18n 현지화를 관리하는 가장 좋은 방법입니까?

Answer 1

TL; DR = "PortalsContext 및 다른 목적을 해결 한 어떠한 수준 DOM을 주입하는 등의 모든 수준에서 소도구를 주입하는 것이다. Context은 Portals을 모방 할 수 있지만 Portals은 코드 냄새를 도입하지 않고 Context을 모방 할 수 없습니다.

참고 : 다음은 두 가지 개념에 대한 나의 이해를 바탕으로합니다. 이에 대한 의견이나 수정 사항이 있으시면 언제든지 답을 수정하십시오.

이름에서 알 수 있듯이 Portals은 구성 요소 트리 계층 구조에있을 필요가없는 구성 요소를 렌더링 할 수있는 문법입니다. 이것은 Modals, Popovers 또는 트리의 특정 위치에 스티칭해야하는 모든 구성 요소와 완벽하게 동일합니다.

Context은 부모로부터 원하는 구성 요소까지 소품을 전달하지 않고 다양한 형제 및 하위 구성 요소와 통신해야합니다. 물론 이것은 중요한 기능이지만 실험적 단계에 머물러있는 이유는 중앙 집중식 관리를 위해 event-emitters과 Redux, MobX을 사용할 수 있기 때문입니다.

내가있는이 위대한 기사

COMPONENT COMMUNICATION

포털 및 상황에 맞는 도움말을보고 할 수 있습니다 i18n에 대한 사용 사례는 구성 요소에 통신을 많이 필요로 가정하고 이런 종류의 의사 소통을 달성했지만 차이점이 있습니다. 포털은 모든 수준에서 DOM을 렌더링하거나 삽입 할 수 있으며 Context는 하위 구성 요소 트리의 모든 수준에서 소품을 삽입 할 수 있습니다.

당신은 항상 Portals가 Context를 사용 할 수 있습니다 무엇을 달성 할 수 있지만 Portals이 Context 기능을 모방 할 수 있다고 생각하지 않습니다.

는 EG :이 같은 뭔가가 Context을 사용하여 할 Portals 모방하기 위해 수행 할 수 있습니다. 어디서 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> 
     ) 
    } 
} 

, 나는 인해 React 문서가 항상 실험적인 기능이 있다고 언급하고 본격적인이 기능을 사용하는 반복 경고는 사실이 유연성도 불구 Context를 사용 두려워했다. 내 생각에 React는이 기능을 안정화 시키거나 두 가지 방향으로 갈 수있는 위험 인 React 코드베이스를 완전히 긁어 모으고 있습니다.

결론 : IMO, 거기에 Portals가 현재 상태이고 그것을 해결하려고하는 문제가 Context가 내장 된 것과 완전히 다른이며이 Context 가능성이되지 될 수있는 유일한 이유 event-emitters를 사용하는 것이 좋습니다.