Explanation of abstract examples between components in React

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. This article mainly introduces a brief discussion of abstraction between components in React. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

mixin

The characteristics of mixin are widely found in various object-oriented languages. In ruby, the include keyword is mixin, which is to mix a module into In another module, 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 hung by assignment. Load it to the original object 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>
  }
})

Pass in the array mixins in the createClass object parameter, which encapsulates the modules we need. Multiple mixins can also be added to the mixins array, and there is overlap between each mixin method. 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. Mixin can merge life cycle methods. If there are many mixins to define the componentDidMount cycle,

then React will be very intelligent. They are merged and executed together.

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 the class, and also acts on the method. It can control the method's own attributes.

Note: react 0.14 starts to strip mixin

mixin problem

destroys the encapsulation of the original component

The mixin method can mix methods to bring new features to the component, and it will also bring 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. Naming conflict

2. Increased complexity

Related recommendations:

What are the ways to write components in React

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