What is the difference between function components and class components? If you have a basic understanding of React Hooks, here let’s put React Hooks aside and answer this question. Your answer is that function components do not have their own state, nor do they have a lifecycle concept similar to class components? In this section, we will not discuss state and life cycles. Let’s first look at an example of a function call, the code is as follows:
function getName(params: {name: string}) {
const count = 0
return + '-' + count
}
getName({name: 'He Yu'})
getName({name: 'Bella'})getName is a pure function that does not cause any side effects. When the execution is over, its execution context and active object will be destroyed, and the first and last two calls will not affect each other. It is also a pure function for function components that do not use any Hooks. So can you draw a similar conclusion to calling the getName function twice before and after the function component renders it?
To compare the difference between function components and class components, the following uses class components and function components to achieve the same function, that is, display a button in the browser, click the button to call the method in props to update the state of the parent component, and print the value after 1s. The code of the class component is as follows:
class ClassCom extends <Props, never> {
render(): {
return (
<button onClick={}>This is a class component：Refresh the browser and open the developer tool and click</button>
)
}
onClick = () => {
()
// The value printed after 1s setTimeout(() => {
()
}, 1000);
}
}
The code of the function component is as follows:
function FuncCom(props: Props) {
const onClick = () => {
()
// The value printed after 1s setTimeout(() => {
()
}, 1000);
}
return (
<button onClick={onClick}>This is a function component：Refresh the browser and open the developer tool and click</button>
)
}The parent of FuncCom and ClassCom components is the same, and the code is as follows:
class FuncComVsClassCom extends <{},State> {
state: State = {count: 0}
render(): {
return (
<>
<FuncCom
count={}
updateCount={}
/>
<ClassCom
count={}
updateCount={}
/>
</>
)
}
updateCount = () => {
((prevSate: State) => {
return {count: + 1}
})
}
}By observing the above code, you can find that the props passed to FuncCom and ClassCom components are the same, but when clicking the respective buttons on the browser interface, the results of the developer tools are different. The value printed by the FuncCom component is 0, and the value printed by the ClassCom component is 1.
Now that the answer is revealed, clicking the buttons in the FuncCom and ClassCom components will re-render their parents, causing FuncCom and ClassCom to re-render. ClassCom is a class component. It re-renders will not create a new component instance and gets the latest value in the setTimeout callback function. FuncCom is a function component, which re-renders will create new execution environment and activity variables, so when you access props, you will get the parameters passed to it when FuncCom is called, which is immutable.
FuncCom and ClassCom components print different values because props are immutable but class component instances are mutable, and access will always get the latest props of the class component. Assigning the value of ClassCom to a variable. In the setTimeout callback function, accessing the count property with this variable can allow the two components to print the same value.
When introducing React Hooks in the future, we will continue to introduce that the function components only get the values of props and state during this rendering.
This is the article about this article about the function components of React. For more related React function components, please search for my previous article or continue browsing the related articles below. I hope you will support me in the future!