React项目文件目录结构

一个典型的 React 项目文件目录结构如下:

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg
    serviceWorker.js
    api/      // API 相关文件
    components/   // 组件文件
    constants/    // 常量目录
    containers/   // 容器组件目录
    images/   // 图片资源
    routes/     // 路由文件
    styles/     // 样式文件
    tests/   // 测试文件
    utils/    // 工具函数目录

每个文件的主要作用:

  • public/index.html:HTML 模板
  • src/index.js:入口文件
  • src/App.js:根组件
  • src/routes/index.js:路由配置
  • src/components/:React 组件目录,存放可重用的组件
  • src/containers/:容器组件目录,用于连接组件和 Redux 状态
  • src/api/:API 调用文件目录
  • src/utils/:工具函数目录,可重用的工具函数
  • src/constants/:常量目录
  • src/styles/:样式文件目录
  • src/tests/:测试文件目录
  • node_modules/:npm 包依赖
  • package.json:项目配置文件

总结来说,React 项目文件的主要作用是:

各组件、容器、views 等的文件用于编写 UI

  • service 和 api 用于和后端交互
  • constants 和 utils 用于存放一些可重用的常量与工具方法
  • routes 配置路由信息
  • styles 包含样式文件
  • tests 包含测试文件
  • public 提供 HTML 模板等静态资源

参考:容器组件

容器组件(Container Component)是 React 中的一个概念。它指的是连接 Redux state 与 UI 组件(Presentational Component)的中间件组件。
容器组件的主要作用是:

  • 从 Redux state 中读取数据
  • 分发 action 来修改 Redux state
  • 订阅 Redux state 的改变
  • 将数据和回调作为 props 传递给 UI 组件
    相比之下,UI 组件主要负责 UI 的呈现,不直接操作 Redux。
    举个例子,有这样一个 UI 组件:
// UserInfo.js
const UserInfo = (props) => {
  const { user, onSave } = props;
  return (
    
{user.name}
); }

然后,这里有一个容器组件将其连接到 Redux:

// UserInfoContainer.js 
import { connect } from 'react-redux';
import { saveUser } from '../actions/user';
import UserInfo from './UserInfo';

const mapStateToProps = (state) => ({
  user: state.user 
});

const mapDispatchToProps = (dispatch) => ({
  onSave: (user) => dispatch(saveUser(user))
});

export default connect(mapStateToProps, mapDispatchToProps)(UserInfo);

UserInfoContainer 这个容器组件将 Redux state 中的 user 数据作为 props 传给 UserInfo UI 组件。同时,它也将 saveUser action 的 dispatch 方法作为 onSave props 传下去。
所以,通过容器组件 UserInfoContainer,UserInfo UI 组件可以获取 Redux state 并触发 action,而自身不需要直接操作 Redux,只关注 UI 的呈现。
这就是 React 中容器组件和 UI 组件的区别与关系。容器组件负责与 Redux “对接”,UI 组件专注于 UI 的呈现。这种分离可以使我们的代码更加清晰易维护。

你可能感兴趣的:(react,react.js,javascript,前端)