Shulou(Shulou.com)06/01 Report--

This article mainly explains the "react function components compared to class components what are the advantages", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in-depth, together to study and learn "what are the advantages of react function components compared to class components"!

The advantages of react functional components over class components are: 1, functional component syntax is shorter and simpler, which makes it easier to develop, understand and test; 2, functional component performance consumption is small, because functional components do not need to create an instance, render it on the implementation, get the returned react element and directly destroy all the intermediate amount.

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

First, class components

Class components, as the name implies, are written by using the ES6 class, which must inherit React.Component

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

You must implement the render method in the component and return the React object in return, as follows:

Class Welcome extends React.Component {constructor (props) {super (props)} render () {return Hello, {this.props.name}}

Second, function components

Function component, as its name implies, is to implement a React component in the form of function writing, which is the easiest way to define a component in React.

Function Welcome (props) {return Hello, {props.name};}

The first argument to the function is that props is used to receive the parameter passed by the parent component.

III. Differences

The differences between the two React components are mainly divided into the following major directions:

1. Writing form

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

Function components:

Function Welcome (props) {return Hello, {props.name};}

Class components:

Cass Welcome extends React.Component {constructor (props) {super (props)} render () {return Hello, {this.props.name}

2. State management

Before hooks came out, function components were stateless components and could not keep the state of the components, unlike calling setState in class components.

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

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

Count: {count}

SetCount (count + 1)} > Click);}

In the case of using hooks, if the function component calls state, you need to create a class component or state to promote to your parent component, and then pass it to the child component through the props object

3. Life cycle

In function components, there is no lifecycle because these lifecycle hooks come from inherited React.Component

So, if you use the lifecycle, you can only use class components

But functional components can also replace the life cycle by using useEffect. Here's a simple example:

Const FunctionalComponent= () = > {useEffect () = > {console.log ("Hello");}, []); return Hello,World;}

The simple example above corresponds to the componentDidMount lifecycle in the class component

If you return a function in a useEffect callback function, the return function executes when the component is unloaded, just like componentWillUnmount

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

4. Call mode

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

/ / your code function SayHi () {return

Hello, React

} / / React Internal const result = SayHi (props) / /

Hello, React

If it is a class component, you need to instantiate the component and then call the render method of the instance object:

/ / your code class SayHi extends React.Component {render () {return

Hello,React

}} / / React Internal const instance = new SayHi (props) / / SayHi {} const result = instance.render () / /

Hello, React

5. Get the rendered value

First, an example is given.

The function components correspond to the following:

Function ProfilePage (props) {const showMessage= () = > {alert ('Followed' + props.user);} const handleClick= () = > {setTimeout (showMessage, 3000);} return (Follow)}

The corresponding class components are as follows:

Class ProfilePage extends React.Component {showMessage () {alert ('Followed' + this.props.user);} handleClick () {setTimeout (this.showMessage.bind (this), 3000);} render () {return Follow}}

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

Therefore, if our component is updated when the request is run. This.props will change. The showMessage method reads the user from the "latest" props

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

Thank you for reading, the above is the content of "what are the advantages of react function components compared to class components". After the study of this article, I believe you have a deeper understanding of the advantages of react function components compared to class components, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.