Fragments
Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。
class Table extends React.Component {
render() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
);
}
}
// class Columns ...
<React.Fragment key="{{item.id}}"> // 完整写法可以带key
<td>Hello</td>
<td>World</td>
</React.Fragment>
<>
<td>Hello</td>
<td>World</td>
</>
高阶组件（HOC）
高阶组件是参数为组件，返回值为新组件的函数。（可以理解为高阶函数）
纯函数，相同的输入总会得到相同的输出，并且不会产生副作用的函数
高阶函数，就是让当前函数获得额外能力的函数
// 此函数接收一个组件...
function withSubscription(WrappedComponent, selectData) {
// ...并返回另一个组件...
return class extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {
data: selectData(DataSource, props)
};
}
componentDidMount() {
// ...负责订阅相关的操作...
DataSource.addChangeListener(this.handleChange);
}
componentWillUnmount() {
DataSource.removeChangeListener(this.handleChange);
}
handleChange() {
this.setState({
data: selectData(DataSource, this.props)
});
}
render() {
// ... 并使用新数据渲染被包装的组件!
// 请注意，我们可能还会传递其他属性
return <WrappedComponent data={this.state.data} {...this.props} />;
}
};
}
tips: 1. 不要改变原始组件，使用组合对原组件重新包装。 2. HOC 为组件添加特性。自身不应该大幅改变约定。HOC 返回的组件与原组件应保持类似的接口。 3. 不要在 render 方法中使用 HOC。（每次调用 render 函数都会创建一个新的组件，影响diff对比） 4. 务必复制静态方法。 5. Refs 不会被传递。