Some experience in the Reactjs development process

Reactjs as the most current front-end framework for building user interfaces, why is there so many front-end engineers chasing it, not only because it's simple, but also because it provides a series of powerful APIs that let us get rid of the cumbersome dom operations of the past, make our logic clearer, and the code simpler.

I. Various frameworks used in the project in my current development, the front-end UI framework uses FRAMEWORK7,REACTJS to build the user interface, reflux to manipulate the data (primarily responsible for data requests and data manipulation).

Framework7 not only provides a UI interface, but also encapsulates a bunch of jquery-like DOM operations APIs, while Reactjs is a front-end class library developed by Facebook engineers to build a user interface that provides a powerful diff algorithm to manipulate virtual DOM directly in memory, So Framework7 and Reactjs combine, a little nondescript.

Because we only need the UI style provided by FRAMEWORK7, and do not need it that heap Operation Dom API, for the new classmate who has not contacted Reactjs, the thinking must be difficult to change, can directly manipulate the DOM that is certainly relatively cool, React go through the state by changing the interface style directly to the side of the game! So I started to enter the project, I also directly manipulate the DOM, resulting in early code confusion, late maintenance difficulties. In the middle of the process, I introduced jquery and various class libraries for the DOM operations API that FRAMEWORK7 did not have.

And since our project is using spa mode, the bundle.js up to 4M in late-webpack packaging, on low-end Android, takes up to dozens of seconds to load. In fact, the project developed with react has no need to introduce the front-end framework of the Operation DOM, and the performance and speed of react operation Virtual DOM is not directly comparable to the DOM. That will only cause the application to lag and load slowly.

The project is currently being developed to mimic the native iOS effect (which is costly if you go through react again), so you have to use FRAMEDMEWORK7 as the front-end UI library.

Two. Reactjs simple introduction What is react? Here is a description from the React Chinese document:

React is a JavaScript library that Facebook and Instagram use to create a user interface.

Many people think that React is the V (view) in MVC.

We created React to solve a problem: building large-scale applications that are constantly changing over time. To achieve this goal, React uses the following two main ideas.

1: Just express your application at any point in time should be long, and then when the underlying data changes, React will automatically handle all user interface updates

2: After the data changes, the React concept is similar to clicking the Refresh button, but only the changed parts are updated.

The following is my understanding of react above two ideas:

1.React has a very powerful API, when the data source changes, will trigger render, which means you only need to focus on the data as a whole, all the other react this framework will be completed, reducing the difficulty of development and the complexity of the logic.

2. When the data source changes, react will use the diff algorithm in memory to compare whether the data source has changed and decide whether to change the DOM. Because react has a very powerful virtual DOM system, it does all of the DOM's work in memory, and then responds to the DOM modification to the actual DOM through the render function.

Is it difficult for many people to hear and react so strong? In fact, react in the poor API, very simple and easy to understand, the most commonly used are several life cycle functions and render.

Three. Life cycle in the react

1.componentDidMount

The component has been loaded into the DOM to execute this function, where it is possible to initialize some of the functions that will be executed, only once in the react life cycle. In development, the SetState executed in this function is not immediately available through this.state and can be obtained by timing.

2.componentWillMount

This function is rarely used by me when the component is going to be mounted in the DOM execution. Initialization work I basically finished in constructor and Componentdidmount.

3.componentWillUnmount

Removing the component from the DOM executes this function, where you can clean up useless dom and events.

4.componentWillUpdate

The component will be updated to execute. You can clean up the event that is bound in componentdidupdate in this function (this is useful).

5.componentDidUpdate

The component has been updated to perform this operation. You can initialize a function in this function that requires a data source in the state as a parameter. To prevent initialization multiple times, you can clean up in componentwillupdate. Look at the following requirements:

Need to implement a one-dollar treasure module, the navigation bar has a tab bar shows a total of how many times, the current period of the Default first tab display (can slide). Such as:

A dollar to seize the treasure

This is accomplished using Swiper.js. It can only be implemented after getting the expiration number from the server, so we initialize it in Compoenntdidupdate:

Initialization

However, we may also be able to get the number of shopping carts and other updates to the state, depending on the react life cycle, as long as the state changes, it is possible (Shouldcomponentupdate returns True) Will go to execute componentdidupdate. This will result in multiple initialization of the function. So we have to judge in componentwillupdate to clean up the initialized function to avoid causing multiple initializations.

Unmount

6.shouldComponentUpdate

This function gives us the developer's permission to take control of the render after the data source has changed. The default function always returns TRUE. Returns false, the Render function does not execute, and componentwillupdate and componentdidupdate do not. It is possible to perform logical judgments in this function, and it is necessary to perform render. In pursuit of higher performance. You can manually control whether render is performed.

These life cycle functions are the most common react operations that I use most frequently during the development process.

Learn react, as long as we only care about the data source, and to SetState, to update the state trigger render is OK. To this end, the life cycle in the react is generally recorded here, in case of forgetting, for review only.

React Getting started is not difficult, but in-depth .....

Author information
Original author of the Force Spectrum Leapcloud Group _ux member: Zhiyingzzhou "original"
Starting Address: https://blog.maxleap.cn/archives/1033
Author profile: Front-end newcomer, current Maxleap UX team member, mainly engaged in react development, has been interested in hybrid hybrid app.

Some experience in the Reactjs development process