React source code
1. Opening (I hear you’re still struggling with the React source code)
This tutorial is designed to help you understand the react source code in a way that is easy to understand and efficient to learn. In the video tutorial, we will walk you through step by step breakpoint debugging. This course will give you a better understanding of the React source code than most interviewers.
Video lessons & Debug demos
The purpose of the video course is to quickly master the process of running the React source code and scheduler, Reconciler, Renderer, Fiber, etc., in react, and debug the source code and analysis in detail to make the process clearer.
Video course: Enter the course
Demos: demo
Course Structure:
- You’re still struggling with the React source code.
- The React Mental Model
- Fiber(I’m dom in memory)
- Start with Legacy or Concurrent (start at the entrance and let’s move on to the future)
- State update process (what’s going on in setState)
- Render phase (awesome, I have the skill to create Fiber)
- Commit phase (I heard renderer marked it for us, let’s map real nodes)
- Diff algorithm (Mom doesn’t worry about my Diff interviews anymore)
- Function Component saves state
- Scheduler&lane model (to see tasks are paused, continued, and queue-jumped)
- What is concurrent mode?
- Handwriting mini React (Short and Sharp is me)
React source code is difficult to learn
In a quiet night, I thought about the growth of the last few years, found that in addition to CTRL + C, CTRL + V use a bit more familiar, other seems not very well understood, not I have to learn react source code, after all, this is the most common framework used in daily development.
You can download the react. js file in the react folder, but the code is still in packages. You can download the react. js file in the React folder. With the slow into the wrong, why more and more confused, what is the reference relationship? What’s the use of this file? Why does this function look like this? Take a screenshot and get a feel for one part.
Since I don’t know the order of their calls, I can break the point and follow the call stack. Then I open the browser performance and see this sub-sub-function. How can I clear up so many functions?
This course will give you a complete and clear understanding of the React source code structure and some of the different functions. The React source code should not be too difficult to learn.
How to learn react source code
The worst thing to do when learning React source code is to get tangled up in each function implementation, and then get stuck in an infinite number of function calls and recursions, just like multiple dreams in Inception.
In the learning process, we pay attention to the overall learning method, because each part of React is not isolated. For example, in the process of function call, asynchronous scheduling logic may be involved, so Schduler will be involved. We need to start from the entrance to have an overall understanding of the react source code workflow and the implementation of each part, and then start to understand the specific implementation of this part of the function when we formally learn each part.
The course characteristic
React is not a simple version of react17, but a simple version of react17. You can use the original react source code, instead of emulating the original react source code.
Lots of illustrations with demo and video tutorials, it’s easy to learn, after learning you can interview X again, happy ~ (just kidding)
Start with the React portal to show you the react source code. Get a clear view of the React source code execution process and the functions and principles of each part
Video tutorials take you step by step debugging, efficient understanding of the functions and functions of each function
Course harvest
Why learn react source code? As a front-end engineer who has been working with React for many years, do you stay at the level of using the framework or understand the underlying logic and operation mode of the framework? Do you use the same knowledge for several years or constantly seek breakthroughs in different directions?
- The React source code will help you in your interview process, as well as your salary negotiation process.
- Consolidate basic knowledgeScheduler: is used in the source schedulerSmall cap pileThe scheduling implementation uses this data structuremessageChannel, is used in the Reconciler in the Render phaseFiber, Update, linked listThese structures are used by the diff algorithmdfs, lane model uses binary mask. Learning this course also incidentally consolidated the data structure and algorithm, event loop.
- The React source code gives you a new understanding of how react works. You’ll be better able to optimize components, use react tips, and troubleshoot bugs.
Let’s get started with questions.
You probably already know the answers to some of these questions, but can you really answer them from a source perspective? By the end of this video course, I’m sure you have your answer
1. Why cannot hooks be written in conditional judgments
2. What is the relationship between JSX and Fiber
JSX file import React from ‘React ‘;
4. Is setState synchronous or asynchronous
5.componentWillMount, componentWillMount, componentWillUpdate Why UNSAFE
6. If I click on the Father component div, will Child print Child
function Child() {
console.log('Child');
return <div>Child</div>;
}
function Father(props) {
const [num, setNum] = React.useState(0);
return (
<div onClick={()= > {setNum(num + 1)}}>
{num}
{props.children}
</div>
);
}
function App() {
return (
<Father>
<Child/>
</Father>
);
}
const rootEl = document.querySelector("#root");
ReactDOM.render(<App/>, rootEl);
Copy the code7. What is the printing order
function Child() {
useEffect(() = > {
console.log('Child');
}, [])
return <h1>child</h1>;
}
function Father() {
useEffect(() = > {
console.log('Father');
}, [])
return <Child/>;
}
function App() {
useEffect(() = > {
console.log('App');
}, [])
return <Father/>;
}
Copy the codeWhat is the difference between componentDidMount and useEffect
class App extends React.Component {
componentDidMount() {
console.log('mount');
}
}
useEffect(() = > {
console.log('useEffect');
}, [])
Copy the code