The opening word | this time, really understand the React knowledge link with the underlying logic
The current trend of “making nouns” in the tech world is actually a baffling “language barrier” — technology itself is something simple and interesting in most cases, and the more people try to deify it, the easier it is to lose touch with the essence of technology.
1. How great is learning React?
For the past few years, “change” has been the word of the day in the front-end framework world: when jQuery was in its infancy, React/Vue/Angular was in its infancy, and now React/Vue is in its infancy.
When you look at the framework itself, you see that Vue, React, and Angular are not only writing more like each other, but even designing more like each other — they all seem to be moving towards the WebComponents standard in uncoordinated fashion. So when looking at the future of front-end frameworks, there is every reason to believe that the number one keyword of front-end frameworks will one day evolve from “change” to “stability” or “standardization.”
Under such a trend, it is inappropriate to pull on any front-end framework from any subjective perspective. The learner should not care about the entertaining question of “which framework is the best”, but the utility of learning.
2. What will learn React do?
1) Good personal career: Big factories prefer React.
React’s absolute advantage stands out in the first and second tier Internet giants. (For example, Ali uniformly uses React as the underlying technology stack and closely builds the React ecosystem internally.) React was also rated as the top front-end framework in the 2019 JavaScript Trends Report. In the recruitment, big factories generally favor React talents, and there are many words like “master React” and “master React” in various high-paying positions. As the front end, we must realize the current situation: React is preferred by big factories (both domestic and foreign). When we make a decision to enter Dachang one day, it means we must first make up our minds to deal with React.
2) Strengthen the actual combat ability of the project: Understand React, difficult diseases are not a problem.
In interviews, React related questions are often highly differentiated, and few candidates stand out in React. A lot of times, candidates don’t really seem to understand “why they’re asking so hard questions.” For example, the common joke is “I don’t read the source code, don’t study the call stack, use React to write business is still the boss”. Indeed, by reading React documents and learning materials of “quick start” and “real XX” in the market, I can also be competent for certain business development work. However, as business complexity increases, “strange” problems will spring up one after another. When you don’t know how React works, it’s easy to get stuck in a situation like this. The purpose of the interview is to screen out advanced players who can really understand React and solve complex problems: The depth of your understanding of React will determine the maximum complexity of practical problems you can solve.
3) Counterattack opportunities for ordinary developers: A good framework is the best teacher
In recent years, many front end engineers in small and medium sized companies have faced a dilemma: the business is not valuable, the boss does not pay attention to, the technical expertise is difficult to pick up, architecture opportunities are not available… I can’t seem to break the game forever. Is that what I’m gonna do with my life?
Of course not! When the environment can not provide us with a high-quality way to grow, we might as well try to create their own way, such as: dig a high-quality front-end framework, understand its underlying principle; Learn architecture ideas, coding specifications, and design patterns from the React team. React is a typical example of an excellent front-end framework, which integrates classical design “philosophies” such as data-driven view, componentalization, functional programming, object-oriented and Fiber in its architecture, and involves classical solutions such as JSX and virtual DOM in the selection of underlying technologies. It covers at least two best practices in the area of state management and front-end routing in peripheral ecology. In addition, it built its own state management mechanism and event system, which creatively introduced the Hooks idea…… into the front-end framework React’s steady output over the past decade has provided us with much to learn from.
Why is React so hard to learn?
One interesting thing is that Vue has a lot of knowledge/principles, but React has very few.
Most of the advanced React content on the market describes how to practice a specific project based on a series of apis. The few source code analysis content, although trying to unravel the “principle”, but often accompanied by refinement to line by line of knowledge granularity, the reader’s time, endurance and existing level (refine knowledge, abstract knowledge ability) are put forward high requirements.
These phenomena are closely related to React’s daunting huge knowledge system, sophisticated underlying principles and long knowledge links. So, to be fair, it’s really hard to learn React.
4. To learn columns methodically, we need to be clear about the following points:
1) About column courses:
The lesson design of this column is: connecting knowledge links, explaining the underlying logic. It can be seen that the column takes “simplification of complex problems and systematization of trivial problems” as the core principle of curriculum design. It’s not a straight study note, it’s a conversation.
2) About column design:
The design principle of the column is: stick the dachang interview logic outline, stick the source code to speak principle. React interviews don’t go through the formalities, let alone show off. It’s the most “utility-oriented” way to learn. If we can make full use of the logic of big factory interview, we will achieve a double breakthrough of interview and application.
In the column will be posted source code speaking principle, but this is not dead knock source code, source code! == principle, the source code is code, and the principle is logic, the code is complex and lengthy, but the principle can be simple and clear. Source code can be a good tool in some situations, but reading it isn’t the only way to get to the principles. Therefore, extract source code that is helpful to understand the problem if necessary; Other teaching AIDS are also selected in some scenarios to ensure that the main points of knowledge are reached with correct and efficient posture.
3) For systematic knowledge: create sufficient context.
In his book review of the Dream of the Red Chamber, Mu Xin once said, “The poems in the dream of the Red Chamber are like water plants swaying in the water, which are extremely beautiful. If you take it out, it’s dry.” The same goes for React knowledge links: some knowledge is hard to learn not because it’s complicated, but because it requires context to understand. If you put it in the right context, you can figure it out in a split second. But if your learning context is broken, the knowledge itself will naturally become “dry” and hard to swallow.
4) For knowledge with high complexity: use phenomena to ask questions to principles.
For complex principles, “ask the phenomenon/question first, then dig the principle”, from the phenomenon and principle, so as to minimize the learning slope of difficult knowledge.
5) Finally, we should also know the structure of the column, which can help us to study in a planned way.
The structural planning of the whole column is as follows.
Module 1: Foundation compaction. React provides the basic principles and source code for React. No matter what you do, laying a solid foundation is an essential step.
Module 2: Core principles. This part of the content from the daily development of difficult problems, big factory interview last problem, showing the framework of the underlying logic and source code design. This is especially important when we want to further improve ourselves.
Module 3: Surrounding ecology. Many people have used Redux and heard of React-Router, but why use it? What are the working principles and design ideas behind it? This module column is to talk about this part of the differentiated content, for the use of React bucket, or contact with front-end engineers are not proficient in the use of the problem, you do not know how to debug the problem.
Module 4: Production practice. For an excellent front-end application, performance and design pattern are eternal themes, performance determines user experience, and design pattern determines r&d efficiency. Output a practical view of best practices, and of course, “not only know what it is, but why it is.”
In the end, we knowRepetition is the essence of learning.
We import and export important knowledge over and over again, and finally we can turn this knowledge into our own wealth. In the learning process for the heavy and difficult knowledge, we should learn to firmly grasp and master it to make it into their own hands of real productivity.
6. Next
React in plain English [Study Notes 2]