SegmentFault Technology Weekly -- Master this concept and you will understand React

The editor has compiled high-quality technical articles about React in the Sifu community, welcome to read~

文章推荐

React components applied to Spring MVC projects

The company's front-end engineering is still in the stage of coexistence of React+Mobx and Spring MVC (freemarker+jQuery) technology stacks. The two technology stack pages will inevitably have some same business function points. If they are developed and maintained separately, it will require double the labor cost. , so we try to apply React business components to Spring MVC projects with the help of webpack, babel and other tools.

Analysis of React Fiber Architecture Principles

Before React 16, the update of VirtualDOM was implemented using the Stack architecture, which is a recursive way. However, this comparison method has obvious defects, that is, once the task starts, it cannot be interrupted. If the number of components in the application is relatively large, the level of VirtualDOM will be deeper, and the result is that the main thread is occupied for a long time. This will block rendering and cause stuttering.

From native JavaScript to React

React is a JavaScript framework for building user interfaces. It can be used to create JavaScript applications by dynamically manipulating page content. Browsers already provide an API for creating elements in a page, the DOM, so newbies might be wondering what React brings and how it relates to the DOM.

Write an accordion component using React

Knowledge point
emotion grammar
react syntax
css syntax
typescript type syntax

Hands-on component series - 1. Implement a Collapse component using React

The ability to write components is an important indicator to measure the level of front-end engineers, whether it is a basic component or a business component.
The author also likes to write components in my spare time. In order to help beginners to write React components by hand, and to share my experience and ideas in writing components, I decided to open a series, namely: Hands-on Component Series, to share with you some common components and The implementation methods and implementation techniques of business components.
As the first article in this series, share how to implement a Collapse component from zero to one

An interesting troubleshooting experience while implementing React

While I still remember the internal working process of React, try to fork a React in my spare time - big-react.
Since it is a fork of React, it must run through some official test cases.
I encountered a very interesting problem when running a use case. The following is the troubleshooting process.

React: Don't move or you'll get fired

I don't know if you have noticed that there is a very strange attribute __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED in the two packages of react and react-dom when developing with React:
The literal translation is the internal mysterious attribute, don't use it indiscriminately! Otherwise you will get fired.
Why is there such a terrifying attribute? Let's talk today.

问答推荐

• Questions about React-redux interacting with the background?
• How to upload reactnative files?
• React's import dynamically introduces component life cycle disorder?
• Newbie asking mobx-react question?
• React.StrictMode In the development environment, useEffect will automatically execute return?
• How to understand React's state is immutable?
• Using useEffect in React reports an error, how to solve it?
• The data cached by React.Context and redux cannot be shared across browser tabs, how to solve it?
• How to deal with multiple setstates of React hook being merged?

课程推荐

"Learn React source code from top to bottom"

course features:

• Based on the latest source code , this course is based on the latest React17.0.0-alpha design, which is scarce on the entire network. The Concurrent Mode released by React17 is the direction of React's efforts in the past few years, and it is also the direction of development in the next few years. There is currently no React17 source-level course on the market.
• The supporting materials are complete , and the course is equipped with the supporting e-book "React Technology Revealed", rich online demos, and practical exercises.
• The "top-down" teaching method is in line with the process of human cognition. If other source code analysis courses are of "advanced" difficulty, this course is only of "intermediate" difficulty. The reason is that the course uses a "top-down" teaching method, which is more in line with the process of human cognition.

---

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~