react

The applyMiddleware of Redux middleware is designed to extend the functionality of Dispatch by allowing dispatch to accept only one object as an argument without middleware, and middleware can make it accept a function/promise

React: hooks

React’s core idea is to split pages into reusable components and connect them in a one-way data flow from top to bottom. Traditional class-defined components contain many state states and are difficult to reuse. Both methods can enhance components, but the code is not neat and has increased the level of nesting between components

React Render props

Pass a render property to the component. The value of this property is a function that returns a component that calls the render component when it renders, using the this.props. Render () method. This method can dynamically transfer values and enhance component reusability

React Advanced components

A higher-order component is not really a component, but a function that takes a component as an argument, modifies it and returns a new component. High-order components can enhance the reusability of components. Abstract property proxy for logic: starts from the composite way, which is beneficial to operate components from the outside. It can operate functions in reverse inheritance: it operates components in an inherited way, and operates the internal state lifecycle render function

Ref can only be declared on class components, not functional components, which have no instances

Class components Functional components

Class components are insufficient: 1. Components with low reusability have many states; 2. It is difficult to maintain many irrelevant logic and many state states in their life cycle

react context

Context To solve the problem of transferring values between components, it is very inconvenient to use props to transfer values between components if there are many layers. There is no need to pass the context layer by layer through the component tree so that all descendant nodes can obtain the shared data