Front-End Frame II: An overview of React (ii)

One, react components

1. Parent-Child Components

React organizes apps by combining rather than inheriting. An application starts from a component and creates other components in the component, and all the components eventually form a tree-like structure.

We still have the salutation of the parent and child components, but they are not inheritance, but rather the parent component creates the child component's relationship.

This involves an important problem: the communication problem of the parent-child component.

In the case of other frameworks, the parent-child component in React is so communicating:

The parent component passes the data by setting props when the subassembly is created

A child component passes a message to the parent component by invoking a callback function set by the parent component in props

In other words, a component that has a parent-child relationship is actually communicating entirely through props attributes. What if we don't have a father-son relationship? The official recommendation is to communicate through a global event system.

2, Mixins

It is said that the components in React are not inherited, but only who created the relationship, then some of our public logic should be how to deal with it. The public logic should be implemented through mixins.

Mixin, it can be very simple to understand that he is a Mixin object on the method is mixed on another component, and $.extend method to do things similar.

However, react has done some special treatment for mixin.

The lifecycle-related callbacks written in Mixin are merged, that is, they will be executed without overwriting each other.
For example: You can define Componentdidmount in Mixin to initialize the component, and he will not overwrite the component that uses this mixin. When actually executed, the mixin Componentdidmount is executed first, and the Componentdidmount method of the component is executed.

It is important to note that because the Mixin function is to pull away from the public function, there is no need to render the DOM, so it has no Render method. If you define the Render method, it will conflict with the component's Render method and error.
Similarly, mixin should not contaminate state, so he has no setState method. Mixin should provide only interfaces (that is, methods) and should not provide any properties. It is best to have properties inside mixin as private variables in the form of closures. Just like this:

var Timer = function() {

 var t = 1;//私有属性

 return {//xxxx}

}

It is better not to put on this, to avoid pollution.
Of course, if you actually write some variables on this, then react also mixin, because react does not differentiate whether your property is a function or not.

Ii. MVC architecture Flux and reflux

Because React is really just a View, it can be very difficult to decouple if you are organizing large applications because of the lack of a data layer. React official out of a framework called flux. Strictly speaking, Flux is an MVC specification, not a framework, which can be implemented on its own without the need of a flux library.

With flux we can completely separate the View from the Model. View is the React component, and Model is the store in flux.

The store is an object that stores data that registers events of interest on dispatch.

Dispatcher is a global event dispatcher provided by flux, and action is actually a custom event.

When certain events occur, such as when a user clicks a button, the view does not directly modify the store, but instead triggers an action. This action is distributed through dispatch and the store has registered for events of interest to him, so he can receive this event, update the data, and eventually reflect the update on the view.

So plainly, flux just defines a specification, its library is very small, because in fact, he provides a global Dispatcher default implementation. As for how the store is going to write it all by itself, as long as it can save the data and register the monitor on the dispatcher.

You can consult this number: 858568103, or scan the QR code below, there is information, can help you solve some problems.

Front-End Frame II: An overview of React (ii)