react source code analysis 15 scheduler&Lane

react source code analysis 15 scheduler&LaneVideo Explanation (efficient learning): Enter learningWhen we search in the search box component like the following, we will find that the component is divided into search part and search result display list. We expect the input box to respond immediately, and the result list can have waiting time ...

Posted by headbangerbuggy on Thu, 13 Jan 2022 02:15:47 +0100

react source code analysis 10 Commit phase

react source code analysis 10 Commit phasecommitRoot(root) will be called at the end of the render phase; Enter the commit phase, where root refers to fiberRoot, and then traverse the effectList generated in the render phase. The Fiber node on the effectList saves the corresponding props changes. After that, it will traverse the effectList to p ...

Posted by CooKies37 on Thu, 13 Jan 2022 01:46:52 +0100

Real expiration time

Expiration Time concept First, what is Expiration Time? According to the English direct translation, the Expiration Time or Expiration Time. How to understand the concept of Expiration Time in React? We might as well start with its role to understand what it is. Expiration Time action In real, the source code location is ...

Posted by amir on Tue, 11 Jan 2022 10:18:08 +0100

useCallback memory function and useMemo memory component

useCallback memory function In class components, we often make the following mistakes: class App { render() { return <div> <SomeComponent style={{ fontSize: 14 }} doSomething={ () => ​{ console.log('do something'); }} /> < ...

Posted by mpf on Tue, 11 Jan 2022 01:49:59 +0100

[Notes] react learning and recording

Basic Essentials start npm i -g create-react-app create-react-app todolist npm run start src-> App.js,index.js import {Component} from 'react'; //Equivalent to import React from 'react'; const Component = React.Component So app.js can be written like this import React,{Component} from 'react'; class App extends Component { ...

Posted by Old Novus on Mon, 10 Jan 2022 18:41:54 +0100

[JavaScript Weekly #570] Compare Svelte and React

🥳 Welcome interested partners to do something meaningful together!I launched a weekly translation program, Warehouse address,Access address There is still a shortage of like-minded partners. They are purely personal interests. Of course, they will also help to improve English and front-end skills. Requirements: English is not too bad, githu ...

Posted by jspodisus on Sun, 09 Jan 2022 16:13:32 +0100

YonBIP development: modal box pops up on the interface to display data

demand Add a reference contract button in the interface, and click reference contract to open the modal box. The modal box is divided into three parts: search, header and table body. Click search to load the data returned from the back-end interface to the header, and click the header line to load the table body data from the back-end interfac ...

Posted by y2yang on Fri, 07 Jan 2022 09:46:10 +0100

Route management and route interception scheme of react router V6

The last one was shared Route management and interception scheme of react router V5 However, there are some defects, such as not supporting nested routing, not supporting dynamic routing parameters and so on. Later, I saw the characteristics of useRoutes api in react router v6 version, decided to upgrade to v6 version, and reconstructed the im ...

Posted by phphead on Fri, 07 Jan 2022 05:12:33 +0100

Hooks usage rules

Hooks is just a JavaScript method, but it should be used in the correct way. We provide a linter plug-in to automatically check. Hooks is called only at the top level Do not call Hooks in loops, conditional statements, or nested methods. To be called at the top level of your React method. Following this method, you can ensure that hooks are ...

Posted by pushpendra.php on Thu, 06 Jan 2022 01:46:50 +0100

React learning notes -- redux

1, redux understanding 1. Learning documents English documents: https://redux.js.org/Chinese documents: http://www.redux.org.cn/Github: https://github.com/reactjs/redux 2. What is redux redux is a JS library dedicated to state management (not a react plug-in library).It can be used in react, angular, vue and other projects, but it is ba ...

Posted by mikesheridan5 on Wed, 05 Jan 2022 11:29:44 +0100