时间:2021-07-01 10:21:17 帮助过:9人阅读
这次给大家带来React中组件的抽象使用方法,React中组件的抽象使用注意事项有哪些,下面就是实战案例,一起来看一下。
mixin
mixin的特性广泛存在于各个面向对象语言中,在ruby中,include关键词就是mixin,是将一个模块混入到另外一个模块中,或者是类中。
封装mixin方法
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'
对于广义的mixin方法,就是用赋值的方式将mixin对象里的方法都挂载到原对象上去,来实现对对象的混入。
React中的mixin
React在使用createClass构建组件时提供了mixin属性,如官方的PureRenderMixin:
import React from 'react' import PureRenderMixin from 'react-addons-pure-render-mixin' React.createClass({ mixins: [PureRenderMixin] render() { return <p>foo</foo> } })
在createClass对象参数中传入数组mixins,里面封装了我们所需要的模块,mixins数组也可以增加多个mixin,其每一个mixin方法之间的有重合,对于普通方法和生命周期方法是有所区分的。
在不同的mixin里实现两个名字一样的普通方法,在React中是不会被覆盖的,会在控制台中报一个ReactClassInterface里的错误,指出你尝试在组件中多次定义一个方法。**因此在React中是不允许出现崇明普通方法的mixins,如果是React生命周期定义的方法,则会将各个模块的生命周期方法叠加在一起顺序执行**。
我们看到使用createClass的mixin为组价做了两件事情:
1. 工具方法:为组件共享了一些工具类方法,可以在各个组件中使用。
2. 生命周期继承:props和state合并,mixin能够合并生命周期方法,如果有很多mixin来定义componentDidMount这个周期,
那么React会非常智能的将他们合并一起执行。
ES6 CLASS和decorator
现在我们比较推崇使用es6 class方法去构建组件,但是它并不支持mixin。官方文档中也没有给出很好的办法。
decorator是ES 7 中定义的特性,和Java中的注解相似。decorator是运用在运行时的方法,在redux或者其他应用层框架中,越来越多的使用decorator实现对组件的装饰。
core-decorator库为开发者提供了一些实用的decorator,其中实现了我们正想要的@mixin。它将每个mixin对象的方法都叠加到target对象的原型上以达到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() {...} }
如上decorator只是作用在类上面的,还有作用在方法上面的,它可以控制方法的自有属性。
注意:react 0.14开始剥离mixin
mixin的问题
破坏了原有组件的封装
mixin方法可以混入方法给组件带来新的特性,也会带来新的props和state,这意味着有些不可见的状态需要我们去维护。mixin也有可能存在相互依赖,这样形式依赖链,相互之间会影响
相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
推荐阅读:
JS提示文本框邮箱地址补全
$.ajax()方法怎样从服务器里获取json数据
以上就是React中组件的抽象使用方法的详细内容,更多请关注Gxl网其它相关文章!