React is a free and open source front-end JavaScript tool library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies. React can be used as the basis for developing single-page, mobile or server-rendered applications with frameworks such as Next.js.
知识理念
"React 18 official version is released, what is the future development trend? 》
On March 29, 2022, the official version of React 18 was released. Since v16, the React team has been popularizing the concept of concurrency. In the iterative process of v18 (alpha, Beta, RC), concurrency features have also been popularized, so when the official version is released, there are no new features.
This article focuses on some future development trends revealed in the v18 release log.
I went through the documentation of React Router and found that it has been pushed to the v6.2.2 version. This version has made a lot of changes. Let's take a look.
"React source code analysis series - React's render exception handling mechanism"
how the exception is generated;
How to catch render exceptions;
How to capture render exceptions in React source code;
Handle exceptions.
"React official team takes action to make up for the shortcomings of native Hook"
We know that there are so-called closure traps when using Hooks, which increases the threshold for getting started with Hooks and makes it easier for developers to write buggy code.
Now, the official React team is going to solve this problem.
"Some knowledge about react's keep-alive function is here (on)"
This is a requirement put forward by PM in the development in 2022. A certain table is entered by the user with some search conditions and browsed to the third page. If I jump to another route and return to the current page, I hope the search conditions are still there. And still on the third page, isn't this the keep-alive tag in vue, but my current project is written in react.
This time I described my experience of "using external plug-ins" -> "abandoning external plug-ins" -> "learning and developing plug-ins by yourself" -> "understanding the dilemma of related plug-ins" -> "looking forward to the Offscreen of react18", so the conclusion is It is recommended to wait patiently for the self-support of react18, but it is still very inspiring to learn the principles of current similar plugins.
["Some knowledge about react's keep-alive function is here (below)"
]( https://segmentfault.com/a/1190000041683421 )
This article follows the previous article "Some knowledge about the keep-alive function of react is here (Part 1)", starting from the ninth point.
For example, there are 100 pieces of data in the table on the page. If we want to see the 100th piece of data, we need to scroll a lot. In many scenarios, this scroll distance must be reserved.
The method used here is actually more traditional. First, a method for handling scrolling is issued in the KeepAliveProvider:
React is a view layer framework, and its core idea is UI = f(state), that is, "UI is the projection of state", state flows from top to bottom, and the entire React component tree is driven by state. When a React application is complex enough, and components are nested deep enough, the flow of state in the component tree can become unmanageable (eg how do you keep track of how the state of a parent node flows to a leaf node). At this time, we need to manage the state. While managing the state, we also need to distinguish which state types exist in the React application, so as to facilitate the formulation of the most suitable state management scheme.
应用与实践
How does React natively implement anti-shake? 》
As a front-end, you must be familiar with the concepts of debounce and throttle. In React18, based on the new concurrency feature, React natively implements the anti-shake function.
Today we are going to talk about how this is achieved.
"How to elegantly use Interval (polling) in React"
In front-end development, polling (setInterval) is often used, such as back-end asynchronous data processing, which needs to query the latest status regularly. However, when polling with React Hook, you may find that setInterval is not so easy to control. Today, I will talk about how to solve the problem of setInterval invocation in project development, and how to use setInterval more elegantly.
"React navigation realizes transparent pop-up window"
In React Native development, if you want to achieve the pop-up effect, the usual solution is to use the official Modal component. However, the official Modal component will have some defects, such as not being able to display full screen on the Android side, and on the iOS side, when a new ViewController is opened, it will be overwritten by the Modal component, etc. Therefore, in the development of React Native applications, in order to shield these compatibility issues, we can use the RootSiblings component provided by the react-native-root-siblings plugin.
"Chinese input components implemented by React Hooks"
In front-end development, it is no problem to trigger the update of the content of the input box by listening to the onInput event, but if the input content is in Chinese, there will be alternative content like zhong'wen'nei'rong.
The impact of this kind of content is generally not very large, but when some time-consuming operations need to be performed on the input content, this impact has to be considered, for example, the content needs to be rendered complex, sent in real time through the network, etc. etc. scene.
The solution to this problem requires the combined input events provided by the browser.
"100 lines of code to implement React's core scheduling function"
Everyone must know that React has a scheduling system based on the Fiber architecture.
The basic functions of this scheduling system include:· Updates have different priorities · An update may involve renders of multiple components, and these renders may be assigned to multiple macro tasks for execution (ie, time slicing)
High-priority updates interrupt ongoing low-priority updatesThis article will implement this scheduling system with 100 lines of code, allowing you to quickly understand the scheduling principle of React.
"40 lines of code to implement React core Diff algorithm"
Any framework that relies on the virtual DOM needs a Diff algorithm that compares the changes of the nodes before and after.
There are a lot of articles on the Internet explaining the logic of the Diff algorithm. However, even if the author's language is more refined, and the pictures and texts are rich, I believe that most students will forget it after reading it for a long time.Today, we switch to a once-and-for-all learning approach - implementing React's core Diff algorithm.
Not difficult, only 40 lines of code. Do not believe? Look down.
"Building a React Component Library from Scratch"
In order to maintain the components developed by the previous business in a unified manner and facilitate subsequent reuse in other projects, a component library is built for this purpose. Since the previously developed project was implemented based on React, after investigation, it was decided to choose the more commonly used Dumi as the component library documentation tool, and Father as the component library packaging tool.
"Teach you how to write a React state management library"
Since the introduction of React Hooks, Redux has been out of place as a state management solution. Dan Abramov mentioned "You might not need Redux" a long time ago. Developers have to write a lot of "pattern code". Cumbersomeness and repetition are not tolerated by developers. Aside from the fact that concepts like actions/reducers/store are not friendly to newbies, the biggest drawback is that it has poor typescript type support, which is unacceptable in large projects.
By summarizing the advantages and disadvantages of Redux, we can write a state management library ourselves. The purpose we need to achieve this time is:
- Typescript types need to be perfected
- Simple enough, less concepts
- Compatible with React Hooks
"React Performance Optimization - Avoid Duplicate Rendering"
Whether the function component needs to be rendered again can be optimized according to React.memo and React.useMemo.
"How React Parent Components Actively "Contact" Child Components
In a typical React data flow, props are the only way parent and child components interact. To modify a child component, it needs to be re-rendered with new props. However, in some cases, it is necessary to actively view or forcibly modify child components outside the typical data flow. In this case, it is necessary to use Refs to expose DOM Refs to parent components.
"Direflow landing sharing - writing WebComponents in React"
React is familiar to everyone, and WebComponents is probably also heard. So what kind of sparks will React+WebComponents collide?
In fact, there is such an open source framework that supports the React way to write components, and the final packaged product is WebComponents. It's direflow, a framework that supports writing WebComponents in React.
热门问答
- ts best practice question for react
- How can the event function bound in react useEffect get the latest state?
- Ask how to solve the problem of bloated subcomponents caused by the order of react hooks
- The problem of whether the state is reset under react conditional rendering
- How to understand this sentence in react constructor
- React uses the concurrent mode, the rendering phase exceeds the time slice, and the high-priority task cuts in the queue. What will happen to the lanes on the fiber on the previous task?
- react route naming best practices
- React starts the project content and renders the page, and the console reports an error
课程推荐
"Learn React source code from top to bottom"
Course gains:
Learning React source code can not only master the operating principles of the industry's top front-end frameworks, but also explore the front-end boundaries. You can also make yourself a line-of-business React leader.
From the refactored Fiber architecture of v15~v16 to the new concurrency mode of v16~v17, React has gradually changed from a UI library to a small operating system.
For students who want to learn React source code, this is both an opportunity and a challenge.
The challenge: React's internal running process is really complicated.
The opportunity is: after you finish your studies, in addition to having framework development capabilities, your gains will not be limited to:
- Programming Paradigms: The idea of algebraic effects of functional programming
- Operating system: how to implement coroutines from scratch (fiber architecture)
- Data structures: linked list, tree, small top heap
- Algorithm: O(n) Diff algorithm, mask
- In-depth browser rendering principle
PS: What technical content do you want to see, you can leave a message in the comment area~
If you have any questions, you can add Ms. WeChat~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。