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