Preface package.json is an important file for describing and configuring a project, which contains a number of fields and options that can affect project construction, dependency management, script execution, and so on. Understanding these fields can help developers better understand and control the behavior of the project. package.json for most front-end developers, knowing dependencies and devDependencies is enough. However, for library developers or developers with more advanced needs, it is necessary to understand the other fields of package.json. the fields introduced in this article are divided into official fields and unofficial fields. Unofficial fields are supported by mainstream packaging tools (webpack,Rollup) and are designed to provide more advanced configuration and functionality to meet specific build needs and may not be universal. current version: v7.24.2 I. required attribute 1. name defines the name of the project, not with "." Start with "_" and cannot contain uppercase letters 2. version defines the version number of the project in the format of large version number. The second edition number. Revision number II. Description information 1. description Project description 2. keywords Project keywords 3. author Project author "author": "name (http://barnyrubble.tumblr.com/)" 4. contributors Project contributor "contributors": [ "name <[email protected]> (http://barnyrubble.tumblr.com/)" ] 5. homepage Project home page address 6. repository Project Code Warehouse address 7. bugs address of project submission question // address for submitting questions and email address for feedback. Url is usually the issues page in Github. "bugs": { "url" : "https://github.com/facebook/react/issues", "email" : "[email protected]" } 8. funding specify the financial support method and link for the project "funding": { "type": "patreon", "url": "https://www.patreon.com/my-module"…

We know that useMemo and useCallback are mainly used to cache intermediate states and reduce meaningless render to improve performance. But recently I have found that I have been misunderstanding their use! misunderstanding of useMemo Please take a look at the following code. Even with useMemo , the second subcomponent is re-rendered without the change of isZero ! import { useCallback, useMemo, useState } from "react"; const Child = ({ value, onClick }) => { return ( <div style={{ height: 100, background: `#${(~~(Math.random() * (1 << 24))).toString(16)}` }} > my value is {value.toString()} </div> ); }; export default function App() { const [count, setCount] = useState(0); const isZero = useMemo(() => !!(count % 3), [count]); const onClick = useCallback(() => setCount(count + 1), [count]); return ( <div className="App"> <button onClick={onClick}>click me</button> <Child value={count} /> <Child value={isZero} /> </div> ); } 💡 related reading in fact, the reason has also been mentioned in previous articles: React every time the state of a component changes, it starts from the current component until all leaf node components are re-rendered. The article also mentions the solution to this problem: the subcomponent is wrapped with the memo function, and the component can render as expected. however, at this point we remove useMemo , and the subcomponents are still rendered as expected. memo is similar to useMemo , which is based on a shallow comparison of Object.is and is only valid for non-reference types. so in the above example, it makes no sense to use useMemo . misunderstanding of useCallback however, in the above example, the…

in React applications, as the number of components increases, so does the size of the application. This may cause the application to load for too long and bring a bad experience to the user. To solve this problem, we can use component-level demand loading. On-demand loading can improve application performance, reduce page loading time, and improve user experience. In this blog post, I will detail how to implement component-level on-demand loading in React. what is demand loading? on-demand loading (also known as lazy loading) is a technique that allows us to delay loading code until it really needs to be executed. In React applications, demand loading allows us to load components or other resources dynamically when needed, rather than when they are initially loaded. This means that applications can start faster, reduce unnecessary network requests and file sizes, and improve performance and response speed. Why use demand loading? the main reason for using demand loading in React applications is to improve performance and user experience. When we use demand loading, we only load code when needed, not all code when the application starts. This can reduce page loading time and network requests, and improve application response speed and user satisfaction. In addition, demand loading can reduce the file size of the application because we only need to load the necessary code and resources. implementation of demand loading React supports a variety of ways to load components on demand, including using React.lazy and Suspense API, using higher-level components, and using dynamic imports. Now I will introduce the usage of each method…

as the scale of the React application we develop is getting larger and larger, if all the components are still packaged into one bundle file, it may cause the application to load slowly. It is a common practice to package the components in the program into separate files to reduce the load time of the application, which is usually achieved by "loading on demand". In this article, you will learn about the dynamic import of components in React programs. 1.roomnbsp; what is a dynamic import component? dynamic import components refer to loading components when needed, rather than packaging all components into a single bundle file when the application loads. How do we implement it in React? React provides us with a & nbsp; lazy () & nbsp; method and & nbsp; Suspense & nbsp; component, which are the two main tools for dynamically importing components. using & nbsp; React.lazy () , we can easily load components on demand. The syntax is as follows: const MyComponent = React.lazy(() => import('./MyComponent')); in the code above, React.lazy () & nbsp; receives a function that returns a & nbsp; import () & nbsp; function call. import () & the nbsp; function is part of the ECMAScript dynamic import syntax, which allows us to load a module asynchronously at run time. By combining the & nbsp; React.lazy () & nbsp; with the & nbsp; import () & nbsp; function, we can load components on demand. when we use & nbsp; React.lazy () & nbsp;, React automatically wraps the returned component in a & nbsp; lazy…

let's start with some nonsense I remember this hooks very well, because at that time, during an interview, I was asked to implement this custom hooks by hand, , so it was prepared for the first hooks in this series. to see the effect when our component becomes complex, do you want to know what caused the component to render, or what the value change is, this hooks will solve your problem. here comes the hooks source code type IProps = Record<string, unknown>; / * * * what caused the page render to customize hooks * *@paramName of the componentName observation component *@paramData that props needs to observe (data such as current component state or incoming props that may cause rerender) , / const useWhyDidYouUpdate = (componentName: any, props: any) => { // create a ref object let oldPropsRef = useRef<IProps>({}); useEffect(() => { if (oldPropsRef.current) { // iterate through all the key of the old and new props let keys = Object.keys({ ...oldPropsRef.current, ...props }); // change the information object let changeMessageObj: IProps = {}; keys.forEach((key) => { // compare whether the new and old props are changed, changed and recorded to changeMessageObj if (!Object.is(oldPropsRef.current[key], props[key])) { changeMessageObj[key] = { from: oldPropsRef?.current[key], to: props[key], }; } }); // whether there is change information, existence and printing if (Object.keys(changeMessageObj).length) { console.log(componentName, changeMessageObj); } // Update ref oldPropsRef.current = props; } }); }; demo complete source code import React, { useState, useRef, useEffect } from 'react'; import { Button, Statistic } from 'antd'; type IProps = Record<string, unknown>; / * *…

difference between memo and useMemo react Let's start with the conclusion: React.memo () is a high-level component that we can use to wrap components that we don't want to re-render unless the props in it changes useMemo () is a React Hook that we can use to wrap functions in the component. We can use it to ensure that the value in this function is recalculated only when one of its dependencies changes React.memo () & nbsp Is a high-level component (HOC) , which takes a component An as a parameter and returns a component B if the props (or the value in it) of component B has not changed Component B prevents component A from re-rendering. The difference is that useMemo is a hook, and its idea is similar to that of memo, while the second parameter of useMemo is an array, which is used to determine whether to update the callback function .