Class based components or anonymous components? [closed]

Question

From the docs you can make two types of components.

I'm struggling to see why you would pick one over the other? As with anonymous components, you can declare data with @props.

Why would you use one implementation over the other?

Answer 1

Class base components can be thought of as being some sort of controller (invokable kind).

When there's a need for accessing a service out of the service container and process the data received as props - class based components can handle it.

In class based component, any service from Laravel's container can be injected via the constructor.

For example: Say you are defining a component to show the total before tax, discount, tax and then the final grand total. A service can be defined to lookup the tax rates and perform tax and discount calculations with specific formulae and then this service can be injected via the components constructor - anonymous component won't be a good fit here.

On the other hand say there's need to define a component for alert, the data required to be passed to the alert component would be message & type of alert. Then based on type of alert the colouring of alert component can be adjusted. Here there's no need to go for class based component as no complex processing is required.

Answer 2

It is totally optional, but I may say that when your component relies on so many data variables and calculations or queries, you should consider using the class-based component to separate the logic behind the component and the rest of your application.

As @Donkarnash said, class-based components are like Controllers.

To give an example I have a class-based component like this:

class Filters extends Component
{
    public $post_caption;
    public $image_path;

    public $filter1 ="thePathToTheFilteredImage";
    public $filter2 ="thePathToTheFilteredImage";
    public $filter3 ="thePathToTheFilteredImage";
    public $filter4 ="thePathToTheFilteredImage";
    public $filter5 ="thePathToTheFilteredImage";
    public $filter6 ="thePathToTheFilteredImage";
    public $filter7 ="thePathToTheFilteredImage";
    public $filter8 ="thePathToTheFilteredImage";
    public $filter9 ="thePathToTheFilteredImage";
    public $filter10 ="thePathToTheFilteredImage";
    public $filter11 ="thePathToTheFilteredImage";
    public $filter12 ="thePathToTheFilteredImage";
    public $filter13 ="thePathToTheFilteredImage";
    public function __construct($post_caption, $image_path)
    {}
    public function applyFilter($num)
    {}
    public function correctImageOrientation($imagepath, $effect, $newimagepath,
    $arg1, $arg2, $arg3, $arg4, $argnum)
    {}
    public function render()
    {
        return view('components.filters');
    }
}

Then I have the blade template:

<div class="max-w-4xl my-0 mx-auto">
    <div class="grid grid-cols-3 gap-4 mx-0 mt-0 mb-10">

        <div>
            <p class="text-center">{{__('original')}}</p>
            <img src="storage/{{$image_path}}" class="w-64 h-64 cursor-pointer" onClick="">
        </div>
        <div>
            <p class="text-center">{{__('filter1')}}</p>
            <img src="{{$filter1}}" class="w-64 h-64 cursor-pointer"  onClick="">
        </div>
       <div>
            <p class="text-center">{{__('filter2')}}</p>
            <img src="{{$filter2}}" class="w-64 h-64 cursor-pointer"  onClick="">
        </div>
        <div>
            <p class="text-center">{{__('filter3')}}</p>
            <img src="{{$filter3}}" class="w-64 h-64 cursor-pointer"  onClick="">
        </div>
        <div>
            <p class="text-center">{{__('filter4')}}</p>
            <img src="{{$filter4}}" class="w-64 h-64 cursor-pointer"  onClick="">
        </div>

        ....**and so on**.....
    </div>
</div>

And that's the idea.

Note: I have deleted the contents of functions and a lot of codes, this is just an example.

I was already answering the question before you got your answer, but I decided that I will continue with my answer haha