React 16下基于相同逻辑创建差异化表单的最优方案咨询

Hey there! Let's work through this form reuse challenge you're dealing with. Since you're on React 16, we can leverage patterns that align with React's core philosophy of composition over inheritance, avoiding the headaches you ran into with inheritance chains, clunky factories, or unintuitive HOCs.

Here are the most practical approaches tailored to your scenario:

1. Custom Hooks (Highly Recommended) #

React 16.8 introduced Hooks, which are perfect for extracting and reusing stateful logic without tying it to class components. You can abstract all your core form logic (state management, validation, submission handling) into a custom hook, then let each specific form supply its unique schema, initial state, and UI.

This avoids the mapStateToProps/mapDispatchToProps issues from class inheritance, and keeps your code flat and intuitive.

Example Implementation: #

import { useState, useCallback } from 'react';
// If using Redux, import useSelector/useDispatch here

// Core reusable form logic as a custom hook
function useForm(initialState, fieldSchema, onSubmit) {
  const [formState, setFormState] = useState(initialState);

  // Universal input change handler with schema-based validation
  const handleChange = useCallback((fieldName, value) => {
    const isValid = fieldSchema[fieldName]?.validator?.(value);
    setFormState(prev => ({
      ...prev,
      [fieldName]: { value, isValid }
    }));
  }, [fieldSchema]);

  // Universal submit handler with full-form validation
  const handleSubmit = useCallback((e) => {
    e.preventDefault();
    const isFormValid = Object.values(formState).every(field => field.isValid !== false);
    
    if (isFormValid) {
      onSubmit(formState);
    }
  }, [formState, onSubmit]);

  return { formState, handleChange, handleSubmit };
}

// Specific Login Form (only handles unique parts)
function LoginForm() {
  // Unique schema and initial state for login
  const loginSchema = {
    email: { validator: val => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val) },
    password: { validator: val => val.length >= 6 }
  };
  const initialState = {
    email: { value: '', isValid: null },
    password: { value: '', isValid: null }
  };

  // Reuse core logic via the hook
  const { formState, handleChange, handleSubmit } = useForm(
    initialState,
    loginSchema,
    (formData) => {
      // Unique submit action (e.g., dispatch Redux login action)
      console.log('Logging in with:', formData);
    }
  );

  // Unique UI rendering
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Email</label>
        <input
          type="email"
          value={formState.email.value}
          onChange={(e) => handleChange('email', e.target.value)}
        />
        {!formState.email.isValid && <span>Please enter a valid email</span>}
      </div>
      <div>
        <label>Password</label>
        <input
          type="password"
          value={formState.password.value}
          onChange={(e) => handleChange('password', e.target.value)}
        />
        {!formState.password.isValid && <span>Password must be at least 6 characters</span>}
      </div>
      <button type="submit">Login</button>
    </form>
  );
}

// Another Specific Form (e.g., Registration)
function RegisterForm() {
  // Unique schema/state for registration
  const registerSchema = {
    name: { validator: val => val.length >= 2 },
    email: { validator: val => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val) },
    password: { validator: val => val.length >= 6 }
  };
  const initialState = {
    name: { value: '', isValid: null },
    email: { value: '', isValid: null },
    password: { value: '', isValid: null }
  };

  const { formState, handleChange, handleSubmit } = useForm(
    initialState,
    registerSchema,
    (formData) => {
      console.log('Registering with:', formData);
    }
  );

  // Unique UI with extra name field
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Full Name</label>
        <input
          type="text"
          value={formState.name.value}
          onChange={(e) => handleChange('name', e.target.value)}
        />
        {!formState.name.isValid && <span>Name must be at least 2 characters</span>}
      </div>
      {/* Reuse email/password UI if needed, or render as-is */}
      <div>
        <label>Email</label>
        <input
          type="email"
          value={formState.email.value}
          onChange={(e) => handleChange('email', e.target.value)}
        />
        {!formState.email.isValid && <span>Please enter a valid email</span>}
      </div>
      <div>
        <label>Password</label>
        <input
          type="password"
          value={formState.password.value}
          onChange={(e) => handleChange('password', e.target.value)}
        />
        {!formState.password.isValid && <span>Password must be at least 6 characters</span>}
      </div>
      <button type="submit">Register</button>
    </form>
  );
}

Why this works for you: #

• No class inheritance mess: Logic is decoupled from UI, so mapStateToProps/mapDispatchToProps (if using Redux) can be handled directly in the hook or specific components without conflicts.
• No factory instantiation overhead: Hooks are called directly in components, keeping code aligned with React's component model.
• Intuitive separation: Core logic lives in the hook, while unique schema/UI stays in each form component.

2. Composition + Configuration Objects #

If your forms have very minimal UI differences, you can create a reusable base form component that accepts configuration props (like field definitions, submit text, etc.) to render unique variations. This is great when UI follows a consistent pattern but needs small tweaks.

Example Implementation: #

function BaseForm({ fields, initialState, submitText, onSubmit }) {
  const [formState, setFormState] = useState(initialState);

  const handleChange = useCallback((fieldName, value) => {
    const field = fields.find(f => f.name === fieldName);
    const isValid = field?.validator?.(value);
    setFormState(prev => ({
      ...prev,
      [fieldName]: { value, isValid }
    }));
  }, [fields]);

  const handleSubmit = useCallback((e) => {
    e.preventDefault();
    const isFormValid = Object.values(formState).every(field => field.isValid !== false);
    if (isFormValid) onSubmit(formState);
  }, [formState, onSubmit]);

  return (
    <form onSubmit={handleSubmit}>
      {fields.map(field => (
        <div key={field.name}>
          <label>{field.label}</label>
          <input
            type={field.type || 'text'}
            value={formState[field.name].value}
            onChange={(e) => handleChange(field.name, e.target.value)}
          />
          {!formState[field.name].isValid && <span>{field.errorMessage}</span>}
        </div>
      ))}
      <button type="submit">{submitText}</button>
    </form>
  );
}

// Usage in Login Form
function LoginForm() {
  const loginFields = [
    {
      name: 'email',
      label: 'Email',
      type: 'email',
      validator: val => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val),
      errorMessage: 'Invalid email'
    },
    {
      name: 'password',
      label: 'Password',
      type: 'password',
      validator: val => val.length >= 6,
      errorMessage: 'Password must be at least 6 characters'
    }
  ];

  return (
    <BaseForm
      fields={loginFields}
      initialState={{
        email: { value: '', isValid: null },
        password: { value: '', isValid: null }
      }}
      submitText="Login"
      onSubmit={(data) => console.log('Login:', data)}
    />
  );
}

Key Takeaways #

• Avoid class inheritance in React: It leads to tight coupling and conflicts with Redux's connect function, as you discovered.
• Custom Hooks are the most flexible option here: They let you reuse stateful logic without wrapping components (unlike HOCs) and keep your code clean.
• Composition with config objects works great for highly standardized forms with small variations.

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