How to realize the front-end novice guidance function?

Hello everyone, I am Ruochuan. I have been organizing for nearly a year Source code sharing activities , those who are interested can Click here to scan the code and add me on WeChat lxchuan12 Participate, everyone will learn about 200 lines of source code together every week, and make progress together. At the same time, it is highly recommend ...

Posted by danleighton on Fri, 03 Feb 2023 11:42:58 +0300

[React] DOM diffing algorithm

Table of contents · The role of key in virtual DOM · Problems caused by using the index when traversing as the key How to choose the key value during development First of all, we know that one of the characteristics of React is: use virtual DOM + excellent Diffing algorithm to minimize interaction with real DOM. The impleme ...

Posted by mmtalon on Sun, 15 Jan 2023 13:51:13 +0300

Life cycle and event system in react source code

In this chapter, what I want to discuss with you is the life cycle and event system of React. The compilation result of jsx Because I also mentioned the compilation result of jsx in v17, in addition to the tag name, other attributes (such as class) and events (such as click event) hanging on the tag are placed in the second parameter of the ...

Posted by ik on Sat, 03 Dec 2022 06:08:38 +0300

React source code analysis and rendering mechanism

PreparationFor the sake of explanation, suppose we have the following code:function App(){ const [count, setCount] = useState(0) useEffect(() => { setCount(1) }, []) const handleClick = () => setCount(count => count++) return ( <div> Brave Niu Niu, <span>Not afraid of difficulties</spa ...

Posted by adriaan on Tue, 18 Oct 2022 04:26:58 +0300

Handwritten a mini version of the React state management tool

Handwritten a mini version of the React state management toolCurrently in React, there are many and various state management tools, such as:React ReduxMobxHoxEach state management tool has different API s and usage methods, and has a certain learning cost, and these state management tools also have a certain degree of complexity, and they are n ...

Posted by jeff8j on Tue, 20 Sep 2022 21:35:44 +0300

We can understand the source code - list page common hook packaging

This article is the sixteenth in a series of ahooks source code articles that have been compiled into documents- address . I think it's not bad. Give me one star Support me, thank you.List page common elementsFor some background management systems, a typical list page includes three parts: filtering form items, Table tables, and Paginatio ...

Posted by DeathStar on Fri, 02 Sep 2022 01:40:00 +0300

Cannot find name for React error

Text starts here~.tsx extensionIn order to resolve Cannot find name errors in React TypeScript, we need to use the.tsx extension when using JSX files, in your tsconfig. Set JSX to react-jsx in the JSON file and make sure that all necessary @types packages are installed for your application.Below is an example of an error in a file named App.ts. ...

Posted by jackread on Sun, 07 Aug 2022 21:57:26 +0300

Taro (React+TS) encapsulates a basic audio component based on InnerAudioContext (uni app (vue) (updated later)

Why encapsulate an audio component This is mainly because the official audio of wechat applet is not maintained, and there are some problems on many iOS real machines, such as clicking can not be played, and the total time is not displayed Requirements and limitations of audio components Click play or pause Display playback progress and total ...

Posted by CashBuggers on Wed, 25 May 2022 02:19:32 +0300

React parent-child component pass value && React life cycle

1.react life cycle react life cycle: the whole process of many things from creation to destruction, this process is called the declaration cycle React components also have their own life cycle, and understanding the life cycle of components allows us to complete the functions we want in the most appropriate place; The relationship between the ...

Posted by wei on Tue, 24 May 2022 23:50:41 +0300

Get started with React and create React app

React is a JavaScript library for building user interfaces This article mainly introduces the use of create react app Related resources React create-react-app Quick start Create project NPX create react app my app Open project CD my app Start project npm start directory structure There is no configuration or complex folder structure, ...

Posted by gobbly2100 on Tue, 24 May 2022 04:59:31 +0300