This is the 22nd day of my participation in the Genwen Challenge in August

React

hybrid

React provides components for reuse of the virtual DOM, so React provides hybrid technologies for reuse of component functionality

In ES5, we can use mixins to inherit properties and methods from objects

But in ES6, the extends keyword is provided to implement inheritance, so mixins are removed, so we can implement mixed inheritance using extends. Divided into two steps

The first step is to define a hybrid class that inherits the component base class

The second component class inherits the hybrid class

In this way the component class, through the hybrid class, inherits the component base class

The reason for the two-step split is that ES6 does not implement multiple inheritance.

After inheriting hybrid classes, we can override their methods, so that the methods we override override the original methods, and when we use methods in components, we use our defined methods in preference.

// Introduce mixed classes
 import Start from '.. /start/start';
 // Define component classes, inherit hybrid classes, and expose interfaces
 export default class Css extends Start {
  // Override the method
 constructor(props) {
      super(props);
      // Initialization state
      this.state = {
          title: 'Global CSS Styles'.intro: 'Set global CSS styles; Basic HTML elements can be styled and enhanced with class; And an advanced grid system. '.data: [].// Request an address
          url: 'data/css.json'}}}Copy the code

Flux

React is a view-level framework, so it is weak to handle data by itself. For example, it needs the AXIOS framework to send asynchronous requests. Of course, handling communication between components is expensive, which is why the React team came up with the idea of Flux

In the traditional MVC model, the model and view can be accessed in both directions, so it forms a network structure, and when the system is sufficiently complex, the cost increases exponentially if we add or subtract a module.

The React team proposed the Flux idea, which makes the entire data flow a one-way cycle. Therefore, no matter how complex the system is, we can abstract it into a flow direction, thus reducing our maintenance costs

Early Flux simply provided architectural ideas, and many developers have implemented frameworks based on this, such as Reflux, Redux, Vuex, and more

Part of the

Action component or user posted message

The Dispatcher captures the object of the message and processes the data

Store Is used to store data

View Component view

The communication process

A component publishes an action,

This action is captured by the Dispatcher,

The Dispatcher modifies data according to the action

The modified data is stored in store

When the store is updated, the new data is passed to another component

Reflux is different from redux

Both are created based on flux ideas, but there are differences in passing data to components

Reflux transfers data for a component based on its state (modeled in observer mode)

Used in ES5 development

Redux is used to pass data to components based on their properties (common at work)

Used in ES6 development

redux

The Store is enhanced by placing the logic of processing data in the Store; reflux is based on the idea of Flux and simplifies Flux by removing the Dispatcher

Part of the

View Component view

Action posted message

Store Stores data

The communication process

A component publishes an action message

The message is captured by the Store

Store processes data based on messages

Pass the result of processing to another component