Contrast a class component with a functional component

The biggest difference is that the class component has this and the function component this is undefined. If this is undefined, there is no this.state,this.ref.

  • advantages

A class component can define its own state to hold the internal state of the component, whereas a functional component cannot, because a new temporary variable is created each time the function is called.

Class components have a life cycle that completes certain logic in the corresponding life cycle, sending a request in componentDidMount, and that life cycle is only executed once, whereas sending a request in a function means sending a request every time you re-render.

When a class component changes state, only the render function and some life cycles are re-executed. When a functional component is re-rendered, the entire function is re-executed.

  • disadvantages

Complex components are difficult to understand It is difficult to split class components by forcing them to split causes excessive design and increases code complexity

It is difficult to reuse state of components. There are many nested states shared by providers and consumers, and state reuse is usually through higher-order components.

Functional components use props

useState

(1). State Hook Allows function components to also have State and perform read and write operations on State data (2). Const [XXX, setXxx] = react.usestate (initValue) (3).usestate () const [XXX, setXxx] = react.usestate (initValue) (3).usestate () An array of two elements, the first being the internal current state value and the second being the function that updates the state value (4). SetXxx () SetXxx (value => newValue): The argument is a function, which receives the original state value, returns the new state value, and internally overwrites the original state valueCopy the code

useEffect

(1).effect Hook allows you to perform side effects in function components (used to simulate the lifecycle hooks in class components) (2).React Side effects: send Ajax requests to fetch data set subscribe/start timer manually change the real DOM (3). Syntax and instructions: UseEffect (() => {return () => {return () => {return () => {return () => {return () => {return () before component uninstalls // Do some finishing work here, such as clear timer/unsubscribe, etc.}}, [stateValue]) // If [] is specified, [XXX, YYy] [componentDidMount/componentDidUpdate] [/ XXX, YYy] [/ XXX, YYy] [/ XXX, YYy] [/ XXX, YYy (4). UseEffect Hook: componentDidMount() componentDidUpdate() componentWillUnmount()Copy the code

useContext

So let’s go back and use context

Using useContext

useReducer

  • UseReducer is only an alternative to useState. In some scenarios, if the processing logic of state is complicated, you can use useReducer to split it.

  • It can also be used when the modified state needs to depend on the previous state.

UseCallback (for functions)

  • Passing the inline callback function and the array of dependencies as arguments to useCallback returns the Memoized version of the callback function, which is updated only when a dependency changes. This is useful when you pass callback data to child components that are optimized and use reference equality to avoid unnecessary rendering (such as shouldComponentUpdate).

  • Usage scenario: When a function in a component is passed to a child component for callback, UseCallback is used to process the function for performance optimization.

UseMemo (for return value)

Application of complex computation

Pass child component reference types

  • You pass in the create function and the dependency array as arguments to useMemo, which recalculates memoized values only when a dependency changes. This optimization helps avoid costly calculations every time you render.

useRef

(1). The Ref Hook can store/find tags or any other data in the function component (2). Syntax: const refContainer = useRef() (3). React.createref () saves the label objectCopy the code

useImperativeHandle

UseImperativeHandle allows you to customize the instance value exposed to the parent component when using a ref. In most cases, imperative code like ref should be avoided. UseImperativeHandle should be used together with the forwardRef.

useLayoutEffect

There is only one difference between useLayoutEffect and useEffect:

  • UseEffect is executed after the rendered content is updated to the DOM and does not block DOM updates.

  • UseLayoutEffect is executed before the rendered content is updated to the DOM, blocking the DOM update.

  • If we want to update the DOM after some operation has occurred, we should put that operation in useLayoutEffect.

Custom Hooks

Custom Hooks are a function (2). Their names begin with use (3). Use only the outer layer of the function. Do not use loops, condition checks, or child functions. You can only call a Hook in a function component of React, not in any other JS function.Copy the code