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

In this article Xiaobian for you to introduce in detail "what is the difference between React functional components and class components", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "what is the difference between React functional components and class components" can help you solve your doubts.

Distinguish function component life cycle no this no state no change stateReact Hooks:useStatethis.setState () high performance (no instantiation) low (need to instantiate) other differences

ProfilePageClass.js

Import React from 'react';class ProfilePageClass extends React.Component {showMessage = () = > {alert (' Folloed' + this.props.user);}; handleclick = () = > {setTimeout (this.showMessage,3000);}; render () {return Follow}} export default ProfilePageClass

ProfilePageFunction.js

Import React from 'react';function ProfilePageFunction (props) {const showMessage = () = > {alert (' Followed'+ props.user);} const handleClick = () = > {setTimeout (showMessage,3000);} return (Follow)} export default ProfilePageFunction

Home.js

Import React from "react"; import ProfilePageFunction from'. / ProfilePageFunction';import ProfilePageClass from'. / ProfilePageClass';class Home extends React.Component {state = {user: 'Dan',} Render () {return (Choose profile to view: this.setState ({user: e.target.value})} > Dan Sophie Sunil Welcome to {this.state.user}'s profile!

(function component)

(class component)

Can you spot the difference in the behavior?

)} export default Home

The page is displayed:

Find the problem by doing the following: (the initial user is Dan)

1. Click the Follow button

Switch the selected account within 2.3s

3. View the pop-up text.

Click the Follow of the function component:

Click the Follow of the class component:

When you click the Follow button of the piece, execute handleClick (), and the user's name is displayed 3s later.

Function component: if you switch users within 3s of clicking the Follow button, the output of the function called after 3s is still not the previous user name.

Class component: if you switch users within 3s of clicking the Follow button, the output of the function called after 3s is the changed user name.

At this point, there is a problem with the class component: my previous handleClick () performs the operation of user A, but the operation has not been performed yet. after switching users, it is directly called to perform the same operation of user B.

In this case, when the state of the parent component changes, the child component renders and the props of the child component changes

Class components:

By changing the props (Dan-Sophie), the class component also changes the value and is always consistent.

Reason: the class component captures the latest value (always consistent) when the props property of the instance is modified, the class component directly uses this (the instance of the component), so you can directly get the latest props of the component.

Functional components: functional components capture the values used for rendering.

When I change the props (Dan- > Sophie), you will find that the function component will render the name of the previous value Dan.

Reason: functional components capture the values used in rendering. In the function component, the previous props parameters have been saved in memory because of the nature of the javascript closure and cannot be modified externally (maintaining the state of multiple individuals). So when the timer executes callback, the old value is printed.

With Hooks, the same principle applies to state. Look at this example:

MessageThread.js

Import {useState} from 'react';function MessageThread () {const [message, setMessage] = useState (''); const showMessage = () = > {alert ('You said:' + message);}; const handleSendClick = () = > {setTimeout (showMessage, 3000);}; const handleMessageChange = (e) = > {setMessage (e.target.value);} Return (Send);} export default MessageThread

Illustrates the same point: if I send a particular message, the component should not be confused about which message is actually sent. The message variable of this function component captures the rendering that "belongs" to the click handler that is called by the browser.

So when I click "send", message is set to what I typed in input at that moment.

In functional components, you can also have a variable that is shared in all components rendered frames, which is called "ref". Ref can read the current value at any time.

You need to manage it manually.

Import React, {useState, useEffect, useRef} from "react"; import ReactDOM from "react-dom"; function MessageThread () {const [message, setMessage] = useState (''); / / Keep track of the latest value. Const latestMessage = useRef (''); useEffect (() = > {latestMessage.current = message;}); const showMessage = () = > {alert ('You said:' + latestMessage.current);}; const handleSendClick = () = > {setTimeout (showMessage, 3000);}; const handleMessageChange = (e) = > {setMessage (e.target.value);} Return (Send);} export default MessageThread

After reading this, the article "what is the difference between React functional components and class components" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it before you can understand it. If you want to know more about related articles, welcome to follow the industry information channel.

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.