Original text: medium.com/js-dojo/vue…

Important: If your component doesn’t need to be stateful, turn it into a functional component to improve rendering performance by 70%

What – What is a functional component?

Functional Component (not to be confused with Vue’s Render function) is a component that holds no state and has no instance.

In plain English, this means that the component does not support an equation and cannot be referred to itself with the this keyword.

Template-based functional components

Functional components based on the Render function

Accessing component properties

You’re bound to wonder how you can reference something like data or methods without a state or instance. Fortunately, Vue provides a context parameter in Render (), which is an object with the following properties:

  • props: Provides objects for all prop
  • children: An array of VNode children
  • slots: a function that returns an object containing all slots
  • scopedSlots(2.6.0+) an object that exposes the incoming scope slot. Normal slots are also exposed as functions.
  • data: The entire data object passed to the component, ascreateElementThe second parameter is passed to the component
  • parent: a reference to the parent component
  • listeners(2.3.0+) An object containing all event listeners registered by the parent component for the current component. This is adata.onAn alias for “.
  • injections(2.3.0+) If usedinjectOption, the object contains the property that should be injected.

Accessing the context parameter is fairly simple. For example, if you want to get attributes, you can:

Access the context in the template

Access the context in the render function

📌 Functional components and properties:

In a functional component, you don’t actually have to explicitly declare the props to accept again. However, once you explicitly declare props, these properties will be validated against this. I personally prefer to do this so that you can specify its type, required, default, or custom validator, etc.

Why – Functional components are interesting?

Functional components make accessing components a bit of a hassle and introduce some complexity, so why bother?

Come on!

Because functional components have no state, there is no need for additional initialization for Vue reactive systems.

While it still reacts to new props and so on, the component itself doesn’t know when its data changes because it doesn’t maintain its own state.

For metrics enthusiasts, I also did a performance test: render 1000 long lists with stateful components and functional components in 140ms and 40ms, respectively.

When – When to use functional components?

Functional components are not a panacea. After all, using a JavaScript framework to build application diagrams is all about being more reactive. At this point, Vue’s reactive system is still irreplaceable.

However, there are still some use cases where functional components can come in handy:

  • Components with particularly simple explicit logic are also called “dumb” components. Buttons, cards, labels, and even purely static “About” pages.
  • A high-level component that is used to wrap a template markup or enrich the basic functionality of another component.
  • Whenever you find yourself stuck in a loop rendering (V-for), its traversal objects tend to apply to functional components

The derived value

I did find a small problem with that particular scene. When using the

Using standard Vue components, methods or computed, this is a breeze. But for functional components, these two are not available.

Not without a solution.

Take the classic fullName example. In a function

“Computed properties” in functional components

Other problems

Some in the community have found that when nested functional components with scoped slots behave incorrectly github.com/vuejs/vue-l…

conclusion

If you are concerned about performance, or if you are developing large applications, consider using functional components. A trivial learning curve will yield huge performance gains.

Further reading

  • Controlled and uncontrolled components in React
  • React dumb and Smart components
  • Deep dive into React higher-order components






–End–






View more front-end good article please search fewelife concern public number reprint please indicate the source