在Redux-React应用中，有状态展示组件应放components还是containers目录？

先明确传统的components和containers目录核心区分逻辑，再结合你的Search组件具体分析：

传统目录划分原则 #

• components目录：存放纯展示/UI组件，核心关注「怎么渲染」，不直接和Redux交互。内部允许存在UI相关的本地状态（比如输入框实时值、弹窗展开/折叠状态），所有数据和回调都通过props接收。
• containers目录：存放与Redux连接的组件，核心负责「数据怎么来、怎么处理」——通过connect（或Redux Toolkit的useSelector/useDispatch）获取Redux状态、分发action，再将这些数据和回调传递给下层展示组件。

针对你的Search组件 #

先整理你的组件代码：

import React from "react";
import SearchResults from "../SearchResults";
import PropTypes from "prop-types";

class Search extends React.Component {
  state = { value: "" };

  handleChange = event => {
    let value = event.target.value;
    this.setState({ value });
    this.props.performSearch(value);
  };

  handleSubmit = event => {
    event.preventDefault();
  };

  render() {
    return (
      <div>
        <h1>The Guardian Search App</h1>
        <form onSubmit={this.handleSubmit}>
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </form>
        <SearchResults />
      </div>
    );
  }
}

Search.propTypes = {
  performSearch: PropTypes.func.isRequired
};

export default Search;

这个组件有两个关键特征：

1. 拥有本地状态value——用于跟踪输入框实时值，属于UI交互类本地状态，是完全合理的展示组件行为。
2. 通过props接收performSearch——这是一个和Redux交互的回调（应该是分发搜索action的方法）。

判断它的归属，核心看performSearch的来源：

• 如果这个组件自身通过connect（或hooks）连接到Redux，直接获取了performSearch的dispatch逻辑，那它属于container组件，应该放在containers目录，因为它承担了与Redux交互的职责。
• 如果performSearch是由上层container组件传递过来的，而这个Search组件仅负责UI渲染和本地状态管理，那它属于展示型组件，可以放在components目录。

现在的最佳实践 #

其实现在很多React/Redux团队已经不再严格区分components和containers，转而采用按功能模块组织目录的方式。比如把搜索相关的所有代码（组件、Redux slice、工具函数等）都放在src/features/search目录下，这种方式在大型项目中更便于维护，找相关代码也更高效。

内容的提问来源于stack exchange，提问作者jingteng