Abstract components in React and abstract react Components

Abstract components in React and abstract react Components

The abstraction between components to be learned today is actually not clear after I read it several times. This time I decided to find out. In component building, there is usually a type of function that needs to be shared by different components. This involves abstract concepts. In React, we mainly understand mixin and high-level components.

Mixin

Mixin is widely used in various object-oriented languages. In ruby, The include keyword is mixin, which is to mix a module into another module or class.

Package mixin Method

const mixin = function(obj, mixins) { const newObj = obj newObj.prototype = Object.create(obj.prototype) for(let props in mixins) {  newObj.prototype[props] = mixins[props] } return newObj}const BigMixin = { fly: () => {  console.log('i can fly') }}const Big = function() { console.log('new big')}const FlyBig = mixin(Big , BigMixin)const flyBig = new FlyBig()FlyBig.fly() //'i can fly'

In the broad sense, the mixin method is to mount all the methods in the mixin object to the original object by assigning values to achieve object blending.

Mixin in React

React provides the mixin attribute when building components using createClass, such as the official PureRenderMixin:

import React from 'react'import PureRenderMixin from 'react-addons-pure-render-mixin'React.createClass({  mixins: [PureRenderMixin]    render() {    return <div>foo</foo>  }})

Input the array mixins in the createClass object parameters, which encapsulates the modules we need. The mixins array can also add multiple mixins, and each of the mixins Methods overlap, there are differences between common methods and life cycle methods.

Implement two common methods with the same name in different mixins, which will not be overwritten in React. An error in ReactClassInterface will be reported in the console, indicates that you try to define a method multiple times in the component. ** Therefore, mixins of common methods are not allowed in React. If they are the methods defined in the React lifecycle, the lifecycle methods of each module are superimposed and executed sequentially **.

We can see that the mixin of createClass has done two things for the group price:

1. Tool Methods: Some tool methods are shared for the component and can be used in each component.

2. lifecycle inheritance: merging props and state allows mixin to merge lifecycle methods. If there are many mixins that define the cycle of componentDidMount,

Then, React intelligently combines them for execution.

ES6 CLASS and decorator

We recommend that you use the es6 class method to build components, but it does not support mixin. The official documentation does not provide a good solution.

Decorator is a feature defined in ES 7, which is similar to the annotation in Java. Decorator is a running method. In redux or other application layer frameworks, decorator is increasingly used to describe components.

The core-decorator Library provides developers with some practical decorator, which implements the desired @ mixin. It overlays the methods of each mixin object on the target object prototype to achieve the purpose of mixin.

import React, { Component } from 'react'import { mixin } from 'core-decorator'const PuerRender = {  setTheme()}const Them = {  setTheme()}@mixin(PuerRender, Them)class MyComponent extends Component {  render() {...}}

The above decorator only applies to the class and also serves on the method. It can control its own attributes.

Note: react 0.14 begins to strip mixin

Mixin Problems

Destroys the encapsulation of original components.

The mixin method can be mixed into the method to bring new features to the component, as well as new props and state, which means that some invisible states need to be maintained. Mixin may also be dependent on each other. In this way, dependency chains may affect each other.

1. Name Conflict
2. Increase complexity

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.