![]() ![]() The reason is that when we make theme color changes, theĬomponents will be re-rendered, and the getFiltered() method will be recalculated as theĬomponent is re-rendered. While we were selecting the theme color, the page was getting slow feedback. Next, continue through the page action to see the specific feedback: Second, we added the theme function, by passing a theme color to simply indicate the scene TODO applications may still require some additional features, such as filters For a market-oriented TODO application, however, some functionality such as themes is still required.įirst of all, we added filter function, through the selection of classified treatment of work items for screening However, TODO applications may be more complex than we think. Through this transformation, we can clearly perceive from the debugging feedback on the right, and continue to fix! The remaining to-do items are not updated when the operation is performed. The value stored in the previous handleChange changes. At the same time, in modules that useĬomponents, handleChange is wrapped useCallback to prevent function components from recreating handleChange during the update process with unchanged dependencies. ![]() The component will not be rerendered if the last two shallow comparisons are the same. Memo to perform a function similar to pureComponents. The transformation results are shown in the figure below:įirst, we wrap the component that originally rendered a single to-do item with react. Memo, it is recommended that you read the official document: React. memo with useCallback hooks to modify the code. To fix this, a common approach is to use react. The list items may contain dozens or hundreds of pieces of data (not considering the scenario of virtual lists), and the updates carried by them are heavy points that may cause performance problems. As you can see in the image below, the oops button (for the TODO app, select to complete the item and click again to cancel it) is rerendered for the rest of the memo, useCallback, and useMemo. ![]() When we open the console and use the React Devtool to debug the above code, it is not difficult to find that frequent complete operations and add operations will increase the number of existing list items update. The code is shown on the left, and the running result is shown on the right. Let's take a look at an example of a TODO application: React Conf 2021 React Conf 2021 Replay React and Memo(React and Memorization) Notes will carry personal understanding and may use a lot of their own summed up words, may produce partial understanding deviation, if there is a wrong understanding welcome correction! It is recommended that you still have time to watch the video content to learn about native sharing content. This series is an excerpt from the React Conf 2021 sharing session, which aims to learn more about the details of the event besides the core content. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |