Issue 27 This is the React native dynamic loading you think about day and night. How exactly does GraphQL use & amp; thoroughly understand the front-end memory monitoring, exceptions, and leaks from scratch
Posted May 25, 2020 • 3 min read
In React 16.6 version, the React.lazy function is added, which allows you to process dynamically introduced components like regular components. With Webpack's Code Splitting, only when the component is loaded, the corresponding resources will be imported to achieve Lazy loading effect.
This article is based on the author's consideration of the implementation of GraphQL in the Node.js architecture. From the initial consideration, you can join the basic service(with built-in middleware) and provide complete construction, release, and monitoring support, and finally choose not to change the basic service to provide independent package adaptation, without limiting the implementation of technology selection, and leave it to the business team for freedom Choose the lightweight way to land. In the middle, I experienced the process of lifting misunderstandings, doubts about earnings, doubts about the initial positioning, and finally completed the process of weighing pros and cons.
Affected by the new crown epidemic, the update of the stable version of Chrome directly skips v82 to Chrome 83, so many functions that were originally officially released on Chrome 82 have also been accumulated in this updated Chrome 83.
The garbage collection mechanism usually uses a flag removal strategy, which is simply to refer to whether it is reachable from the root node to determine whether it is garbage
The above is the root cause of the memory leak. The direct reason is that when two things in different life cycles communicate with each other, one of them should be recycled when its life expires, but it is still held by the other party.
So, let s talk about which scenarios cause memory leaks
If you do not design the project, all the code we write will be stored in the same warehouse. When you need to debug the coding effect locally, an npm run start or npm run dev can start the service we need, but as time goes This project will inevitably become a "Big Mac", and the damage it will bring to us will be far greater than the benefits, so we thought of a split, then, some UI or calculation logic will be drawn into a package.
In the last article here 3 we talked about that in the beginWork function of the render stage, the Fiber node generated by the last update and the JSX object of this update(corresponding to the return value of the this.render method of ClassComponent, or the FunctionComponent implementation Return value) for comparison. The workInProgress Fiber is generated according to the result of the comparison, that is, the Fiber node updated this time.
Public account:front-end collector. Collect excellent front-end technical information on the entire network, share it with you, and grow together.