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.
Naming conflict
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
React Router User Guide: How to implement front-end routing control
Sep 29, 2023 pm 05:45 PM
ReactRouter User Guide: How to Implement Front-End Routing Control With the popularity of single-page applications, front-end routing has become an important part that cannot be ignored. As the most popular routing library in the React ecosystem, ReactRouter provides rich functions and easy-to-use APIs, making the implementation of front-end routing very simple and flexible. This article will introduce how to use ReactRouter and provide some specific code examples. To install ReactRouter first, we need
PHP, Vue and React: How to choose the most suitable front-end framework?
Mar 15, 2024 pm 05:48 PM
PHP, Vue and React: How to choose the most suitable front-end framework? With the continuous development of Internet technology, front-end frameworks play a vital role in Web development. PHP, Vue and React are three representative front-end frameworks, each with its own unique characteristics and advantages. When choosing which front-end framework to use, developers need to make an informed decision based on project needs, team skills, and personal preferences. This article will compare the characteristics and uses of the three front-end frameworks PHP, Vue and React.
Integration of Java framework and front-end React framework
Jun 01, 2024 pm 03:16 PM
Integration of Java framework and React framework: Steps: Set up the back-end Java framework. Create project structure. Configure build tools. Create React applications. Write REST API endpoints. Configure the communication mechanism. Practical case (SpringBoot+React): Java code: Define RESTfulAPI controller. React code: Get and display the data returned by the API.
Learn best practice examples of pointer conversion in Golang
Feb 24, 2024 pm 03:51 PM
Golang is a powerful and efficient programming language that can be used to develop various applications and services. In Golang, pointers are a very important concept, which can help us operate data more flexibly and efficiently. Pointer conversion refers to the process of pointer operations between different types. This article will use specific examples to learn the best practices of pointer conversion in Golang. 1. Basic concepts In Golang, each variable has an address, and the address is the location of the variable in memory.
Vue.js vs. React: Project-Specific Considerations
Apr 09, 2025 am 12:01 AM
Vue.js is suitable for small and medium-sized projects and fast iterations, while React is suitable for large and complex applications. 1) Vue.js is easy to use and is suitable for situations where the team is insufficient or the project scale is small. 2) React has a richer ecosystem and is suitable for projects with high performance and complex functional needs.
What closures does react have?
Oct 27, 2023 pm 03:11 PM
React has closures such as event handling functions, useEffect and useCallback, higher-order components, etc. Detailed introduction: 1. Event handling function closure: In React, when we define an event handling function in a component, the function will form a closure and can access the status and properties within the component scope. In this way, the state and properties of the component can be used in the event processing function to implement interactive logic; 2. Closures in useEffect and useCallback, etc.
The relationship between the number of Oracle instances and database performance
Mar 08, 2024 am 09:27 AM
The relationship between the number of Oracle instances and database performance Oracle database is one of the well-known relational database management systems in the industry and is widely used in enterprise-level data storage and management. In Oracle database, instance is a very important concept. Instance refers to the running environment of Oracle database in memory. Each instance has an independent memory structure and background process, which is used to process user requests and manage database operations. The number of instances has an important impact on the performance and stability of Oracle database.
React's Role in HTML: Enhancing User Experience
Apr 09, 2025 am 12:11 AM
React combines JSX and HTML to improve user experience. 1) JSX embeds HTML to make development more intuitive. 2) The virtual DOM mechanism optimizes performance and reduces DOM operations. 3) Component-based management UI to improve maintainability. 4) State management and event processing enhance interactivity.
