The difference and description of React function components and class components

The difference between React function components and class components

There are two requirements to define a component:

• Component names must start with capital letters
• The return value of the component can only have one root element

Function Components

function Welcome (props) {
  return <h1>Welcome {}</h1>
}
(<Welcome name='react' />, ('root'));

The function component receives a single props object and returns a React element

Class Components

class Welcome extends  {
  render() {
    return (
      <h1>Welcome {  }</h1>
    );
  }
}
(<Welcome name='react' />, ('root'));

• Whether it is using a function or a class to declare a component, it must never modify its own props.
• All React components must be pure functions and prohibit modification of their own props.
• React is a single-item data flow, and the parent component changes the properties, and the child component view will be updated.
• Properties props are passed from the outside world, state state is the component itself, and state can be modified arbitrarily in the component
• The component's properties and state changes will update the view.

the difference

Of course, there is a difference between function components and class components, and the performance of function components is higher than that of class components, because class components need to be instantiated when used, and function components can directly execute the function to get the return result. To improve performance, try to use function components.

Pros and cons of React functional components and class components

1. The performance consumption of class components is relatively large

Because class components need to create instances of class components and cannot be destroyed.

2. Functional components consume little performance

Because functional components do not need to create instances, they will execute them during rendering, and after obtaining the returned react element, they will directly destroy all the intermediate quantities.

Functional components cannot have state, but now with react hooks, they may also have state.

The above is personal experience. I hope you can give you a reference and I hope you can support me more.