摘要：產品需求產品需求，實現一個選擇器組件，要求浮在頁面上方。本文討論的主要是，在有類似于組件一樣，浮在頁面的組件時，如何設計組件樹方案一組件是組件的子組件。優勢的顯示狀態屬于節點控制，狀態管理成本低。包括，事件冒泡。

產品需求，實現一個選擇器 Selector 組件，要求浮在頁面上方。在網上隨便找了個圖，如下：

實現這一的一個 Selector 組件并不難，不是本文的討論內容。
本文討論的主要是，在有類似于 Selector 組件一樣，“浮”在頁面的組件時，如何設計 React 組件樹？

方案一：Seletor 組件是 App 組件的子組件。

優勢：Selector 屬于 App 的子節點，子節點不受父節點的樣式屬性( position overflow )的干擾。

劣勢：Selector 的顯示狀態屬于 App 節點，跨分支傳遞狀態成本太高。使用 Redux 或 Mobx 跨分支傳遞狀態，依賴第三方組件，不利于復用；而手動傳遞，至少要 4 個步驟，如果 Button 節點更深，步驟會更多。并且這樣寫出的代碼，耦合性太強，不利于維護。

方案二：Selector(fixed) 組件是 Button 組件的子組件。

優勢：Selector 的顯示狀態屬于 Button 節點控制，狀態管理成本低。

劣勢：Selector 屬于 Button 的子節點。而當父節點 Button 有文字超出隱藏的需求時(overflow: hidden)，子節點 Selector 會被隱藏。

那么，有沒有兩全齊美的方案呢？有。

方案三：在 React 組件樹設計上，Selector 是 Button 的子組件。但是在 DOM 樹的角度 Selector 是 Body 的子節點。

在這個方案中，Button 和 Selector 還是屬于 React 組件樹中的父子節點，享有父子組件狀態傳遞方便的優勢。
但是，Button 和 Selector 不再屬于 DOM 樹中的父子節點！Selector 被渲染到了 Body 節點下面，屬于 Body 的子節點。這樣 Selector 組件再也不會受到 Button 組件的樣式干擾了。

在 React 中如何做到這一點呢？使用 React 16 的 Portals。
這個新屬性的介紹文章很短，我就翻譯下一吧。翻譯只是意譯，只為更好理解。

Portals 提供了一種超級棒的方法，可以將 react 子節點的 DOM 結構，渲染到 react 父節點之外的 DOM 中。

ReactDOM.createPortal(child, container)

第一個參數 child 是任何可以被渲染的 ReactChild，比如 element, string 或者 fragment. 第二個參數 container 是 一個 DOM 元素。

一般來說，在 react 中是父子節點的關系，那么在 DOM 中也是父子節點的關系。

render() {
  // 在 react 中 div 和 children 是父子的關系，在 DOM 中 div 和 children 也是父子的關系。
  return (
    

      {this.props.children}
    
  );
}

然而，有時候打破了這種 react 父子節點和 DOM 父子節點的映射關系是非常有用的。使用 createPortal 可以將 react 的子節點插入到不同的 DOM 節點中。

render() {
  // React 并沒有創建一個新的 div，來包裹 children。它將 children 渲染到了 domNode 中。
  // domNode 可以是任意一個合法的 DOM 節點，無論它在 DOM 節點中的哪個位置。
  return ReactDOM.createPortal(
    this.props.children,
    domNode,
  );
}

portal 一個典型的用法是，當父組件有 overflow: hidden 或者 z-index 樣式時，但是子組件需要“打破”父組件容器，顯示在父組件之外。比如 dialogs，hovercards，tooltips 組件。

[在 CodePen 上嘗試一下(https://codepen.io/gaearon/pe...

雖然 portal 可以在 DOM 樹中的任意位置，但是它的行為依舊和普通的 React child 一樣。比如上下文環境完全一樣，無論 child 是不是 portal； portal 也一直存在于在 React 樹上，無論它位于 DOM 樹中的什么位置。

包括，事件冒泡。portal 節點的事件會冒泡到它的 React 樹的祖先節點上，即使這些 React 樹上的祖先節點并不是 DOM 樹上的祖先節點。比如，有下面的 HTML 結構。

在 DOM 樹中是 portal 和它的 React 父組件兄弟節點，但是由于 React 的事件處理規則，讓 portal 的 React 父組件有能力捕獲 portal 的冒泡事件。

// These two containers are siblings in the DOM
const appRoot = document.getElementById("app-root");
const modalRoot = document.getElementById("modal-root");

class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.el = document.createElement("div");
  }

  componentDidMount() {
    // The portal element is inserted in the DOM tree after
    // the Modal"s children are mounted, meaning that children
    // will be mounted on a detached DOM node. If a child
    // component requires to be attached to the DOM tree
    // immediately when mounted, for example to measure a
    // DOM node, or uses "autoFocus" in a descendant, add
    // state to Modal and only render the children when Modal
    // is inserted in the DOM tree.
    modalRoot.appendChild(this.el);
  }

  componentWillUnmount() {
    modalRoot.removeChild(this.el);
  }

  render() {
    return ReactDOM.createPortal(
      this.props.children,
      this.el,
    );
  }
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {clicks: 0};
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // This will fire when the button in Child is clicked,
    // updating Parent"s state, even though button
    // is not direct descendant in the DOM.
    this.setState(prevState => ({
      clicks: prevState.clicks + 1
    }));
  }

  render() {
    return (
      

        
Number of clicks: {this.state.clicks}
        

          Open up the browser DevTools
          to observe that the button
          is not a child of the div
          with the onClick handler.
        
        
          
        
      
    );
  }
}

function Child() {
  // The click event on this button will bubble up to parent,
  // because there is no "onClick" attribute defined
  return (
    

      Click
    
  );
}

ReactDOM.render(, appRoot);

[在 CodePen 上嘗試一下(https://codepen.io/gaearon/pe...

父組件能夠捕獲 portal 的冒泡事件的設計，允許開發者更加靈活的進行抽象，而這些抽象不依賴于 portal 。例如，如果你渲染一個 組件，它的父組件能夠捕獲它的事件，無論使用的是不是 portal 實現的 (fixed 也能實現)。

// 數據和選中的元素的狀態由 Selector 自己控制
// 不要將 data、index 狀態暴露給其他組件
// 暴露給父組件，越多和父組件耦合的就越重
class Selector extends Component {
    componentDidMount(){
        fetch("xxx")
            .then(data => {
                this.setState({
                    data,
                })
            })
    }

    handleSelect = index => {
        this.setState({
            index
        })
    }
    
    render() {
        return (
            
        )
    }

}

// 控制 Modal 顯示狀態都封裝在 Button 中
class Button extends Component {
    handleClick = () => {
        this.setState( prevState => ({
            show: !prevState.show
        }))
    }
    
    render() {
        return (
            

                我是按鈕
                // 為了保存 Selector 的狀態，不要 unmount Modal，用 display: none 實現隱藏。
                
                    
                
            
        )
    }
}


class App extends Component {
    render() {
        return (
            

                
                
            
        )
    }
}