组件封装的相关笔记组件封装的相关笔记

封装组件的思路封装组件时，需要先抽象组件的功能，比如一个form组件，里面包含input、select等子组件，那我们先从逻辑上拆分
1、我们最终业务使用的是一个整体form，里面包含input、select子组件，那这些子组件的共性和他们的差异点在哪里？
共性：
方法（如获取值、赋值等）
props（接收特定参数去控制组件部分逻辑及展示）
差异点：
样式
特性及逻辑
封装的目的其实就是抽出共性，将差异点放出去通过配置处理，这里贴一下大神写的react高阶组件

import React from 'react'; import AsyncValidator from 'async-validator'; class InputComponent extends React.Component { render() { const {form} = this.props; return (); } }function FormCreate(options) { const store = {}; return function(WrappedComponent) { return class HOCWrappedComponent extends React.Component { constructor(props) { super(props); this.getFieldProps = this.getFieldProps.bind(this); }getFieldProps(fieldKey, options) { const self = this; const validator = new AsyncValidator({[fieldKey]: options.validator}); return { value: store[fieldKey] && store[fieldKey].value, onInput(e) { const value = https://www.it610.com/article/e.target.value; store[fieldKey] = {...store[fieldKey], value}; validator.validate({[fieldKey]: value}) .then(() => { store[fieldKey].error = null; self.forceUpdate(); }) .catch(({errors}) => { store[fieldKey].error = errors.map(error => error.message); self.forceUpdate(); }) } }; }getFieldData(fieldKey) { return store[fieldKey] && store[fieldKey].value; }getFieldError = (fieldKey) => { return { children: store[fieldKey] && store[fieldKey].error } }render() { const form = { getFieldProps: this.getFieldProps, getFieldError: this.getFieldError } return ( ); } } } }const FormCreateComponent = FormCreate({data: 'hello world'})(InputComponent); export default class extends React.Component { render() { return ( ); } }

这里做的就是相当于把子组件如input相关的特性放在组件里面自己实现，然后往上面一层抽离出共性，这里姑且先叫它组件生成器，然后最上层就是抛出去一个form组件供外部调用。

文章图片
image.png
结合上图可以大概总结一些，我们最终得到的结果是一个整体，但是这个整体其实是由一个生成器生成不同类型的子组件，在生成器中我们支持参数定制一些配置或者属性，然后下面包含n种不同类型的子组件。
2、过程中可能会使用一些工具帮助处理
async-validator 一种表单校验工具
story-book 组件文档管理工具
lerna 包管理工具
babel-plugin-import 打包处理工具，可帮助实现组件的按需引入
react项目中暴露webpack配置可使用eject
【组件封装的相关笔记】3、封装组件的一些思考
我们为什么封装组件，怎样的组件才算是比较好的？
这里需要考虑几点，主题定制化、国际化、可访问性、单元测试这些都需要封装的时候考虑进需求，封装组件是为了更方便的去开发，所以最终目的只要能帮助写业务是提高效率，组件就是合格的。黑猫白猫能抓住老鼠的才是好猫。
在Vue中怎么实现高阶函数？
这里有两种方法，一种通过函数式组件去封装，还一种使用mixins去实现，一般在Vue项目中习惯性使用mixins会更多，和上面抽象的逻辑一样，mixins抽取共性，封装，然后差异性的点还是放在子组件去做，将一些配置化的东西抽离就可以。