React Notes _ (1) _react overview

React Overview

React is a very good front-end technology.

It breaks down the application into separate small modules, which are then assembled to complete the development.

React is far more difficult to learn than Angularjs.

React relies on a variety of tools such as Webpack to learn to use, and then focus on understanding and using ES6, before entering its core.

For more information on react, please refer to the following and react official documentation.

React originated in Facebook's internal project because the company was dissatisfied with all the JavaScript MVC frameworks on the market and decided to write a set of Web sites that would be used to erect Instagram. After doing it, found that this set of things very useful, in May 2013, open source. Because React's design ideas are extremely unique, revolutionary and innovative, the code logic is simple. Therefore, more and more people are beginning to pay attention to and use, think it may be the mainstream tool of WEB development in the future.

REACTJS website Address: http://facebook.github.io/react/

GitHub Address: Https://github.com/facebook/react

React is not a complete MVC framework, it can be considered as a V (view) in MVC, and even react does not quite recognize the MVC development model;

React server-side render capability can only be regarded as a icing on the cake, not its core point of departure, in fact, react official site almost no mention and its application on the server side;

Some people take react and web Component in the same way, but they are not completely competitive relationship, you can use react to develop a real web Component;

React is not a new template language, JSX is just a representation, no JSX react can work.

Background and principles of REACTJS

In web development, we need to manipulate the DOM in real time by reacting the changed data to the UI. complex or frequent dom operations are often the cause of performance bottlenecks (how high-performance complex DOM operations are often an important metric for measuring a front-end developer's skills). React introduced the virtual DOM mechanism for this purpose: a set of Dom APIs was implemented with JavaScript on the browser side. All DOM constructs are made based on the react, and each time the data changes, react reconstructs the entire DOM tree, then compares the current entire DOM tree with the previous DOM tree to get the difference between the DOM structure, Then only the parts that need to be changed are actually updated in the browser DOM. And react can batch the refresh of the virtual DOM, the two data changes in an event loop are merged, for example, if you change the node contents from a to B successively, and then from B to A,react, the UI does not change, and if you control it manually, This logic is often extremely complex. Although it is necessary to construct a complete virtual DOM tree every time, because the virtual DOM is memory data, the performance is very high, and the actual DOM operation is only the diff part, so it can achieve the purpose of improving performance. In this way, while ensuring performance, developers will no longer need to focus on how changes to one or more specific DOM elements can be updated, but only to be concerned about how the entire interface is being render in any given state of the data.

If you write a Web page of server-side render as you did in the 90 's, you should know that what the server is doing is sending HTML to the browser based on the data. If one of the user's clicks needs to change a state text, it is done by refreshing the entire page. The server side does not need to know which piece of HTML has changed, but simply refreshes the entire page based on the data. In other words, any changes to the UI are done through a whole refresh. Instead, react brings this development model to the front end in a high-performance way, and you can think of refreshing the entire page with every update to the interface. As for how to perform a partial update to ensure performance, this is what the react framework will do.

Using Facebook's example of a chat app in React's video, when a new message comes in, traditional development ideas like, your development process needs to know which data came up, how to add the new DOM node to the current DOM tree, and based on the react of development ideas such as, You always have to care about the data as a whole, and how the UI changes between the two data are completely left to the framework. As you can see, the use of react greatly reduces the complexity of logic, meaning that development is less difficult and there are fewer opportunities for bugs to be generated.

Virtual Dom (Virtual-dom) not only brings simple UI development logic, but also introduces the idea of component development, the so-called component, which is a packaged, individually functional UI component. React recommends a component-based rethinking of the UI composition, defining each module that is functionally independent on the UI as a component, and then building the overall UI by composing or nesting the small components into large components. For example, Facebook's instagram.com entire site was developed using react, and the entire page was a large component that contained a large number of other components nested, and it was interesting to see the code behind it.

If the idea of MVC allows you to separate the view-data-controller, then the modular way of thinking is to bring the separation between the UI function modules. We look at the differences between MVC and component development ideas through a typical blog review interface.

For the MVC development model, the developer defines the three as different classes to achieve the separation of performance, data, and control. Developers are more technical in the context of the UI to split, to achieve loose coupling.

For react, it's a completely new approach, with developers starting from a functional perspective, dividing the UI into different components, each packaged individually.

In react, you organize and write your code according to the natural partitioning of the interface module, and for the comment interface, the entire UI is a large component of widgets, each of which cares only for its own part of the logic and is independent of each other.

React is divided into Web version and native version of two pieces, the former studious, the latter involves the client packaging and call resources and other technologies, so there is additional learning costs.
However, this is a good thing after all, and is already the front-end area standard.

Many companies native mobile development also began to use react native, because the use of it to develop fast, high reusability, and do something with the original gap is small, saving a lot of human and material costs, and thus by the owners of the favor.
For the introduction of react I would say that react does not deal directly with the DOM of HTML, but instead uses the virtual DOM. HTML is not as big a difference as the virtual DOM, but it is far from being efficient, so we have to use this virtual DOM technique to render pages efficiently and quickly, and this is one of the key features of attracting people.

React Notes _ (1) _react overview