我花了很多时间考虑如何在React中尽可能干净地构建最好的东西。最近我一直在讨论React容器是否应该做什么，除了连接到Redux（或其他数据 - 流星）并渲染/返回单个组件，或者容器是否也应该负责事件处理。例如，这是两个模型之间的折腾：
模型1
// ThingContainer.js
import Thing from '../components/Thing';
export default someHigherOrderFunc(/* map state/data to props */)(Thing)
// Thing.js
export default class Thing extends Component {
handleClick() { /* ... */ }
handleMouseEnter() { /* ... */ }
render() {
// Other components rendered here, both container or presentational
}
}
模型2
// ThingContainer.js
class ThingContainer extends Component {
handleClick() { /* ... */ }
handleMouseEnter() { /* ... */ }
render() {
// Now Thing can be stateless
return <Thing
onClick={this.handleClick}
onMouseEnter={this.handleMouseEnter}
/>
}
}
export default someHigherOrderFunc()(ThingContainer)
它几乎感觉像在模型1中， Thing 在某种意义上它变成了自己的容器，我不确定我喜欢它。模型2感觉更自然，如 ThingContainer 不仅要处理数据和Redux，还要处理事件，解雇Ajax请求 componentDidMount使用第一个模型，如果我想要调用Ajax请求 componentDidMount，它必须进去 Thing 这似乎不对。
我想知道这些方法中是否存在任何特定的优点或缺陷，或者它是否归结为风格/偏好。