如何拆分React逻辑密集型组件？架构相关疑问探讨

Great question—this is such a common pain point when building complex React UIs, especially with GraphQL. Let’s break down your questions and walk through actionable solutions.

1. Do we need a component just to support the presentation component with logic? #

Absolutely—but you don’t have to use a separate component for this. Two patterns work really well here:

Custom React Hooks (My Top Pick) #

Extract all your initialization logic (data fetching, permission checks, derived values) into a reusable custom hook. This keeps your presentation component clean and focused solely on rendering UI.

For your MyForm example, create a useMyFormLogic hook to encapsulate all the heavy lifting:

// useMyFormLogic.js
import { useTranslation } from 'react-i18next';
import { useCurrentUser } from '../hooks/useCurrentUser';
import { useCycle } from '../hooks/useCycle';

export const useMyFormLogic = ({ isCreating, permissions, otherPermissions }) => {
  const { t } = useTranslation();
  const currentUser = useCurrentUser();

  // Calculate permission-related values
  const canUpdateFields = isCreating || (permissions?.update);
  const canUpdateContributors = isCreating || (permissions?.updateContributors);
  const canReassignResponsible = isCreating || (permissions?.reassignResponsible);
  const canUpdateWeight = isCreating || (otherPermissions?.updateWeight);
  const canShowContributorsInput = isCreating || (permissions?.showContributorsInputOnForm);

  return {
    t,
    currentUser,
    canUpdateFields,
    canUpdateContributors,
    canReassignResponsible,
    canUpdateWeight,
    canShowContributorsInput
  };
};

Now your presentation component becomes lean and easy to read:

// MyForm.js
import { useMyFormLogic } from './useMyFormLogic';

const MyForm = ({ onSubmit, initialValues, children, loading, isCreating, cycleId, permissions, otherPermissions, showWeightBalance, balance, }) => {
  // Pull in all logic from the custom hook
  const { t, currentUser, canUpdateFields, canUpdateContributors, canReassignResponsible, canUpdateWeight, canShowContributorsInput } = useMyFormLogic({ isCreating, permissions, otherPermissions });
  const cycle = useCycle({ id: cycleId }); // You could even move this into the hook if it's core to the form logic

  // Render JSX (unchanged, but now uses values from the hook)
  return (
    <Form
      initialValues={{
        name: {},
        description: {},
        type: { kind: kind.NUMBER, direction: direction.ASC, },
        baseValue: null,
        target: null,
        unit: null,
        weight: 1,
        progressCalculus: false,
        responsible: null,
        contributors: [],
        tasks: [],
        scale: null,
        ...initialValues,
      }}
      onSubmit={onSubmit}
      key={JSON.stringify(initialValues)}
    >
      {/* ... rest of your JSX, using the hook's values ... */}
    </Form>
  );
};

export default MyForm;

Container Components #

If you prefer a strict separation between logic and UI, use a container component to handle all data fetching and logic, then pass ready-to-use props to a stateless presentation component.

Example:

// MyFormContainer.js
import { useMyFormLogic } from './useMyFormLogic';
import { useCycle } from '../hooks/useCycle';
import MyFormPresentation from './MyFormPresentation';

const MyFormContainer = (props) => {
  const logicValues = useMyFormLogic(props);
  const cycle = useCycle({ id: props.cycleId });

  // Pass all necessary values to the presentation component
  return (
    <MyFormPresentation
      {...props}
      {...logicValues}
      cycle={cycle}
    />
  );
};

// MyFormPresentation.js (pure UI component)
const MyFormPresentation = ({ t, currentUser, canUpdateFields, cycle, ...props }) => {
  // Only handle rendering here—no logic!
  return (
    <Form {/* ... */}>
      {/* ... all your JSX, using the incoming props ... */}
    </Form>
  );
};

2. Should logic live in components or the GraphQL API? How to manage coupling? #

This depends entirely on the type of logic:

When to Move Logic to GraphQL #

• Cross-platform business rules: If the same logic is used by multiple clients (web, mobile, etc.), let the API handle it to ensure consistency. For example, permission checks like canUpdateFields could be computed server-side and returned as part of the GraphQL response.
• Complex data aggregation: If you need to combine multiple data sources or perform calculations that rely on server-only data, let the API do the work. For example, calculating progress bar percentages could be done in a resolver.
• Redundant frontend logic: If you find yourself repeating the same data transformation across multiple components, move it to the API to avoid duplication.

When to Keep Logic in Frontend Components/Hooks #

• UI-specific derived values: Logic tied directly to how the UI renders (e.g., "show this section if X prop is true") belongs in the frontend.
• Local state interactions: Logic that interacts with component state (like form field updates) should stay in the frontend.
• Client-only data: Things like user preferences (theme, font size) stored locally don’t belong in the API.

Managing GraphQL-React Coupling #

• Keep presentation components data-agnostic: Components should receive ready-to-use props, not raw GraphQL data. Use hooks or containers to transform responses into UI-friendly values.
• Avoid over-fetching: Use GraphQL fragments to request only the fields your component needs. This reduces the amount of data you have to process in the frontend.
• Separate data fetching from rendering: Use useQuery/useMutation in custom hooks or containers, not directly in presentation components. This makes it easier to swap data sources if needed later.

Key Boundaries to Stick To #

• Presentation components: Only render JSX based on props. No data fetching, no business logic—just UI.
• Logic layer (hooks/containers): Handle data fetching, state management, derived values, and business rules. This is where you interface with GraphQL.
• GraphQL API: Handle server-side business rules, data aggregation, and ensure consistency across clients.

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