产品需求
产品需求，实现一个选择器 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
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 (
<div>
{this.props.children}
</div>
);
}然而，有时候打破了这种 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…
Portals 的事件冒泡
虽然 portal 可以在 DOM 树中的任意位置，但是它的行为依旧和普通的 React child 一样。比如上下文环境完全一样，无论 child 是不是 portal； portal 也一直存在于在 React 树上，无论它位于 DOM 树中的什么位置。
包括，事件冒泡。portal 节点的事件会冒泡到它的 React 树的祖先节点上，即使这些 React 树上的祖先节点并不是 DOM 树上的祖先节点。比如，有下面的 HTML 结构。
<html>
<body>
<div id="app-root"></div>
<div id="modal-root"></div>
</body>
</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 (
<div onClick={this.handleClick}>
<p>Number of clicks: {this.state.clicks}</p>
<p>
Open up the browser DevTools
to observe that the button
is not a child of the div
with the onClick handler.
</p>
<Modal>
<Child />
</Modal>
</div>
);
}
}
function Child() {
// The click event on this button will bubble up to parent,
// because there is no 'onClick' attribute defined
return (
<div className="modal">
<button>Click</button>
</div>
);
}
ReactDOM.render(<Parent />, appRoot);[在 CodePen 上尝试一下(https://codepen.io/gaearon/pe…
父组件能够捕获 portal 的冒泡事件的设计，允许开发者更加灵活的进行抽象，而这些抽象不依赖于 portal 。例如，如果你渲染一个 <Modal /> 组件，它的父组件能够捕获它的事件，无论使用的是不是 portal 实现的 (fixed 也能实现)。
使用 portals 的实现 Selector
// 数据和选中的元素的状态由 Selector 自己控制
// 不要将 data、index 状态暴露给其他组件
// 暴露给父组件，越多和父组件耦合的就越重
class Selector extends Component {
componentDidMount(){
fetch('xxx')
.then(data => {
this.setState({
data,
})
})
}
handleSelect = index => {
this.setState({
index
})
}
render() {
return (
<List
data={this.state.data}
index={this.state.index}
onSelect={this.handleSelect}
/>
)
}
}
// 控制 Modal 显示状态都封装在 Button 中
class Button extends Component {
handleClick = () => {
this.setState( prevState => ({
show: !prevState.show
}))
}
render() {
return (
<div onClick={this.handleClick}>
<span>我是按钮</span>
// 为了保存 Selector 的状态，不要 unmount Modal，用 display: none 实现隐藏。
<Modal show={this.state.show}>
<Selector />
</Modal>
</div>
)
}
}
class App extends Component {
render() {
return (
<div>
<Button />
<Other />
</div>
)
}
}