React has two types of Components: Functional Components and Class Components. According to my observation, most of my classmates are used to using class components, and seldom actively write function components, including myself. In reality, however, the two types of components are quite different in usage scenarios and functionality implementations.

Let’s look at an example of a function component:

function Welcome = (props) = >{
  const sayHi = (a)= > {
    alert(`Hi ${props.name}`);
  }

  return (
      <div>
        <h1>Hello, {props.name}</h1>
        <button onClick ={sayHi}>Say Hi</button>
      </div>)}Copy the code

Rewrite the above function component as a class component:

import React from 'react'

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.sayHi = this.sayHi.bind(this);
  }

  sayHi() {
    alert(`Hi The ${this.props.name}`);
  }

  return (
      <div>
        <h1>Hello, {props.name}</h1>
        <button onClick ={sayHi}>Say Hi</button>
      </div>)}Copy the code

Let’s examine the differences between the two implementations:

  1. The first obvious difference is that a function component has less code than a class component, so it is more concise than a class component. Never underestimate this, and it’s still important to us as extreme programmers.

  2. The function component looks like a function that returns a DOM structure, but behind it is the idea of Stateless Components. In function Components, you can’t use State or lifecycle methods of the component, which makes function Components Presentational Components that receive Props and render the DOM without any other logic.

  3. There is no this in the function component. So you don’t need to worry about this anymore. In class components, you still have to remember the trivial matter of binding this. Like sayHi in the example.

  4. Function components are easier to understand. When you see a function component, you know that its function is just to receive properties, render pages, it doesn’t do any uI-independent logic, it’s just a pure function. Regardless of the complexity of the DOM structure it returns.

  5. Performance. React still internally converts function components to class components, so there is no significant performance difference between using function components and using class components. However, React has promised to optimize the performance of function components in the future, because function components don’t need to consider component state and various comparison checks in component lifecycle methods, so there’s a lot of room for performance improvements.

  6. Functional components force you to think about best practices. This is the most important point. A component’s primary responsibility is UI rendering, and ideally all components are presentable components from which every page is composed. If a component is a functional component, then it certainly satisfies this requirement. So keeping the concept of functional components in mind allows you to think about whether or not a component should be a presentation component when you write it. More presentation components means more components with a cleaner structure, and more components can be reused better.

So, the next time you write a component, don’t ignore function components. Use them as often as possible.