A detailed explanation of abstraction between components in React

This article mainly introduces a brief discussion of abstraction between components in React. Now I will share it with you and give you a reference.

As for the abstraction between components that I want to learn today, I, a novice, haven’t figured it out after reading it several times. This time I decided to find out. In component construction, there is usually a type of function that needs to be shared by different components. At this time, abstract concepts are involved. In React, we mainly understand mixins and high-order components.

mixin

The characteristics of mixin are widely found in various object-oriented languages. In ruby, the include keyword is mixin, which is to mix one module into another module. in, or in a class.

Encapsulating 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'

For the generalized mixin method, all the methods in the mixin object are mounted to the original object through assignment to achieve the mixing of the object.

Mixin in React

React provides mixin attributes when using createClass to build components, such as the official PureRenderMixin:

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

In the createClass object parameter Pass in the array mixins, which encapsulates the modules we need. The mixins array can also add multiple mixins. There is overlap between each mixin method, and there is a distinction between ordinary methods and life cycle methods.

If you implement two common methods with the same name in different mixins, they will not be overwritten in React. An error in ReactClassInterface will be reported in the console, indicating that you tried to define it multiple times in the component. a method. **Therefore, mixins of Chongming ordinary methods are not allowed in React. If it is a method defined by the React life cycle, the life cycle methods of each module will be superimposed and executed sequentially**.

We see that the mixin using createClass does two things for the component:

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

2. Life cycle inheritance: Props and state are merged. Mixins can merge life cycle methods. If there are many mixins to define the componentDidMount cycle,

then React will merge them together very intelligently. implement.

ES6 CLASS and decorator

Now we prefer to use the es6 class method to build components, but it does not support mixins. There is no good solution in the official documentation.

Decorator is a feature defined in ES 7, which is similar to annotations in Java. Decorators are methods used at runtime. In redux or other application layer frameworks, decorators are increasingly used to decorate components.

The core-decorator library provides developers with some practical decorators, which implement the @mixin we want. It superimposes the methods of each mixin object onto the prototype of the target object 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 acts on classes, and also acts on methods. It can control the own attributes of methods.

Note: React 0.14 starts to strip mixin

mixin problem

It destroys the encapsulation of the original component

The mixin method can The mixing method brings new features to the component, as well as new props and state, which means that there are some invisible states that we need to maintain. Mixins may also have interdependencies, which form a chain of dependencies and affect each other.

1. Name conflict

2. Increase complexity

The above is what I compiled for everyone, I hope It will be helpful to everyone in the future.

Related articles:

How to use three-level linkage selectors in WeChat mini programs

PHP closures and anonymous functions (details Tutorial)

About custom events in Vue components (detailed tutorial)

How to implement list pull-down refresh pull-up in WeChat applet Loading effect?

How to use the digital scroll plug-in in the WeChat applet

What are the BOM application skills in JS

The above is the detailed content of A detailed explanation of abstraction between components in React. For more information, please follow other related articles on the PHP Chinese website!