Detailed explanation of the use of high-order components of mixin

This article mainly introduces a brief discussion of abstraction between components in React. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let’s follow the editor and take a look.

Regarding 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

mixin features are widely found in various object-oriented languages. In ruby, includekeywords It is a mixin, which mixes one module into another module or 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. For ordinary methods and lifecycle methods, there are distinguished.

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 the 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

I believe you have mastered it after reading the case in this article Method, for more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

JS method to obtain the top N color values ​​​​of an image

Detailed explanation of graphics and text using the render method

The applet uses .getImageInfo() to obtain image information

The above is the detailed content of Detailed explanation of the use of high-order components of mixin. For more information, please follow other related articles on the PHP Chinese website!