What are the advantages of react function components over class components?

The advantages of react function components over class components are: 1. Function component syntax is shorter and simpler, which makes it easier to develop, understand and test; 2. Functional components have low performance consumption because functional components The component does not need to create an instance. It is executed when rendering. After getting the returned react element, all the intermediate elements are directly destroyed.

The operating environment of this tutorial: Windows7 system, react17.0.1 version, Dell G3 computer.

1. Class components

Class components, as the name suggests, are written in the form of ES6 classes. This class must inherit React.Component

If you want to access the parameters passed by the parent component, you can access them through this.props

The render method must be implemented in the component, and the React object must be returned in return. As follows:

class Welcome extends React.Component {
	constructor(props) {
		super(props)
	}

	render() {
		return <h1>Hello,{this.props.name}</h1>
	}

2. Function component

Function component, as the name suggests, is to implement a React component in the form of function writing, which is React The simplest way to define a component

function Welcome(props) {

	return <h1>Hello,{props.name}</h1>;
}

The first parameter of the function is props, which is used to receive the parameters passed by the parent component

3. Difference

For the two React components, the differences are mainly divided into the following directions:

1. Writing form

The most obvious difference between the two The difference lies in the writing form. The implementation of the same function can correspond to the writing form of class component and function component respectively

Function component:

function Welcome(props) {   
return <h1>Hello, {props.name}</h1>; 
}

Class component:

cass Welcome extends React.Component {
	constructor(props) {
		super(props)
	}

	render() {

		return <h1>Hello,{this.props.name}</h1>
	}
}

2. State management

Before hooks come out, the function component is a stateless component and cannot save the state of the component, unlike calling setState in a class component

If you want to manage state For state, you can use useState, as follows:

const FunctionalComponent=()=> {
	const [count,
	setCount]=React.useState(0);

	return (
	<div> 
	<p>count: {count}</p> 
	<button onClick= {()=> setCount(count + 1)}>Click</button> 
	</div>);
};

When using hooks, generally if the function component calls state, you need to create a class component or upgrade the state to your parent component, and then pass it to the props object through the props object. Subcomponent

3. Life cycle

In function components, there is no life cycle. This is because these life cycle hooks come from the inherited React.Component

So, if you use the life cycle, you can only use class components

But function components can also use useEffect to complete the role of replacing the life cycle. Here is a simple example:

const FunctionalComponent=()=> {
	useEffect(()=> {
		console.log("Hello");
	}

	, []);
	return <h1>Hello,World</h1>;
};

The above simple example corresponds to the componentDidMount life cycle in the class component

If you return a function in the useEffect callback function, the return function will be executed when the component is unmounted, just like componentWillUnmount

const FunctionalComponent=()=> {
	React.useEffect(()=> {
		return ()=> {
			console.log("Bye");
		};
	}
	, []);
	return <h1>Bye,World</h1>;
};

4. Calling method

If it is a function component, the call is to execute the function:

// 你的代码  
function SayHi() {
	return <p>Hello,
	React</p>
}

// React内部  
const result = SayHi(props) //  <p>Hello, React</p>

If it is a class component, the component needs to be Instantiate, and then call the render method of the instance object:

// 你的代码  
class SayHi extends React.Component {
	render() {
		return <p>Hello,React</p>
	}
}

// React内部  
const instance = new SayHi(props) //  SayHi {}  
const result = instance.render() //  <p>Hello, React</p>

5. Get the rendered value

First give an example

Function component The correspondence is as follows:

function ProfilePage(props) {
	const showMessage=()=> {
		alert('Followed '+ props.user);
	}

	const handleClick=()=> {
		setTimeout(showMessage, 3000);
	}

	return (<button onClick= {
		handleClick
	}

	>Follow</button>)
}

The class component corresponds as follows:

class ProfilePage extends React.Component {
	showMessage() {
		alert('Followed '+ this.props.user);
	}

	handleClick() {
		setTimeout(this.showMessage.bind(this), 3000);
	}

	render() {
		return <button onClick= {
			this.handleClick.bind(this)
		}

		>Follow</button>
	}
}

The two seem to have the same functions, but in the class component, this.props.user is output, and Props in React are Immutable so it never changes, but this is always mutable so that you can read the new version in render and lifecycle functions

So if our component is updated while the request is running. this.props will change. The showMessage method reads user from the "latest" props

The function component itself does not exist this, and the props do not change, so the same click, the content of the alert is still the previous content

Summary

Both components have their own advantages and disadvantages

The function component syntax is shorter and simpler, which makes it more Easy to develop, understand and test; class components can also be confusing due to extensive use of this

The performance consumption of class components is relatively large, because class components need to create instances of class components and cannot be destroyed.

Functional components have low performance consumption because functional components do not need to create instances. They are executed when rendering. After getting the returned react elements, all intermediate components are directly destroyed.

[Related recommendations: Redis video tutorial]

The above is the detailed content of What are the advantages of react function components over class components?. For more information, please follow other related articles on the PHP Chinese website!