摘要：產(chǎn)品需求產(chǎn)品需求，實(shí)現(xiàn)一個(gè)選擇器組件，要求浮在頁面上方。本文討論的主要是，在有類似于組件一樣，浮在頁面的組件時(shí)，如何設(shè)計(jì)組件樹方案一組件是組件的子組件。優(yōu)勢的顯示狀態(tài)屬于節(jié)點(diǎn)控制，狀態(tài)管理成本低。包括，事件冒泡。

產(chǎn)品需求，實(shí)現(xiàn)一個(gè)選擇器 Selector 組件，要求浮在頁面上方。在網(wǎng)上隨便找了個(gè)圖，如下：

實(shí)現(xiàn)這一的一個(gè) Selector 組件并不難，不是本文的討論內(nèi)容。
本文討論的主要是，在有類似于 Selector 組件一樣，“浮”在頁面的組件時(shí)，如何設(shè)計(jì) React 組件樹？

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

優(yōu)勢：Selector 屬于 App 的子節(jié)點(diǎn)，子節(jié)點(diǎn)不受父節(jié)點(diǎn)的樣式屬性( position overflow )的干擾。

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

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

優(yōu)勢：Selector 的顯示狀態(tài)屬于 Button 節(jié)點(diǎn)控制，狀態(tài)管理成本低。

劣勢：Selector 屬于 Button 的子節(jié)點(diǎn)。而當(dāng)父節(jié)點(diǎn) Button 有文字超出隱藏的需求時(shí)(overflow: hidden)，子節(jié)點(diǎn) Selector 會被隱藏。

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

方案三：在 React 組件樹設(shè)計(jì)上，Selector 是 Button 的子組件。但是在 DOM 樹的角度 Selector 是 Body 的子節(jié)點(diǎn)。

在這個(gè)方案中，Button 和 Selector 還是屬于 React 組件樹中的父子節(jié)點(diǎn)，享有父子組件狀態(tài)傳遞方便的優(yōu)勢。
但是，Button 和 Selector 不再屬于 DOM 樹中的父子節(jié)點(diǎn)！Selector 被渲染到了 Body 節(jié)點(diǎn)下面，屬于 Body 的子節(jié)點(diǎn)。這樣 Selector 組件再也不會受到 Button 組件的樣式干擾了。

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

Portals 提供了一種超級棒的方法，可以將 react 子節(jié)點(diǎn)的 DOM 結(jié)構(gòu)，渲染到 react 父節(jié)點(diǎn)之外的 DOM 中。

ReactDOM.createPortal(child, container)

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

一般來說，在 react 中是父子節(jié)點(diǎn)的關(guān)系，那么在 DOM 中也是父子節(jié)點(diǎn)的關(guān)系。

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

      {this.props.children}
    
  );
}

然而，有時(shí)候打破了這種 react 父子節(jié)點(diǎn)和 DOM 父子節(jié)點(diǎn)的映射關(guān)系是非常有用的。使用 createPortal 可以將 react 的子節(jié)點(diǎn)插入到不同的 DOM 節(jié)點(diǎn)中。

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

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

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

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

包括，事件冒泡。portal 節(jié)點(diǎn)的事件會冒泡到它的 React 樹的祖先節(jié)點(diǎn)上，即使這些 React 樹上的祖先節(jié)點(diǎn)并不是 DOM 樹上的祖先節(jié)點(diǎn)。比如，有下面的 HTML 結(jié)構(gòu)。

在 DOM 樹中是 portal 和它的 React 父組件兄弟節(jié)點(diǎn)，但是由于 React 的事件處理規(guī)則，讓 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 的冒泡事件的設(shè)計(jì)，允許開發(fā)者更加靈活的進(jìn)行抽象，而這些抽象不依賴于 portal 。例如，如果你渲染一個(gè) 組件，它的父組件能夠捕獲它的事件，無論使用的是不是 portal 實(shí)現(xiàn)的 (fixed 也能實(shí)現(xiàn))。

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

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

}

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

                我是按鈕
                // 為了保存 Selector 的狀態(tài)，不要 unmount Modal，用 display: none 實(shí)現(xiàn)隱藏。
                
                    
                
            
        )
    }
}


class App extends Component {
    render() {
        return (
            

                
                
            
        )
    }
}