Table of contents:
1 React performance optimization SCU (important)
2 Get DOM way refs
3 Controlled and uncontrolled components (important)
4 Higher-order components of React (see if you use it or not)
5 portals and fragments
6 StrictMode strict mode
1. React performance optimization SCU (important)
The figure above shows that the update method of the diff algorithm is cross-city comparison, and the algorithm complexity is O(n^2), while react optimizes the algorithm and becomes non-cross-layer comparison, and the complexity is O(n).
The key is used for the multiplexing of the DOM by the diff algorithm
The value obtained from the server for the key is preferably id
Note here: Even if the variable changed by setState is the same as the original value, the render function will be executed, and the render of the subcomponent will also be executed. This is meaningless re-rendering, but we write shouldComponentUpdate(){ in the subcomponent return false}, the subcomponent will never be updated, and it doesn't make sense. Therefore, it is necessary to master the parameter judgment method of the shouldComponentUpdate method and optimize the update performance .
Note here that the position of the parameter is fixed. You can’t just write a newState and feel that you can use the desired newState. shouldComponentUpdate (newState), in fact, you can only get the value of nextProps.
For multiple variable updates:
This SCU optimization has an obvious shortcoming, that is, if the variable changed by the parent component is passed to the child component, the child component must judge the change of nextProps to allow the re-rendering of the render, and when there are more variables, the judgment conditions are also It will become huge , causing the parent component and child components to use SUC for performance optimization, then react will become very troublesome to use , the solution is to use the PureComponent component in the figure below .
Only class components can use PureComponent, because inheritance is required, and function components cannot be used.
The method of use is to replace the inherited Component with PureComponent , and change the imported Component to PureComponent . After inheritance, you don’t need to write complex SCU judgments, and you can achieve rendering only when meaningful variable changes occur. Subcomponents also need to inherit this component so that re-rendering occurs when the variables passed by the parent component change.
PureComponent also has a disadvantage, that is, it only does shallow comparison, that is, compares whether the objects in the first layer are the same, and does not compare in the deep layer. That is to say, it only compares whether the variables in the state are replaced (such as books, friends, and messages in the figure below), and does not compare the changes in the values in the object type and array type. (When the name, price, etc. in the books object in the figure below change, they will not be found to change.)
PureComponent doing this is equivalent to doing this
Question: Why is it possible to find variable changes and re-render the render by using setState to update the value of the state in the figure below, but it cannot be updated in PureComponent?
The reason is that the this.state.books in PureComponent's this.state.books and setState in the figure below point to the same same books, but the content inside has changed (it is only a shallow comparison), and there is no replacement, so it does not change. this.state.books.push changes the value of the object, but does not change the object reference address, so there is no way to trigger the re-rendering of PureComponent. The setState we use is generally changed by replacing the stae object (the object reference address is different), so the state must have changed.
Since function components cannot inherit PureComponent , if you want to use the similar functions of PureComponent , you have to use the high-order function memo in the figure below , and the usage method is as follows:
Immutable power:
That is to say, the value in the state should not be modified directly, but the value of the state must be changed through the method of setState, and the purpose of doing this is to allow you to update it in the component that inherits PureComponent, even if the method in the figure below changes the value of the state , but because the value of the state is directly modified, the re-rendering of the render cannot be triggered in the PureComponent component, because the reference address mentioned above has not changed. At this time, it should be written as shown in the figure below so that the re-rendering of the render can be triggered in the PureComponent component without
directly modifying the state variable . What is shown here is to add data in the array. A substitution has occurred.
2. Get DOM way refs
ref to obtain DOM method 1: (not recommended)
ref to obtain DOM method two: (recommended)
ref to get the DOM three ways: (understand)
Called immediately when the component is mounted:
Save it to the constructor for use in js code:
ref Gets a class component instance: (As long as the component instance can be obtained, the instance method and function in the component can be called; the functional component has no instance, and cannot be implemented using the method shown in the figure below)
When you need to bind a functional component, it is usually to bind a certain element DOM. The functional component has no instance, so the instance object cannot be bound. The method is to use the high-order function forwardRef, here is the knowledge in the later high-order function, ref forwarding, extract the ref through the high-order function, and bind it to the element.
3. Controlled and uncontrolled components
With value added, the input components of check are all controlled components and are managed by react. So if you want to use uncontrolled components, you can't add value and check attributes, you have to use defaultValue and defaultCheck to set the default value.
In order to achieve two-way binding , the method used by react is the controlled component. A controlled component is when the value of the input tag is set to a variable in this.state, and the user cannot change its value through the keyboard, it is called a controlled component.
Two-way binding needs to be implemented: input must have a value attribute and an onChange event, and the variable in this.state can be modified through the onChange event, thereby changing the value of the value attribute of the input
Dynamically modify the variable name that needs to be modified by calculating the property (you don't need to write so many methods to implement the onChange event):
How checkbox uses controlled components to implement the radio agreement agreement button:
The id is the same as htmlFor, so that the box can be ticked when pressing the word, and whether it is obtained through event.target.check
How checkbox uses controlled components to implement multiple selection buttons:
Implement the onChange method
Get selected hobbies when submitting
How select becomes a controlled component (in the case of single selection): it is the same as ordinary form acquisition
How select becomes a controlled component (in the case of multiple selection):
The value obtained by event.target.selectedOptions is a class array, and the array method cannot be used. You need to use the array.from loop to obtain the iterable object into an array. To select multiple options, you need to hold down shift and click the left mouse button to select multiple options.
Uncontrolled components implement monitoring and obtaining values, and operate dom through ref: (not recommended)
4. Higher-order components of React (replaced by hooks)
Higher-order functions: 1. There is another function in the parameter:
2. The output of the function is another function:
HOC:
Higher-order components are similar to interception, and then perform additional operations on the incoming components before returning them.
Higher order function (enhancement) for adding a variable to each component:
Function component before change: Function component after change:
If you need to use higher-order functions for class components, you only need to do this:
It should also be noted that if the parent component already passes parameters to the child component, then additional things need to be added in the higher-order function:
Application 1. In development, high-order functions are most often used in the context context to reduce the amount of code (or enhance it):
Class components that need to use the variables given by the context only need to use high-order functions when exporting, and call the required variables in the render function.
Code structure includes context file, app.jsx, high-order function with_theme.js, class component product.jsx
context file:
Contents inside app.jsx:
Product writing without using higher-order functions:
Higher order functions:
The class component product that needs to use the variables provided by the context: (this does not affect the direct use of the product component in app.jsx)
Application 2. The function of logging in is sound, reducing the code of judgment:
cart.jsx needs to determine whether the user is logged in or not:
app.jsx root component: (the page needs to be updated here, directly using setItem has no effect of updating the page, you can use this.steState to change the value of a variable to trigger the update interface)
Higher order functions:
Application 3. Life cycle hijacking, calculate the time required for page loading:
Higher order functions:
Components that need time to be measured need to be wrapped with higher-order functions:
The root component app.jsx can use class components normally.
Five, portals and fragments
The portals are the same as the teleport in vue3; the fragment has the same function as the template in vue, and the content of the package will not be displayed in the browser as a template.
The role of portals is to render an element in the app.jsx root element to other elements of the non-root root element:
case:
Inside the class component:
Inside the root component: (slots are used here)
Fragment function: It needs to be wrapped with div, and it will be displayed like this in the browser:
After using fragment:
Six, StrictMode strict mode
Enable strict mode globally:
Enable strict mode locally:
After the strict mode is enabled, the code will be executed twice in the constructor, render, and life cycle by default
