Home > Article > Web Front-end > Vue, Mixins and component inheritance
This time I will bring you Vue, Mixins and component inheritance. What are the precautions for Vue, Mixins and component inheritance? The following is a practical case, let’s take a look.
Some time ago when I was writing a Hybrid page at work, I encountered such a scenario. The company needed a series of active components, and when each component was registered, it needed to call an interface provided by the App. Several methods were considered at the beginning, including mixins, component inheritance, and react higher-order components. But after various considerations, we finally chose to use high-level components.
So what are advanced components? First of all, you must first understand that requesting classes in ES6 is just syntactic sugar, and the essence is prototypal inheritance. To better illustrate this, we will not modify the component's code. Instead, it provides components that wrap components and enhance them with additional functionality. We call such components higher-order components (Higher-Order Component).
1. Disadvantages of Mixins
React officially does not recommend the use of Mixins technology to achieve code reuse. Mixins technology has a series of shortcomings. First, Mixins will cause naming problems. Conflict, we inject Mixins in the following way:
var myMixins = require('myMixins'); var Button = React.createClass({ mixins: [myMixins], // ... })
If you need to inject multiple mixins, one of them is your own and the other may be a third-party. It is possible to use a method with the same name in two mixins, which will cause one of them to not work, and all you can do is change the name of one of the methods. On the other hand, a mixins may be very simple at first, only needing to implement a certain function, but when the business becomes more complex and more methods need to be added, it will become very complicated. To learn more about the shortcomings of mixins, you can check out the official blog.
2. Component inheritance
For myself, this method has been used more often. First, create a BaseComponent and implement a series of public methods in it. Each subsequent component inherits from this component, but the disadvantage is that it is not flexible enough. Only some relatively fixed methods can be implemented in the basic components, and there are great restrictions on the customization of each component.
3. React high-order components
Due to a series of shortcomings of mixins, React officials also realized that the pain points caused by using mixins are far higher than those caused by the technology itself. Advantages, high-order components can replace mixins, and it has richer uses when you go deeper.
Higher-order components (HOC) are advanced technologies in React that reuse component logic. But higher-order components themselves are not React APIs. It's just a pattern that arises inevitably from the compositional nature of React itself.
Higher-order functions
Speaking of high-order components, we must first talk about high-order functions. High-order functions are functions that at least meet the following conditions:
1. Accept one or more functions as input
2. Output a function
In JavaScript, a language where functions are first-class citizens, there are still many uses of higher-order functions. , like our usual callback functions, etc., all use the knowledge of high-order functions. Let’s first look at a simple higher-order function
var fun = function(x, y) { return x + y; }
fun is a function, let’s pass the entire function as a parameter to another function
var comp = function(x, y, f) { return f(x,y); }
Verify it
comp(1,2,fun) // 3
High-order component definition
Analogous to the definition of a high-order function, a high-order component accepts a component as a parameter, performs a series of processes on the component in the function, and then returns a new component. as return value.
We first define a high-order component BaseActivity
const BaseActivity = (WrappedComponent) => { return class extends Component { render() { return ( <section> <p>我的包裹组件</p> <WrappedComponent /> </section> ) } } }
The component accepts a wrapped component as a parameter and returns a processed anonymous component.
Use this high-order component in other components
class Example extends React.PureComponent { constructor(props) { super(props); this.state = { width: '100%', height: '100%' } } componentWillMount() { if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { return; } else { this.setState({ width: '375px', height: '640px' }) } } render() { let { width, height } = this.state; return ( <p className="activity"> <p className="activity-content" style={{ width, height }}> <button className="btn">参加活动</button> </p> </p> ) } } export default BaseActivity(Example);
The specific usage is to use the BaseActivity function to wrap the component when exporting the component, and look at the output react dom content
An anonymous component is wrapped outside the Example component.
Parameters
Since the higher-order component is a function, we can pass the parameters we need to it
const BaseActivity = (WrappedComponent, title) => { return class extends Component { render() { return ( <section> <p>{title}</p> <WrappedComponent /> </section> ) } } }
Export like this in Example
export default BaseActivity(Example, '这是高阶组件的参数');
Let’s look at the output react dom
and we can see that the parameters have been passed in.
当然还可以这样用(柯里化)
const BaseActivity (title) => (WrappedComponent) => { return class extends Component { render() { return ( <section> <p>{title}</p> <WrappedComponent /> </section> ) } } }
在Example中这样export
export default BaseActivity('这是高阶组件的参数')(Example);
这种用法在ant-design的表单以及redux的connect中我们都可以看到
// ant const WrappedDemo = Form.create()(Demo) // redux export default connect(mapStateToProps, mapDispatchToProps)(Counter)
高阶组件还可以扩展原组件的props属性,如下所示:
const BaseActivity (title) => (WrappedComponent) => { return class extends Component { render() { const newProps = { id: Math.random().toString(8) } return ( <section> <p>{title}</p> <WrappedComponent {...this.props} {...newProps}/> </section> ) } } }
看下输出的react dom
高阶组件的缺点
高阶组件也有一系列的缺点,首先是被包裹组件的静态方法会消失,这其实也是很好理解的,我们将组件当做参数传入函数中,返回的已经不是原来的组件,而是一个新的组件,原来的静态方法自然就不存在了。如果需要保留,我们可以手动将原组件的方法拷贝给新的组件,或者使用hoist-non-react-statics之类的库来进行拷贝。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
The above is the detailed content of Vue, Mixins and component inheritance. For more information, please follow other related articles on the PHP Chinese website!