Hello everyone, my name is Liu Qing.
Hooks and Class common ground
1. Whether it is a functional component return or a class component render, they will return a reactDom node, and the usage of jsx inside is exactly the same. The difference lies in the use of the this keyword.
Second, the declaration cycle can be realized. Hooks can completely simulate the life cycle of Class.
Third, you can use props to accept the parameters passed in by the parent (whether it is a property or a callback method).
Four, ... and so on
Hooks and Class difference
1. First of all, the usage of the declaration cycle is different. The lifecycle hook of Class can be defined directly in the class and can be used directly,
but in functional components, we can only simulate the declaration cycle through the side effect function of Hooks, and useEffect can implement multiple Lifecycle hooks. You can refer to this article: The use of useEffect of functional Hooks in React
2. In terms of performance optimization: in class components, we use pure components PureComponent or shouldComponentUpdata to control the update of components.
In function component red, we can use memo to achieve shallow comparison of pure components, and we can use the two hooks useMemo and useCallback to update the components. Attributes and functions are optimized, and subcomponents need to cooperate with memo or pureComponent. You can refer to this article: The use of memo and useCallback of functional Hooks in React and the difference between useMemo and useCallback
3. There is no need to consider the problem pointed to by this in functional components;
Fourth, the method of declaring state, in Class, we can directly declare the state object in the class:
state={
name:"",
age:"",
}
Change the state in state:
this.setState({
name:"六卿",
age:18
})
In functional components, we need to use hooks to implement, useState;
you can refer to this article: Use of useState of functional Hooks in React
const [name,setName] = useState("")
const [age,setAge] = useState("")
Change the state in state:
setName("六卿")
setAge(18)
It all looks good, but once there are more variables in the state, it seems that the declaration and assignment in the form of a class is simpler. In order to solve the drawback of useState, we can use useReducer to implement the redux component. You can refer to this article: Using useReducer in Hooks to submit form data to solve the problem of using useState multiple times
In fact, there are many more. For example, the use of location and history are hooks deconstructed from react-dom. Let’s not talk about it, it’s time to work.
The above viewpoints include but are not limited to.
Other articles
1. Hooks implement toDoList
2. Hooks implement left addition and right subtraction
3. React implements adding a multi-line input box (click a row to add a row)
4. React page jump cancels all requests on the previous page
5. React cooperates with axios request interception verification session, 403 jumps to the login page
6. Hooks use createStore, Provider, useSelector, useDispatch to implement the connect function
7. Hooks use useReducer, createContext, useContext to achieve module data sharing, similar to global state management but not recommended for global management
Liuqing
见贤思齐焉，见不贤内自省