In front-end development, the key to achieving component reuse lies in the rational application of the design model. 1. Use advanced components (HOCs) to encapsulate general logic, such as data acquisition, permission verification, etc., to implement logical reuse through function wrapping components, but excessive nesting should be avoided; 2. Use custom Hooks to manage state logic, such as form processing, to improve logical reuse and code readability; 3. Use Compound Components to build composite components, and enhance flexibility and structural clarity through free combination of subcomponents; 4. Use Render Props mode to pass behavior and state, suitable for scenarios where highly customized renderings are required. These design patterns can be flexibly selected according to project needs and team habits to improve the maintainability and development efficiency of components.

In front-end development, component reuse is one of the key goals to improve development efficiency and maintenance. However, to truly realize "write once and use multiple uses", componentization alone is not enough, and it is also necessary to reasonably apply the design pattern to organize the code structure. Here are some common and practical design patterns that can help you better build reusable front-end components.

Encapsulation of general logic using advanced components (HOCs)

A higher-order component is a function that takes a component and returns a new component. This mode is very suitable for extracting some logic that is not related to the UI but is frequently used, such as data acquisition, permission verification, form verification, etc.

For example, if you have a set of page components that need to check whether the user is logged in first, you can write a HOC withAuth :

 function withAuth(WrappedComponent) {
  return function AuthenticatedComponent(props) {
    const isAuthenticated = checkAuth();

    if (!isAuthenticated) {
      return <Redirect to="/login" />;
    }

    return <WrappedComponent {...props} />;
  };
}

In this way, any component that requires authentication can be used through this HOC package without having to repeat the judgment logic. Note that HOCs should not be over-necked, otherwise it will cause component levels to be too deep, affecting debugging and performance.

Manage status logical reuse using custom Hooks

React's custom Hook is a more modern and lighter way of state logic reuse, suitable for encapsulating state management logic inside components.

For example, a custom Hook that processes form input can be like this:

 function useForm(initialValues) {
  const [values, setValues] = useState(initialValues);

  const handleChange = (e) => {
    setValues({
      ...values,
      [e.target.name]: e.target.value,
    });
  };

  return { values, handleChange };
}

Then use this Hook in multiple form components to avoid repeated writing of onChange and state initialization logic. This method is more intuitive than HOC and is easier to combine multiple functions.

Build flexible composite components with Compound Components

Compound Components is a good choice when you want a component to be composed of multiple subcomponents and allow users to collaborate freely.

For example, a drop-down menu component <Dropdown> can contain subcomponents such as <Dropdown.Button /> , <Dropdown.Menu /> and <Dropdown.Item /> . They share internal states, but they render independently.

The state can be shared through React's Context on implementation, and displayName or type detection can be used to ensure that the child components can only be used inside the parent component.

The benefits of this model are: the component structure is clear, the exposed API is flexible, and users can freely combine subcomponents as needed.

Pass behavior and state using Render Props mode

Render Props is another way to share state and behavior across components. Its core idea is to pass in a function through props, letting the component decide how to render the content.

For example, a component used to track the mouse position can be designed like this:

 class MouseTracker extends Component {
  state = { x: 0, y: 0 };

  handleMouseMove = (e) => {
    this.setState({ x: e.clientX, y: e.clientY });
  };

  render() {
    Return (
      <div onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}

When using:

 <MouseTracker render={({ x, y }) => <p>Coordinates: {x}, {y}</p>} />

Although this method is not as intuitive as the Hook, it is still useful in some scenarios, especially when highly customized renderings are required.

Basically that's it. Different project sizes and team habits may tend toward different patterns, but the key is to understand the scenarios and the ideas behind each pattern. Choosing the right mode can make components more flexible and easier to maintain, and can also reduce the problems caused by duplicate code.

The above is the detailed content of Frontend Design Patterns for Component Reusability. For more information, please follow other related articles on the PHP Chinese website!