我可以将AJAX调用放在表示组件中,还是应该提取容器？

Question

我花了很多时间考虑如何在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似乎不对.

我想知道这些方法中是否存在任何特定的优点或缺陷,或者它是否归结为风格/偏好.

Answer 1

在"presentational-ish"中进行AJAX没有任何内在错误,Thing因为它只是几种方法,而且这个组件从未在不同场景中使用过.你确定之前,不要从表现分裂行为如何在不同环境下的行为变化.

您有这种困境意味着您的组件不需要重复使用.在这种情况下,如何分割它并不重要.两种方式都可以正常工作,所以我会选择更简单的方法(模型1).

稍后您可能会意识到您希望重用相同的look-n-feel但触发不同的AJAX调用,或以不同方式计算道具.此时,您可能希望从中删除事件处理Thing并创建几个不同的ThingContainers,每个处理事件和计算道具的方式略有不同.这是分离表示和行为变得有用的时候.